From 93ba11905f7a4cfe569ccedf0b72352bdec669bb Mon Sep 17 00:00:00 2001
From: pironantoine <57062554-pironantoine@users.noreply.replit.com>
Date: Sat, 4 Apr 2026 06:45:39 +0000
Subject: [PATCH] Update site fonts and add a French flag to the navigation bar

Update CSS to use Bahnschrift for titles and a sans-serif font for body text, and add a French flag SVG to the navbar.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9aecc46b-faee-4e4a-962f-a8c239b6152b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/g9Obdb0
Replit-Helium-Checkpoint-Created: true
---
 artifacts/voix-du-peuple/src/App.tsx         | 12 ++++++++++++
 artifacts/voix-du-peuple/src/index.css       |  4 ++--
 artifacts/voix-du-peuple/src/pages/about.tsx | 16 ++++++++--------
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/artifacts/voix-du-peuple/src/App.tsx b/artifacts/voix-du-peuple/src/App.tsx
index 31f5067..f0125e0 100644
--- a/artifacts/voix-du-peuple/src/App.tsx
+++ b/artifacts/voix-du-peuple/src/App.tsx
@@ -28,6 +28,18 @@ function Navbar() {
           <Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-about-link">À propos</Link>
           <Link href="/transparence" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-transparence-link">Fonctionnement</Link>
         </nav>
+        <div className="ml-auto flex items-center">
+          <span
+            title="République française"
+            aria-label="Drapeau français"
+            className="inline-flex overflow-hidden rounded-sm opacity-70"
+            style={{ width: 22, height: 15, boxShadow: "0 0 0 1px rgba(0,0,0,0.12)" }}
+          >
+            <span style={{ flex: 1, background: "#002395" }} />
+            <span style={{ flex: 1, background: "#EDEDED" }} />
+            <span style={{ flex: 1, background: "#ED2939" }} />
+          </span>
+        </div>
       </div>
     </header>
   );
diff --git a/artifacts/voix-du-peuple/src/index.css b/artifacts/voix-du-peuple/src/index.css
index d322b98..e8ef3d4 100644
--- a/artifacts/voix-du-peuple/src/index.css
+++ b/artifacts/voix-du-peuple/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 @import "tailwindcss";
 @import "tw-animate-css";
 @plugin "@tailwindcss/typography";
@@ -128,7 +128,7 @@
   --chart-5: 25 70% 45%;
 
   --app-font-sans: 'Inter', sans-serif;
-  --app-font-serif: 'Fraunces', Georgia, serif;
+  --app-font-serif: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', ui-sans-serif, sans-serif;
   --app-font-mono: 'JetBrains Mono', monospace;
   --radius: 0rem; /* Sharp edges for revolutionary feel */
   
diff --git a/artifacts/voix-du-peuple/src/pages/about.tsx b/artifacts/voix-du-peuple/src/pages/about.tsx
index 10f501c..113f858 100644
--- a/artifacts/voix-du-peuple/src/pages/about.tsx
+++ b/artifacts/voix-du-peuple/src/pages/about.tsx
@@ -97,7 +97,7 @@ export default function About() {
           <h1 className="text-4xl md:text-5xl font-serif font-bold text-primary">
             À propos
           </h1>
-          <p className="text-xl font-serif text-muted-foreground leading-relaxed">
+          <p className="text-xl text-muted-foreground leading-relaxed">
             Un outil simple pour recueillir les propositions citoyennes, les synthétiser et les rendre lisibles par les élus qui nous représentent.
           </p>
         </header>
@@ -108,7 +108,7 @@ export default function About() {
               <BookOpen className="h-6 w-6 text-primary" />
               <h2>Le concept</h2>
             </div>
-            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
+            <p className="leading-relaxed text-foreground/90 text-base">
               Cette plateforme permet à tout citoyen de soumettre une proposition, une demande ou une préoccupation. Ces contributions sont agrégées et synthétisées automatiquement pour produire un résumé clair, directement utilisable par des représentants politiques, des associations ou des collectivités.
             </p>
           </section>
@@ -118,14 +118,14 @@ export default function About() {
               <Shield className="h-6 w-6 text-primary" />
               <h2>Le filtre démocratique</h2>
             </div>
-            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
+            <p className="leading-relaxed text-foreground/90 text-base">
               Pour maintenir un espace de dialogue constructif, chaque contribution est évaluée automatiquement par un agent d'intelligence artificielle. Les contenus contraires aux droits fondamentaux reconnus par le droit international ne sont pas intégrés à la synthèse.
             </p>
             <div className="bg-muted/30 p-6 rounded-none border-l-4 border-primary">
               <h3 className="font-bold font-mono uppercase tracking-widest text-sm mb-3">
                 Valeurs protégées
               </h3>
-              <ul className="space-y-2 font-serif list-disc pl-5">
+              <ul className="space-y-2 list-disc pl-5">
                 <li>La dignité humaine universelle et inviolable</li>
                 <li>L'égalité et la non-discrimination</li>
                 <li>La liberté d'expression dans le respect des droits d'autrui</li>
@@ -133,7 +133,7 @@ export default function About() {
                 <li>L'attachement aux processus démocratiques et pacifiques</li>
               </ul>
             </div>
-            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
+            <p className="leading-relaxed text-foreground/90 text-base">
               Lorsqu'une contribution n'est pas retenue, l'auteur en est informé sans que sa contribution ne soit rendue publique.
             </p>
           </section>
@@ -143,7 +143,7 @@ export default function About() {
               <Brain className="h-6 w-6 text-primary" />
               <h2>La synthèse</h2>
             </div>
-            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
+            <p className="leading-relaxed text-foreground/90 text-base">
               Dès qu'une contribution est intégrée, un second agent relit l'ensemble des propositions reçues et produit un résumé structuré par thèmes. Ce document, mis à jour en temps réel, est conçu pour être directement transmis à des élus, des services publics ou toute instance décisionnelle.
             </p>
           </section>
@@ -153,7 +153,7 @@ export default function About() {
               <Scale className="h-6 w-6 text-primary" />
               <h2>Fondements juridiques</h2>
             </div>
-            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
+            <p className="leading-relaxed text-foreground/90 text-base">
               La modération s'appuie sur les textes internationaux suivants. Les articles cités fondent les critères d'acceptation et de refus des contributions.
             </p>
 
@@ -185,7 +185,7 @@ export default function About() {
                     {source.articles.map((art) => (
                       <div key={art.num} className="border-l-2 border-primary/30 pl-4">
                         <p className="text-xs font-mono font-bold text-primary/80 mb-1">{art.num}</p>
-                        <p className="font-serif text-sm text-foreground/80 leading-relaxed italic">
+                        <p className="text-sm text-foreground/80 leading-relaxed italic">
                           «&nbsp;{art.texte}&nbsp;»
                         </p>
                       </div>