feat(mobile): applique l'identité visuelle DSFR (bleu France, République Française)

- palette officielle DSFR (#000091, rouge Marianne, gris DSFR) dans lib/colors.ts
- composant RepubliqueHeader (bloc « République Française » + service CESIZen)
- restyle boutons/champs/cartes/onglets/urgence au style gouv.fr sur tous les écrans
- couleurs d'émotions conservées

Le DSFR étant un framework web, le mobile en reçoit l'identité visuelle (pas les classes fr-*). tsc 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mobile/app/(tabs)/index.tsx

@@ -5,6 +5,7 @@ import { useAuthStore } from '@/lib/auth-store';
 import { useRapport } from '@/hooks/useRapport';
 import { useSaisies } from '@/hooks/useTracker';
 import { Colors } from '@/lib/colors';
+import RepubliqueHeader from '@/components/RepubliqueHeader';
 
 export default function DashboardScreen() {
   const router = useRouter();
@@ -15,6 +16,8 @@ export default function DashboardScreen() {
   const recentSaisies = (saisies || []).slice(0, 3);
 
   return (
+    <View style={styles.screen}>
+      <RepubliqueHeader />
       <ScrollView style={styles.container} contentContainerStyle={styles.content}>
       <Text style={styles.greeting}>Bonjour, {user?.prenom} 👋</Text>
       <Text style={styles.subtitle}>Comment allez-vous aujourd'hui ?</Text>
@@ -81,39 +84,41 @@ export default function DashboardScreen() {
         </View>
       )}
       </ScrollView>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: Colors.white },
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 20 },
   greeting: { fontSize: 28, fontWeight: '800', color: Colors.black, marginTop: 8 },
   subtitle: { fontSize: 16, color: Colors.gray[500], marginTop: 4, marginBottom: 24 },
   actionsRow: { flexDirection: 'row', gap: 12, marginBottom: 24 },
   actionCard: {
-    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 20,
+    flex: 1, backgroundColor: Colors.white, borderRadius: 4, padding: 20,
-    alignItems: 'center', gap: 12, borderWidth: 1, borderColor: Colors.gray[100],
+    alignItems: 'center', gap: 12, borderWidth: 1, borderColor: Colors.gray[200],
   },
-  actionIcon: { width: 56, height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
+  actionIcon: { width: 56, height: 56, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
-  actionText: { fontSize: 14, fontWeight: '600', color: Colors.gray[700] },
+  actionText: { fontSize: 14, fontWeight: '600', color: Colors.black },
   statsContainer: { marginBottom: 24 },
   sectionTitle: { fontSize: 18, fontWeight: '700', color: Colors.black, marginBottom: 12 },
   statsRow: { flexDirection: 'row', gap: 12 },
   statCard: {
-    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 16,
+    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 4, padding: 16,
-    alignItems: 'center', borderWidth: 1, borderColor: Colors.gray[100],
+    alignItems: 'center', borderWidth: 1, borderColor: Colors.gray[200],
   },
-  statValue: { fontSize: 24, fontWeight: '800', color: Colors.black },
+  statValue: { fontSize: 24, fontWeight: '800', color: Colors.primary },
   statLabel: { fontSize: 12, color: Colors.gray[500], marginTop: 4 },
   recentContainer: { marginBottom: 24 },
   sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 },
-  seeAll: { fontSize: 14, fontWeight: '600', color: Colors.secondary },
+  seeAll: { fontSize: 14, fontWeight: '600', color: Colors.primary, textDecorationLine: 'underline' },
   saisieItem: {
     flexDirection: 'row', alignItems: 'center', gap: 12, padding: 14,
-    backgroundColor: Colors.gray[50], borderRadius: 14, marginBottom: 8,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 8,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  emotionIcon: { width: 44, height: 44, borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
+  emotionIcon: { width: 44, height: 44, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
   emotionEmoji: { fontSize: 22 },
   saisieContent: { flex: 1 },
   saisieEmotion: { fontSize: 15, fontWeight: '600', color: Colors.black },

mobile/app/(tabs)/info/[slug].tsx

@@ -11,7 +11,7 @@ export default function FeedDetailScreen() {
   if (isLoading) {
     return (
       <View style={styles.centered}>
-        <ActivityIndicator size="large" color={Colors.secondary} />
+        <ActivityIndicator size="large" color={Colors.primary} />
       </View>
     );
   }
@@ -32,7 +32,7 @@ export default function FeedDetailScreen() {
       <Stack.Screen options={{ title: feed.titre ?? '' }} />
       <ScrollView style={styles.container} contentContainerStyle={styles.content}>
         <View style={styles.badge}>
-          <Ionicons name="information-circle" size={14} color={Colors.secondary} />
+          <Ionicons name="information-circle" size={14} color={Colors.primary} />
           <Text style={styles.badgeText}>Information santé mentale</Text>
         </View>
 
@@ -52,10 +52,10 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 20, paddingBottom: 40 },
   centered: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: Colors.white },
-  badge: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start', backgroundColor: `${Colors.secondary}15`, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 999, marginBottom: 12 },
+  badge: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start', backgroundColor: `${Colors.primary}15`, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, marginBottom: 12 },
-  badgeText: { fontSize: 12, fontWeight: '600', color: Colors.secondary },
+  badgeText: { fontSize: 12, fontWeight: '600', color: Colors.primary },
   title: { fontSize: 24, fontWeight: '800', color: Colors.black, marginBottom: 8, lineHeight: 30 },
   date: { fontSize: 13, color: Colors.gray[400], marginBottom: 20 },
-  body: { fontSize: 15, lineHeight: 24, color: Colors.gray[700] ?? '#374151' },
+  body: { fontSize: 15, lineHeight: 24, color: Colors.black },
   errorText: { marginTop: 12, fontSize: 16, color: Colors.gray[400] },
 });

mobile/app/(tabs)/info/index.tsx

@@ -15,7 +15,7 @@ export default function InfoListScreen() {
       onPress={() => router.push(`/(tabs)/info/${item.slug}`)}
     >
       <View style={styles.cardIcon}>
-        <Ionicons name="document-text" size={24} color={Colors.secondary} />
+        <Ionicons name="document-text" size={24} color={Colors.primary} />
       </View>
       <View style={styles.cardContent}>
         <Text style={styles.cardTitle}>{item.titre}</Text>
@@ -62,14 +62,14 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   listContent: { padding: 16 },
   header: { marginBottom: 20 },
-  headerTitle: { fontSize: 14, fontWeight: '700', color: Colors.secondary, textTransform: 'uppercase', letterSpacing: 1 },
+  headerTitle: { fontSize: 14, fontWeight: '700', color: Colors.primary, textTransform: 'uppercase', letterSpacing: 1 },
   headerSubtitle: { fontSize: 15, color: Colors.gray[500], marginTop: 4 },
   card: {
     flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16,
-    backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  cardIcon: { width: 48, height: 48, borderRadius: 14, backgroundColor: `${Colors.secondary}15`, justifyContent: 'center', alignItems: 'center' },
+  cardIcon: { width: 48, height: 48, borderRadius: 4, backgroundColor: `${Colors.primary}15`, justifyContent: 'center', alignItems: 'center' },
   cardContent: { flex: 1 },
   cardTitle: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 4 },
   cardExcerpt: { fontSize: 13, color: Colors.gray[500], lineHeight: 18 },

mobile/app/(tabs)/journal/edit.tsx

@@ -112,7 +112,7 @@ export default function EditEntryScreen() {
           onPress={handleSubmit}
           disabled={updateSaisie.isPending || !emotionId}
         >
-          <Ionicons name="checkmark" size={20} color={Colors.black} />
+          <Ionicons name="checkmark" size={20} color={Colors.white} />
           <Text style={styles.submitBtnText}>
             {updateSaisie.isPending ? 'Envoi...' : 'Enregistrer'}
           </Text>
@@ -129,34 +129,35 @@ const styles = StyleSheet.create({
   loadingText: { color: Colors.gray[400], fontSize: 16 },
   title: { fontSize: 24, fontWeight: '800', color: Colors.black, marginBottom: 24 },
   section: { marginBottom: 24 },
-  label: { fontSize: 15, fontWeight: '700', color: Colors.gray[700], marginBottom: 10 },
+  label: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 10 },
   intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 16 },
   intensityValue: { fontSize: 48, fontWeight: '800', color: Colors.black },
   intensityUnit: { fontSize: 20, color: Colors.gray[400], marginLeft: 4 },
   sliderButtons: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
   sliderDot: {
-    width: 28, height: 28, borderRadius: 14,
+    width: 28, height: 28, borderRadius: 4,
     backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center',
   },
   sliderDotActive: { backgroundColor: Colors.primary },
   sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
-  sliderDotTextActive: { color: Colors.black },
+  sliderDotTextActive: { color: Colors.white },
   sliderLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 },
   sliderLabel: { fontSize: 12, color: Colors.gray[400] },
   textArea: {
-    backgroundColor: Colors.gray[50], borderWidth: 1, borderColor: Colors.gray[200],
+    backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
-    borderRadius: 16, padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
+    borderBottomWidth: 2, borderBottomColor: Colors.black,
+    padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
   },
   actionsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8, gap: 12 },
   cancelBtn: {
-    flex: 1, paddingVertical: 16, borderRadius: 14,
+    flex: 1, paddingVertical: 16, borderRadius: 4,
-    backgroundColor: Colors.gray[100], alignItems: 'center',
+    backgroundColor: Colors.white, alignItems: 'center', borderWidth: 1, borderColor: Colors.primary,
   },
-  cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.gray[600] },
+  cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
   submitBtn: {
-    flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 14,
+    flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 4,
-    backgroundColor: Colors.secondary, alignItems: 'center', justifyContent: 'center',
+    backgroundColor: Colors.primary, alignItems: 'center', justifyContent: 'center',
   },
-  submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.black },
+  submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
   btnDisabled: { opacity: 0.5 },
 });

