Update website colors and add disclaimers about expression

Modify CSS variables for a politically neutral color palette and inject disclaimer text across multiple pages to clarify that the platform captures citizen expression rather than established truth.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a6455e51-215a-43d1-a452-a445436b0317
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/UL3T8eF
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
pironantoine
2026-04-04 11:32:08 +00:00
parent f72a64f23e
commit a3d06f6c53
5 changed files with 79 additions and 44 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 127 KiB

+27 -27
View File
@@ -77,55 +77,55 @@
--elevate-1: rgba(0,0,0, .03); --elevate-1: rgba(0,0,0, .03);
--elevate-2: rgba(0,0,0, .08); --elevate-2: rgba(0,0,0, .08);
/* Deep paper/parchment tone */ /* Warm parchment tone */
--background: 40 20% 96%; --background: 40 15% 96%;
--foreground: 220 30% 12%; --foreground: 200 20% 14%;
--border: 40 10% 85%; --border: 40 10% 85%;
--input: 40 10% 85%; --input: 40 10% 85%;
--ring: 220 80% 25%; --ring: 185 42% 28%;
/* White-ish cards with slight warmth */ /* White-ish cards with slight warmth */
--card: 40 20% 99%; --card: 40 20% 99%;
--card-foreground: 220 30% 12%; --card-foreground: 200 20% 14%;
--card-border: 40 15% 90%; --card-border: 40 15% 90%;
--popover: 40 20% 99%; --popover: 40 20% 99%;
--popover-foreground: 220 30% 12%; --popover-foreground: 200 20% 14%;
--popover-border: 40 15% 90%; --popover-border: 40 15% 90%;
/* Deep French Blue */ /* Deep petrol — neutre, sans connotation partisane */
--primary: 220 80% 25%; --primary: 185 42% 28%;
--primary-foreground: 0 0% 100%; --primary-foreground: 0 0% 100%;
/* Warm paper accent */ /* Warm paper accent */
--secondary: 40 25% 90%; --secondary: 40 20% 90%;
--secondary-foreground: 220 80% 25%; --secondary-foreground: 185 42% 28%;
--muted: 40 15% 92%; --muted: 40 12% 92%;
--muted-foreground: 220 15% 45%; --muted-foreground: 200 12% 45%;
--accent: 40 25% 90%; --accent: 40 20% 90%;
--accent-foreground: 220 80% 25%; --accent-foreground: 185 42% 28%;
/* Warm French Red */ /* Warm amber-red (alertes uniquement) */
--destructive: 350 70% 40%; --destructive: 12 65% 40%;
--destructive-foreground: 0 0% 100%; --destructive-foreground: 0 0% 100%;
--sidebar: 40 20% 96%; --sidebar: 40 15% 96%;
--sidebar-foreground: 220 30% 12%; --sidebar-foreground: 200 20% 14%;
--sidebar-border: 40 10% 85%; --sidebar-border: 40 10% 85%;
--sidebar-primary: 220 80% 25%; --sidebar-primary: 185 42% 28%;
--sidebar-primary-foreground: 0 0% 100%; --sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 40 25% 90%; --sidebar-accent: 40 20% 90%;
--sidebar-accent-foreground: 220 80% 25%; --sidebar-accent-foreground: 185 42% 28%;
--sidebar-ring: 220 80% 25%; --sidebar-ring: 185 42% 28%;
--chart-1: 220 80% 25%; --chart-1: 185 42% 28%;
--chart-2: 350 70% 40%; --chart-2: 30 65% 42%;
--chart-3: 40 15% 40%; --chart-3: 155 30% 38%;
--chart-4: 200 40% 40%; --chart-4: 210 25% 45%;
--chart-5: 25 70% 45%; --chart-5: 50 55% 42%;
--app-font-sans: 'Inter', sans-serif; --app-font-sans: 'Inter', sans-serif;
--app-font-serif: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', ui-sans-serif, sans-serif; --app-font-serif: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', ui-sans-serif, sans-serif;
+19 -1
View File
@@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { Link } from "wouter"; import { Link } from "wouter";
import { ArrowLeft, Shield, Brain, BookOpen, Scale, ExternalLink } from "lucide-react"; import { ArrowLeft, Shield, Brain, BookOpen, Scale, ExternalLink, MessageSquare } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
const TEXTES_SOURCES = [ const TEXTES_SOURCES = [
@@ -113,6 +113,24 @@ export default function About() {
</p> </p>
</section> </section>
<section className="space-y-4">
<div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2">
<MessageSquare className="h-6 w-6 text-primary" />
<h2>Expression, pas vérité</h2>
</div>
<p className="leading-relaxed text-foreground/90 text-base">
Cette plateforme est conçue pour ouvrir un espace d'expression pas pour produire des consensus scientifiques ou établir des faits. Ce que vous lisez dans la synthèse reflète ce que des citoyens ont choisi d'exprimer : leurs préoccupations, leurs attentes, leurs désaccords.
</p>
<div className="bg-muted/30 p-6 border-l-4 border-primary/40 space-y-3">
<p className="text-sm leading-relaxed text-foreground/80">
Les propositions ne sont ni expertisées, ni validées politiquement, ni représentatives d'une majorité. Leur intérêt réside dans leur existence même : des personnes ont pris le temps de s'exprimer sur ce qui leur tient à cœur.
</p>
<p className="text-sm leading-relaxed text-foreground/80">
La démarche est portée par un auteur personnellement attaché à l'expertise, à la rigueur et au fait vérifié. Cette plateforme n'est pas un substitut à la délibération éclairée — c'est un outil d'écoute et de traduction de la parole citoyenne brute.
</p>
</div>
</section>
<section className="space-y-4"> <section className="space-y-4">
<div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2"> <div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2">
<Shield className="h-6 w-6 text-primary" /> <Shield className="h-6 w-6 text-primary" />
+22 -14
View File
@@ -184,8 +184,9 @@ export default function Home() {
{/* Bandeau d'introduction */} {/* Bandeau d'introduction */}
<div className="border-b border-border/40 bg-muted/30 px-6 md:px-10 py-5"> <div className="border-b border-border/40 bg-muted/30 px-6 md:px-10 py-5">
<p className="text-sm text-foreground/75 max-w-3xl leading-relaxed"> <p className="text-sm text-foreground/75 max-w-3xl leading-relaxed">
<span className="font-semibold text-foreground">La Voix du Peuple</span> recueille vos propositions et les synthétise en un résumé clair, destiné à être transmis à vos élus. <span className="font-semibold text-foreground">La Voix du Peuple</span> est un espace d'expression citoyenne, pas un sondage ni une vérité établie.
Exprimez-vous librement chaque contribution est modérée selon le droit international des droits humains, puis intégrée au résumé collectif affiché à droite. Exprimez-vous librement — chaque contribution est modérée selon le droit international des droits humains, puis reflétée dans la synthèse collective affichée à droite.
<span className="text-foreground/55 ml-1">Ce que vous lisez représente ce que des personnes ont choisi d'exprimer, pas un consensus validé.</span>
</p> </p>
</div> </div>
@@ -440,19 +441,26 @@ export default function Home() {
{/* Pied de page fixe */} {/* Pied de page fixe */}
{synthesis?.updatedAt && ( {synthesis?.updatedAt && (
<div <>
className="flex justify-between items-center px-6 md:px-10 py-3 border-t border-border/30 text-xs font-mono text-muted-foreground relative z-10 flex-shrink-0" <div
data-testid="text-synthesis-meta" className="flex justify-between items-center px-6 md:px-10 py-3 border-t border-border/30 text-xs font-mono text-muted-foreground relative z-10 flex-shrink-0"
> data-testid="text-synthesis-meta"
<span>Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}</span> >
<span className="flex items-center gap-1.5"> <span>Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}</span>
<span className="relative flex h-1.5 w-1.5"> <span className="flex items-center gap-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" /> <span className="relative flex h-1.5 w-1.5">
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" /> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
</span>
{format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })}
</span> </span>
{format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })} </div>
</span> <div className="px-6 md:px-10 py-2 border-t border-border/20 relative z-10 flex-shrink-0">
</div> <p className="text-[10px] text-muted-foreground/60 italic leading-relaxed">
Ce document reflète des expressions citoyennes, pas des faits vérifiés ni un consensus officiel. La démarche est portée par un auteur attaché à l'expertise et au dialogue fondé sur les preuves.
</p>
</div>
</>
)} )}
</div> </div>
</div> </div>
@@ -232,6 +232,15 @@ export default function Transparence() {
<AlertTriangle className="h-5 w-5 text-primary" /> <AlertTriangle className="h-5 w-5 text-primary" />
<h2>Limites du système</h2> <h2>Limites du système</h2>
</div> </div>
<div className="bg-muted/30 border-l-4 border-primary/40 p-5 space-y-2">
<p className="font-semibold text-sm">Ce que cette plateforme n'est pas</p>
<p className="text-sm leading-relaxed text-foreground/80">
La synthèse n'est pas un document factuel. Elle reflète fidèlement ce qui a é exprimé ni plus ni moins. Les propositions ne sont pas vérifiées, expertisées ni validées politiquement. Cette plateforme capture des expressions citoyennes, pas des vérités établies.
</p>
<p className="text-sm leading-relaxed text-foreground/80">
L'auteur de la démarche reste personnellement attaché à l'expertise et au dialogue fondé sur les preuves. Ce projet n'a pas vocation à substituer la parole collective au jugement éclairé, mais à rendre cette parole lisible et transmissible.
</p>
</div>
<div className="space-y-4"> <div className="space-y-4">
{[ {[
{ {
@@ -247,8 +256,8 @@ export default function Transparence() {
desc: "Il n'existe pas encore de mécanisme de contestation d'un refus. Si cette plateforme est déployée dans un cadre institutionnel, il est recommandé d'ajouter un contact humain de recours.", desc: "Il n'existe pas encore de mécanisme de contestation d'un refus. Si cette plateforme est déployée dans un cadre institutionnel, il est recommandé d'ajouter un contact humain de recours.",
}, },
{ {
titre: "Dépendance à OpenAI", titre: "Dépendance à l'API IA",
desc: "Le filtrage et la synthèse dépendent de l'API OpenAI. En cas d'indisponibilité, les soumissions sont refusées par précaution et le service affiche un message d'erreur.", desc: "Le filtrage et la synthèse dépendent de l'API Mistral (ou OpenAI en alternative). En cas d'indisponibilité, les soumissions sont refusées par précaution et le service affiche un message d'erreur.",
}, },
].map((item) => ( ].map((item) => (
<div key={item.titre} className="border-l-4 border-amber-400/60 pl-4 space-y-1"> <div key={item.titre} className="border-l-4 border-amber-400/60 pl-4 space-y-1">