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>
2026-06-18 23:45:05 +02:00
parent 69c40bd628
commit ca88bf7737
16 changed files with 218 additions and 138 deletions
@@ -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 },
+});