mobile/app/(tabs)/journal/index.tsx

@@ -81,7 +81,7 @@ export default function JournalScreen() {
         }
       />
       <TouchableOpacity style={styles.fab} onPress={() => router.push('/(tabs)/journal/new')}>
-        <Ionicons name="add" size={28} color={Colors.black} />
+        <Ionicons name="add" size={28} color={Colors.white} />
       </TouchableOpacity>
     </View>
   );
@@ -92,14 +92,14 @@ const styles = StyleSheet.create({
   listContent: { padding: 16, paddingBottom: 80 },
   saisieCard: {
     flexDirection: 'row', alignItems: 'flex-start', gap: 12, padding: 16,
-    backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  emotionIcon: { width: 48, height: 48, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
+  emotionIcon: { width: 48, height: 48, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
   emotionEmoji: { fontSize: 24 },
   saisieContent: { flex: 1 },
   saisieHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 6 },
-  badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 8 },
+  badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 4 },
   badgeText: { fontSize: 13, fontWeight: '600' },
   intensityText: { fontSize: 12, color: Colors.gray[400] },
   intensityBar: { height: 4, backgroundColor: Colors.gray[200], borderRadius: 2, marginBottom: 6 },
@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
   emptyText: { fontSize: 14, color: Colors.gray[400], marginTop: 4 },
   fab: {
     position: 'absolute', right: 20, bottom: 20,
-    width: 56, height: 56, borderRadius: 28,
+    width: 56, height: 56, borderRadius: 4,
     backgroundColor: Colors.primary, justifyContent: 'center', alignItems: 'center',
     shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8,
     elevation: 6,

mobile/app/(tabs)/journal/new.tsx

@@ -59,7 +59,7 @@ export default function NewEntryScreen() {
             disabled={!emotionId}
           >
             <Text style={styles.nextBtnText}>Suivant</Text>
-            <Ionicons name="arrow-forward" size={20} color={Colors.black} />
+            <Ionicons name="arrow-forward" size={20} color={Colors.white} />
           </TouchableOpacity>
         </View>
       )}
@@ -96,12 +96,12 @@ export default function NewEntryScreen() {
           </View>
           <View style={styles.navRow}>
             <TouchableOpacity style={styles.backBtn} onPress={() => setStep(1)}>
-              <Ionicons name="arrow-back" size={20} color={Colors.gray[600]} />
+              <Ionicons name="arrow-back" size={20} color={Colors.primary} />
               <Text style={styles.backBtnText}>Retour</Text>
             </TouchableOpacity>
             <TouchableOpacity style={styles.nextBtn} onPress={() => setStep(3)}>
               <Text style={styles.nextBtnText}>Suivant</Text>
-              <Ionicons name="arrow-forward" size={20} color={Colors.black} />
+              <Ionicons name="arrow-forward" size={20} color={Colors.white} />
             </TouchableOpacity>
           </View>
         </View>
@@ -122,7 +122,7 @@ export default function NewEntryScreen() {
           />
           <View style={styles.navRow}>
             <TouchableOpacity style={styles.backBtn} onPress={() => setStep(2)}>
-              <Ionicons name="arrow-back" size={20} color={Colors.gray[600]} />
+              <Ionicons name="arrow-back" size={20} color={Colors.primary} />
               <Text style={styles.backBtnText}>Retour</Text>
             </TouchableOpacity>
             <TouchableOpacity
@@ -130,7 +130,7 @@ export default function NewEntryScreen() {
               onPress={handleSubmit}
               disabled={createSaisie.isPending}
             >
-              <Ionicons name="checkmark" size={20} color={Colors.black} />
+              <Ionicons name="checkmark" size={20} color={Colors.white} />
               <Text style={styles.nextBtnText}>{createSaisie.isPending ? 'Envoi...' : 'Enregistrer'}</Text>
             </TouchableOpacity>
           </View>
@@ -149,11 +149,11 @@ const styles = StyleSheet.create({
     width: 32, height: 32, borderRadius: 16, backgroundColor: Colors.gray[200],
     justifyContent: 'center', alignItems: 'center',
   },
-  stepActive: { backgroundColor: Colors.secondary },
+  stepActive: { backgroundColor: Colors.primary },
   stepNumber: { fontSize: 14, fontWeight: '700', color: Colors.gray[500] },
   stepNumberActive: { color: Colors.white },
   stepLine: { width: 40, height: 3, backgroundColor: Colors.gray[200], marginHorizontal: 4 },
-  stepLineActive: { backgroundColor: Colors.secondary },
+  stepLineActive: { backgroundColor: Colors.primary },
   stepTitle: { fontSize: 20, fontWeight: '700', color: Colors.black, marginBottom: 20 },
   intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 24 },
   intensityValue: { fontSize: 64, fontWeight: '800', color: Colors.black },
@@ -165,20 +165,21 @@ const styles = StyleSheet.create({
   sliderTrack: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 8 },
   sliderFill: { height: 6, backgroundColor: Colors.primary, borderRadius: 3 },
   sliderButtons: { flexDirection: 'row', justifyContent: 'space-between' },
-  sliderDot: { width: 28, height: 28, borderRadius: 14, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
+  sliderDot: { width: 28, height: 28, borderRadius: 4, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
   sliderDotActive: { backgroundColor: Colors.primary },
   sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
-  sliderDotTextActive: { color: Colors.black },
+  sliderDotTextActive: { color: Colors.white },
   textArea: {
-    backgroundColor: Colors.gray[50], borderWidth: 1, borderColor: Colors.gray[200],
+    backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
-    borderRadius: 16, padding: 16, fontSize: 15, color: Colors.black,
+    borderBottomWidth: 2, borderBottomColor: Colors.black,
+    padding: 16, fontSize: 15, color: Colors.black,
     minHeight: 120, marginBottom: 24,
   },
   navRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 },
-  backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 12, backgroundColor: Colors.gray[100] },
+  backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 4, backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.primary },
-  backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.gray[600] },
+  backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
-  nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 12, backgroundColor: Colors.primary },
+  nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
-  submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 12, backgroundColor: Colors.secondary },
+  submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
-  nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.black },
+  nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
   btnDisabled: { opacity: 0.5 },
 });

mobile/app/(tabs)/journal/reports.tsx

@@ -53,7 +53,7 @@ export default function ReportsScreen() {
               <Text style={styles.statLabel}>Intensite moy.</Text>
             </View>
             <View style={styles.statCard}>
-              <Ionicons name="heart" size={20} color="#FF69B4" />
+              <Ionicons name="heart" size={20} color={Colors.rougeMarianne} />
               <Text style={styles.statValue}>{rapport.stats.emotion_dominante?.icone || '—'}</Text>
               <Text style={styles.statLabel}>{rapport.stats.emotion_dominante?.nom || 'Aucune'}</Text>
             </View>
@@ -102,17 +102,17 @@ export default function ReportsScreen() {
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 20, paddingBottom: 40 },
-  periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 12, padding: 4, marginBottom: 20 },
+  periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 4, padding: 4, marginBottom: 20 },
-  periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 10 },
+  periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 4 },
-  periodBtnActive: { backgroundColor: Colors.white, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2 },
+  periodBtnActive: { backgroundColor: Colors.primary },
   periodText: { fontSize: 13, fontWeight: '600', color: Colors.gray[500] },
-  periodTextActive: { color: Colors.black },
+  periodTextActive: { color: Colors.white },
   loading: { padding: 40, alignItems: 'center' },
   loadingText: { color: Colors.gray[400] },
   statsRow: { flexDirection: 'row', gap: 10, marginBottom: 16 },
   statCard: {
-    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 16,
+    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 4, padding: 16,
-    alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[100],
+    alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[200],
   },
   statValue: { fontSize: 22, fontWeight: '800', color: Colors.black },
   statLabel: { fontSize: 11, color: Colors.gray[500] },
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
   repartitionItem: { marginBottom: 16 },
   repartitionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 6 },
   colorDot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
-  repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.gray[700] },
+  repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.black },
   repartitionPct: { fontSize: 14, fontWeight: '700', color: Colors.black },
   progressBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 4 },
   progressFill: { height: 6, borderRadius: 3 },

mobile/app/(tabs)/profile.tsx

@@ -58,7 +58,7 @@ export default function ProfileScreen() {
 
       {/* Logout */}
       <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
-        <Ionicons name="log-out-outline" size={20} color="#DC143C" />
+        <Ionicons name="log-out-outline" size={20} color={Colors.error} />
         <Text style={styles.logoutText}>Se deconnecter</Text>
       </TouchableOpacity>
 
@@ -82,26 +82,26 @@ const styles = StyleSheet.create({
   content: { padding: 20, paddingBottom: 40 },
   profileHeader: { alignItems: 'center', marginBottom: 32, marginTop: 12 },
   avatar: {
-    width: 80, height: 80, borderRadius: 40, backgroundColor: Colors.primary,
+    width: 80, height: 80, borderRadius: 4, backgroundColor: Colors.primary,
     justifyContent: 'center', alignItems: 'center', marginBottom: 12,
   },
-  avatarText: { fontSize: 28, fontWeight: '800', color: Colors.black },
+  avatarText: { fontSize: 28, fontWeight: '800', color: Colors.white },
   name: { fontSize: 22, fontWeight: '700', color: Colors.black },
   email: { fontSize: 14, color: Colors.gray[500], marginTop: 4 },
-  roleBadge: { backgroundColor: `${Colors.secondary}20`, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 8, marginTop: 8 },
+  roleBadge: { backgroundColor: `${Colors.primary}15`, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 4, marginTop: 8 },
-  roleText: { fontSize: 12, fontWeight: '600', color: Colors.secondary, textTransform: 'capitalize' },
+  roleText: { fontSize: 12, fontWeight: '600', color: Colors.primary, textTransform: 'capitalize' },
   menuSection: { marginBottom: 24 },
-  sectionTitle: { fontSize: 13, fontWeight: '700', color: Colors.gray[400], textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 },
+  sectionTitle: { fontSize: 13, fontWeight: '700', color: Colors.gray[500], textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 },
-  menuCard: { backgroundColor: Colors.gray[50], borderRadius: 16, overflow: 'hidden', borderWidth: 1, borderColor: Colors.gray[100] },
+  menuCard: { backgroundColor: Colors.white, borderRadius: 4, overflow: 'hidden', borderWidth: 1, borderColor: Colors.gray[200] },
   menuItem: {
     flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 15, paddingHorizontal: 16,
-    borderBottomWidth: 1, borderBottomColor: Colors.gray[100],
+    borderBottomWidth: 1, borderBottomColor: Colors.gray[200],
   },
-  menuLabel: { flex: 1, fontSize: 15, color: Colors.gray[700] },
+  menuLabel: { flex: 1, fontSize: 15, color: Colors.black },
   logoutBtn: {
     flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8,
-    paddingVertical: 16, borderRadius: 14, backgroundColor: '#DC143C10',
+    paddingVertical: 16, borderRadius: 4, backgroundColor: Colors.errorBg,
   },
-  logoutText: { fontSize: 15, fontWeight: '600', color: '#DC143C' },
+  logoutText: { fontSize: 15, fontWeight: '600', color: Colors.error },
   version: { textAlign: 'center', fontSize: 12, color: Colors.gray[400], marginTop: 20 },
 });

mobile/app/(tabs)/urgence.tsx

@@ -68,7 +68,7 @@ export default function UrgenceScreen() {
     <ScrollView style={styles.container} contentContainerStyle={styles.content}>
       <View style={styles.header}>
         <View style={styles.iconBadge}>
-          <Ionicons name="heart" size={20} color="#DC2626" />
+          <Ionicons name="heart" size={20} color={Colors.error} />
         </View>
         <Text style={styles.headerTitle}>Vous n'êtes pas seul(e)</Text>
         <Text style={styles.headerSubtitle}>
@@ -79,7 +79,7 @@ export default function UrgenceScreen() {
       {CONTACTS.map((c) => (
         <TouchableOpacity key={c.numero} style={styles.card} onPress={() => appeler(c.numero, c.nom)}>
           <View style={styles.cardIcon}>
-            <Ionicons name="call" size={22} color="#DC2626" />
+            <Ionicons name="call" size={22} color={Colors.error} />
           </View>
           <View style={styles.cardContent}>
             <Text style={styles.cardName}>{c.nom}</Text>
@@ -92,7 +92,7 @@ export default function UrgenceScreen() {
       ))}
 
       <View style={styles.warning}>
-        <Ionicons name="warning" size={18} color="#DC2626" />
+        <Ionicons name="warning" size={18} color={Colors.error} />
         <Text style={styles.warningText}>
           En cas d'urgence vitale, appelez immédiatement le <Text style={styles.bold}>15</Text> (SAMU) ou le <Text style={styles.bold}>112</Text>.
         </Text>
@@ -105,21 +105,21 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 16, paddingBottom: 32 },
   header: { marginBottom: 20, alignItems: 'flex-start' },
-  iconBadge: { width: 40, height: 40, borderRadius: 999, backgroundColor: '#FEE2E2', justifyContent: 'center', alignItems: 'center', marginBottom: 12 },
+  iconBadge: { width: 40, height: 40, borderRadius: 4, backgroundColor: Colors.errorBg, justifyContent: 'center', alignItems: 'center', marginBottom: 12 },
   headerTitle: { fontSize: 22, fontWeight: '800', color: Colors.black, marginBottom: 6 },
   headerSubtitle: { fontSize: 14, color: Colors.gray[500], lineHeight: 20 },
   card: {
     flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16,
-    backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  cardIcon: { width: 44, height: 44, borderRadius: 12, backgroundColor: '#FEE2E2', justifyContent: 'center', alignItems: 'center' },
+  cardIcon: { width: 44, height: 44, borderRadius: 4, backgroundColor: Colors.errorBg, justifyContent: 'center', alignItems: 'center' },
   cardContent: { flex: 1 },
   cardName: { fontSize: 14, fontWeight: '700', color: Colors.black, marginBottom: 2 },
-  cardNumber: { fontSize: 20, fontWeight: '800', color: '#DC2626', marginBottom: 6 },
+  cardNumber: { fontSize: 20, fontWeight: '800', color: Colors.error, marginBottom: 6 },
   cardDescription: { fontSize: 12, color: Colors.gray[500], lineHeight: 17 },
-  cardAvailability: { fontSize: 11, color: Colors.secondary, marginTop: 4, fontWeight: '600' },
+  cardAvailability: { fontSize: 11, color: Colors.primary, marginTop: 4, fontWeight: '600' },
-  warning: { marginTop: 8, padding: 14, borderRadius: 12, backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FECACA', flexDirection: 'row', gap: 10, alignItems: 'flex-start' },
+  warning: { marginTop: 8, padding: 14, borderRadius: 4, backgroundColor: Colors.errorBg, borderWidth: 1, borderColor: Colors.error, flexDirection: 'row', gap: 10, alignItems: 'flex-start' },
-  warningText: { flex: 1, fontSize: 13, color: '#B91C1C', lineHeight: 19 },
+  warningText: { flex: 1, fontSize: 13, color: Colors.error, lineHeight: 19 },
   bold: { fontWeight: '800' },
 });

mobile/app/_layout.tsx

@@ -33,7 +33,7 @@ function AuthGuard({ children }: { children: React.ReactNode }) {
   if (isLoading) {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
-        <ActivityIndicator size="large" color="#fce117" />
+        <ActivityIndicator size="large" color="#000091" />
       </View>
     );
   }

mobile/app/auth/forgot-password.tsx

@@ -30,7 +30,7 @@ export default function ForgotPasswordScreen() {
       <View style={styles.container}>
         <View style={styles.success}>
           <View style={styles.successIcon}>
-            <Ionicons name="mail-open" size={32} color={Colors.secondary} />
+            <Ionicons name="mail-open" size={32} color={Colors.primary} />
           </View>
           <Text style={styles.successTitle}>Demande enregistrée</Text>
           <Text style={styles.successText}>
@@ -95,17 +95,17 @@ const styles = StyleSheet.create({
   header: { alignItems: 'center', marginBottom: 32 },
   logo: { fontSize: 26, fontWeight: '800', color: Colors.black, textAlign: 'center' },
   subtitle: { fontSize: 14, color: Colors.gray[500], marginTop: 10, textAlign: 'center', lineHeight: 20 },
-  form: { backgroundColor: Colors.gray[50], borderRadius: 24, padding: 24 },
+  form: { backgroundColor: Colors.gray[50], borderRadius: 4, padding: 24, borderWidth: 1, borderColor: Colors.gray[200] },
   inputGroup: { marginBottom: 16 },
-  label: { fontSize: 14, fontWeight: '600', color: Colors.gray[700], marginBottom: 6 },
+  label: { fontSize: 14, fontWeight: '600', color: Colors.black, marginBottom: 6 },
-  input: { backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.gray[300], borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
+  input: { backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4, borderBottomWidth: 2, borderBottomColor: Colors.black, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
-  errorText: { color: '#DC2626', marginTop: 6, fontSize: 12 },
+  errorText: { color: Colors.error, marginTop: 6, fontSize: 12 },
-  button: { backgroundColor: Colors.primary, borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 8 },
+  button: { backgroundColor: Colors.primary, borderRadius: 4, paddingVertical: 16, alignItems: 'center', marginTop: 8 },
-  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.black },
+  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.white },
   footer: { alignItems: 'center', marginTop: 20 },
-  link: { color: Colors.secondary, fontSize: 14, fontWeight: '600' },
+  link: { color: Colors.primary, fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
   success: { padding: 24, alignItems: 'center', flex: 1, justifyContent: 'center' },
-  successIcon: { width: 72, height: 72, borderRadius: 999, backgroundColor: `${Colors.secondary}15`, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
+  successIcon: { width: 72, height: 72, borderRadius: 999, backgroundColor: `${Colors.primary}15`, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
   successTitle: { fontSize: 22, fontWeight: '800', color: Colors.black, marginBottom: 12 },
   successText: { fontSize: 14, color: Colors.gray[600], textAlign: 'center', lineHeight: 20, marginBottom: 12 },
   bold: { fontWeight: '700', color: Colors.black },

mobile/app/auth/login.tsx

@@ -4,6 +4,7 @@ import { Link, useRouter } from 'expo-router';
 import { useAuthStore } from '@/lib/auth-store';
 import { getApiError } from '@/lib/api';
 import { Colors } from '@/lib/colors';
+import RepubliqueHeader from '@/components/RepubliqueHeader';
 
 export default function LoginScreen() {
   const router = useRouter();
@@ -30,6 +31,7 @@ export default function LoginScreen() {
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <RepubliqueHeader />
       <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
         <View style={styles.header}>
           <Text style={styles.logo}>CESIZen</Text>
@@ -95,17 +97,18 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   scrollContent: { flexGrow: 1, justifyContent: 'center', padding: 24 },
   header: { alignItems: 'center', marginBottom: 40 },
-  logo: { fontSize: 36, fontWeight: '800', color: Colors.black },
+  logo: { fontSize: 36, fontWeight: '800', color: Colors.primary },
   subtitle: { fontSize: 16, color: Colors.gray[500], marginTop: 8 },
-  form: { backgroundColor: Colors.gray[50], borderRadius: 24, padding: 24 },
+  form: { backgroundColor: Colors.gray[50], borderRadius: 4, padding: 24, borderWidth: 1, borderColor: Colors.gray[200] },
   title: { fontSize: 24, fontWeight: '700', color: Colors.black, marginBottom: 24 },
   inputGroup: { marginBottom: 16 },
-  label: { fontSize: 14, fontWeight: '600', color: Colors.gray[700], marginBottom: 6 },
+  label: { fontSize: 14, fontWeight: '600', color: Colors.black, marginBottom: 6 },
   input: {
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.gray[100],
-    borderWidth: 1,
+    borderTopLeftRadius: 4,
-    borderColor: Colors.gray[300],
+    borderTopRightRadius: 4,
-    borderRadius: 12,
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.black,
     paddingHorizontal: 16,
     paddingVertical: 14,
     fontSize: 16,
@@ -113,15 +116,15 @@ const styles = StyleSheet.create({
   },
   button: {
     backgroundColor: Colors.primary,
-    borderRadius: 12,
+    borderRadius: 4,
     paddingVertical: 16,
     alignItems: 'center',
     marginTop: 8,
   },
   buttonDisabled: { opacity: 0.6 },
-  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.black },
+  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.white },
   forgotLink: { alignItems: 'center', marginTop: 12 },
   footer: { flexDirection: 'row', justifyContent: 'center', marginTop: 16 },
   footerText: { color: Colors.gray[500], fontSize: 14 },
-  link: { color: Colors.secondary, fontSize: 14, fontWeight: '600' },
+  link: { color: Colors.primary, fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
 });

mobile/app/auth/register.tsx

@@ -5,6 +5,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { useAuthStore } from '@/lib/auth-store';
 import { getApiError } from '@/lib/api';
 import { Colors } from '@/lib/colors';
+import RepubliqueHeader from '@/components/RepubliqueHeader';
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
@@ -61,6 +62,7 @@ export default function RegisterScreen() {
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <RepubliqueHeader />
       <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
         <View style={styles.header}>
           <Text style={styles.logo}>CESIZen</Text>
@@ -132,24 +134,24 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   scrollContent: { flexGrow: 1, justifyContent: 'center', padding: 24 },
   header: { alignItems: 'center', marginBottom: 32 },
-  logo: { fontSize: 36, fontWeight: '800', color: Colors.black },
+  logo: { fontSize: 36, fontWeight: '800', color: Colors.primary },
   subtitle: { fontSize: 16, color: Colors.gray[500], marginTop: 8 },
-  form: { backgroundColor: Colors.gray[50], borderRadius: 24, padding: 24 },
+  form: { backgroundColor: Colors.gray[50], borderRadius: 4, padding: 24, borderWidth: 1, borderColor: Colors.gray[200] },
   title: { fontSize: 24, fontWeight: '700', color: Colors.black, marginBottom: 24 },
   row: { flexDirection: 'row' },
   inputGroup: { marginBottom: 16 },
-  label: { fontSize: 14, fontWeight: '600', color: Colors.gray[700], marginBottom: 6 },
+  label: { fontSize: 14, fontWeight: '600', color: Colors.black, marginBottom: 6 },
-  input: { backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.gray[300], borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
+  input: { backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4, borderBottomWidth: 2, borderBottomColor: Colors.black, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
-  errorText: { color: '#DC2626', marginTop: 4, fontSize: 12 },
+  errorText: { color: Colors.error, marginTop: 4, fontSize: 12 },
   consentRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10, marginVertical: 12 },
-  checkbox: { width: 22, height: 22, borderRadius: 6, borderWidth: 2, borderColor: Colors.gray[300], backgroundColor: Colors.white, justifyContent: 'center', alignItems: 'center', marginTop: 1 },
+  checkbox: { width: 22, height: 22, borderRadius: 4, borderWidth: 2, borderColor: Colors.black, backgroundColor: Colors.white, justifyContent: 'center', alignItems: 'center', marginTop: 1 },
-  checkboxChecked: { backgroundColor: Colors.secondary, borderColor: Colors.secondary },
+  checkboxChecked: { backgroundColor: Colors.primary, borderColor: Colors.primary },
-  consentText: { flex: 1, fontSize: 13, color: Colors.gray[700], lineHeight: 18 },
+  consentText: { flex: 1, fontSize: 13, color: Colors.black, lineHeight: 18 },
-  consentLink: { color: Colors.secondary, fontWeight: '600' },
+  consentLink: { color: Colors.primary, fontWeight: '600', textDecorationLine: 'underline' },
-  button: { backgroundColor: Colors.primary, borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 12 },
+  button: { backgroundColor: Colors.primary, borderRadius: 4, paddingVertical: 16, alignItems: 'center', marginTop: 12 },
   buttonDisabled: { opacity: 0.6 },
-  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.black },
+  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.white },
   footer: { flexDirection: 'row', justifyContent: 'center', marginTop: 20 },
   footerText: { color: Colors.gray[500], fontSize: 14 },
-  link: { color: Colors.secondary, fontSize: 14, fontWeight: '600' },
+  link: { color: Colors.primary, fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
 });

mobile/components/EmotionPicker.tsx

@@ -87,13 +87,13 @@ export default function EmotionPicker({ value, onChange }: EmotionPickerProps) {
 const styles = StyleSheet.create({
   loading: { padding: 40, alignItems: 'center' },
   backBtn: { marginBottom: 12 },
-  backText: { fontSize: 14, color: Colors.gray[500] },
+  backText: { fontSize: 14, color: Colors.primary, textDecorationLine: 'underline' },
   subTitle: { fontSize: 14, color: Colors.gray[600], marginBottom: 12 },
   grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
   emotionCard: {
     width: '30%',
-    backgroundColor: Colors.gray[50],
+    backgroundColor: Colors.white,
-    borderRadius: 16,
+    borderRadius: 4,
     padding: 14,
     alignItems: 'center',
     gap: 6,
@@ -101,6 +101,6 @@ const styles = StyleSheet.create({
     borderColor: Colors.gray[200],
   },
   emotionEmoji: { fontSize: 30 },
-  emotionName: { fontSize: 12, fontWeight: '600', color: Colors.gray[700], textAlign: 'center' },
+  emotionName: { fontSize: 12, fontWeight: '600', color: Colors.black, textAlign: 'center' },
   arrow: { fontSize: 10, color: Colors.gray[400] },
 });

mobile/components/RepubliqueHeader.tsx

@@ -0,0 +1,52 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors } from '@/lib/colors';
+
+interface RepubliqueHeaderProps {
+  /** Affiche le nom du service (CESIZen) à côté du bloc Marianne. */
+  showService?: boolean;
+}
+
+/**
+ * En-tête institutionnel reprenant l'identité visuelle de l'État (DSFR) :
+ * bloc « RÉPUBLIQUE / FRANÇAISE » accompagné du nom du service.
+ */
+export default function RepubliqueHeader({ showService = true }: RepubliqueHeaderProps) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.marianneBlock}>
+        <Text style={styles.republique}>RÉPUBLIQUE</Text>
+        <Text style={styles.francaise}>FRANÇAISE</Text>
+        <Text style={styles.devise}>Liberté{'\n'}Égalité{'\n'}Fraternité</Text>
+      </View>
+      {showService && (
+        <View style={styles.serviceBlock}>
+          <Text style={styles.serviceName}>CESIZen</Text>
+          <Text style={styles.serviceTagline}>Santé mentale</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: Colors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.gray[200],
+  },
+  marianneBlock: {
+    paddingRight: 16,
+    borderRightWidth: 1,
+    borderRightColor: Colors.gray[200],
+  },
+  republique: { fontSize: 12, fontWeight: '700', color: Colors.black, letterSpacing: 0.5, lineHeight: 14 },
+  francaise: { fontSize: 12, fontWeight: '700', color: Colors.black, letterSpacing: 0.5, lineHeight: 14 },
+  devise: { fontSize: 8, color: Colors.gray[500], marginTop: 4, lineHeight: 10, fontStyle: 'italic' },
+  serviceBlock: { paddingLeft: 16 },
+  serviceName: { fontSize: 18, fontWeight: '800', color: Colors.primary },
+  serviceTagline: { fontSize: 11, color: Colors.gray[500], marginTop: 1 },
+});

mobile/lib/colors.ts

@@ -1,22 +1,38 @@
+// Palette inspirée du Système de Design de l'État (DSFR / gouv.fr).
+// Le DSFR est un framework web (HTML/CSS) ; ici on en applique uniquement
+// l'identité visuelle via les couleurs des StyleSheet React Native.
 export const Colors = {
-  primary: '#fce117',
+  // Bleu France — couleur primaire / actions
-  primaryDark: '#e5cc15',
+  primary: '#000091',
-  secondary: '#06c656',
+  primaryDark: '#1212FF', // bleu survol / accent
-  secondaryDark: '#05a348',
+  blueFranceSun: '#6A6AF4',
-  black: '#000000',
+  // Rouge Marianne — accent institutionnel / alertes
+  secondary: '#000091', // conservé en bleu pour les accents secondaires institutionnels
+  secondaryDark: '#1212FF',
+  rougeMarianne: '#E1000F',
+  black: '#161616', // texte principal DSFR
   white: '#FFFFFF',
+  // Échelle de gris DSFR (du plus clair au plus foncé)
   gray: {
-    50: '#f9fafb',
+    50: '#F6F6F6', // fond alternatif
-    100: '#f3f4f6',
+    100: '#EEEEEE', // gris contrasté
-    200: '#e5e7eb',
+    200: '#DDDDDD', // séparateurs / bordures
-    300: '#d1d5db',
+    300: '#CECECE',
-    400: '#9ca3af',
+    400: '#929292', // texte désactivé
-    500: '#6b7280',
+    500: '#666666', // texte secondaire / mention
-    600: '#4b5563',
+    600: '#3A3A3A',
-    700: '#374151',
+    700: '#2A2A2A',
-    800: '#1f2937',
+    800: '#1F1F1F',
-    900: '#111827',
+    900: '#161616',
   },
+  // États DSFR
+  success: '#18753C',
+  successBg: '#B8FEC9',
+  error: '#CE0500',
+  errorBg: '#FFE9E9',
+  info: '#0063CB',
+  warning: '#B34000',
+  // Couleurs par émotion — issues du référentiel, conservées telles quelles
   emotions: {
     joie: '#FFD700',
     colere: '#DC143C',