From aa859a1e4489031fc3aa289c8d76063a331eec3f Mon Sep 17 00:00:00 2001
From: Yannick Le Duc <y@le-duc.com>
Date: Wed, 27 Aug 2025 12:21:09 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20param=C3=A8tre=20message=20bas=20de=20p?=
 =?UTF-8?q?age=20personnalisable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../campaigns/[id]/propositions/page.tsx      |   3 +-
 src/app/admin/page.tsx                        |   3 +-
 src/app/admin/settings/page.tsx               |  70 +++++-
 src/app/campaigns/[id]/propose/page.tsx       | 119 ++++++----
 .../[id]/vote/[participantId]/page.tsx        |  16 +-
 src/app/globals.css                           |  32 ++-
 src/app/page.tsx                              |   7 +-
 src/components/AddPropositionModal.tsx        |   2 +-
 src/components/DeleteCampaignModal.tsx        |   3 +-
 src/components/EditPropositionModal.tsx       |   2 +-
 src/components/Footer.tsx                     | 100 ++++++++
 src/components/MarkdownEditor.tsx             | 159 +++++++------
 src/lib/markdown.ts                           | 224 ++++++++++++++----
 src/lib/services.ts                           |   8 +
 src/lib/utils.ts                              |  39 +++
 15 files changed, 580 insertions(+), 207 deletions(-)
 create mode 100644 src/components/Footer.tsx

diff --git a/src/app/admin/campaigns/[id]/propositions/page.tsx b/src/app/admin/campaigns/[id]/propositions/page.tsx
index a1d5187..b50bb90 100644
--- a/src/app/admin/campaigns/[id]/propositions/page.tsx
+++ b/src/app/admin/campaigns/[id]/propositions/page.tsx
@@ -15,6 +15,7 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import Navigation from '@/components/Navigation';
 import AuthGuard from '@/components/AuthGuard';
 import { FileText, Calendar, Mail, Upload } from 'lucide-react';
+import { MarkdownContent } from '@/components/MarkdownContent';
 
 export const dynamic = 'force-dynamic';
 
@@ -196,7 +197,7 @@ function CampaignPropositionsPageContent() {
                     <div className="flex-1">
                       <CardTitle className="text-xl mb-2">{proposition.title}</CardTitle>
                       <CardDescription className="text-base">
-                        {proposition.description}
+                        <MarkdownContent content={proposition.description} />
                       </CardDescription>
                     </div>
                     <div className="flex flex-col sm:flex-row gap-2">
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 361d89d..fab97fd 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -15,6 +15,7 @@ import { Badge } from '@/components/ui/badge';
 import AuthGuard from '@/components/AuthGuard';
 import { FolderOpen, Users, FileText, Plus, BarChart3, Settings, Check, Copy } from 'lucide-react';
 import StatusSwitch from '@/components/StatusSwitch';
+import { MarkdownContent } from '@/components/MarkdownContent';
 
 export const dynamic = 'force-dynamic';
 
@@ -255,7 +256,7 @@ function AdminPageContent() {
                               </CardTitle>
                             </div>
                             <CardDescription className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
-                              {campaign.description}
+                              <MarkdownContent content={campaign.description} />
                             </CardDescription>
                             
                             {/* Status Switch */}
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 8094ed3..6cfed4d 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -9,7 +9,7 @@ import { Label } from '@/components/ui/label';
 import Navigation from '@/components/Navigation';
 import AuthGuard from '@/components/AuthGuard';
 import SmtpSettingsForm from '@/components/SmtpSettingsForm';
-import { Settings, Monitor, Save, CheckCircle, Mail } from 'lucide-react';
+import { Settings, Monitor, Save, CheckCircle, Mail, FileText } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
 
@@ -19,6 +19,8 @@ function SettingsPageContent() {
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
   const [randomizePropositions, setRandomizePropositions] = useState(false);
+  const [proposePageMessage, setProposePageMessage] = useState('');
+  const [footerMessage, setFooterMessage] = useState('');
 
   useEffect(() => {
     loadSettings();
@@ -33,6 +35,14 @@ function SettingsPageContent() {
       // Charger la valeur du paramètre d'ordre aléatoire
       const randomizeValue = await settingsService.getBooleanValue('randomize_propositions', false);
       setRandomizePropositions(randomizeValue);
+      
+      // Charger le message de la page de dépôt de propositions
+      const messageValue = await settingsService.getStringValue('propose_page_message', 'Partagez votre vision et proposez des projets qui feront la différence dans votre collectif. Votre voix compte pour façonner l\'avenir de votre communauté.');
+      setProposePageMessage(messageValue);
+      
+      // Charger le message du bas de page
+      const footerValue = await settingsService.getStringValue('footer_message', 'Développé avec ❤️ pour faciliter la démocratie participative - [Logiciel libre et open source](GITURL) et transparent pour tous');
+      setFooterMessage(footerValue);
     } catch (error) {
       console.error('Erreur lors du chargement des paramètres:', error);
     } finally {
@@ -48,6 +58,8 @@ function SettingsPageContent() {
     try {
       setSaving(true);
       await settingsService.setBooleanValue('randomize_propositions', randomizePropositions);
+      await settingsService.setStringValue('propose_page_message', proposePageMessage);
+      await settingsService.setStringValue('footer_message', footerMessage);
       setSaved(true);
       setTimeout(() => setSaved(false), 2000);
     } catch (error) {
@@ -148,6 +160,62 @@ function SettingsPageContent() {
             </CardContent>
           </Card>
 
+          {/* Textes Category */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
+                  <FileText className="w-5 h-5 text-green-600 dark:text-green-300" />
+                </div>
+                <div>
+                  <CardTitle className="text-xl">Textes</CardTitle>
+                  <CardDescription>
+                    Personnalisez les textes affichés dans l'application
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Propose Page Message Setting */}
+              <div className="space-y-4">
+                <div>
+                  <Label htmlFor="propose-page-message" className="text-base font-medium">
+                    Message d'invitation - Page de dépôt de propositions
+                  </Label>
+                  <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
+                    Ce texte apparaît sous le titre de la campagne pour inviter les utilisateurs à déposer des propositions.
+                  </p>
+                </div>
+                <textarea
+                  id="propose-page-message"
+                  value={proposePageMessage}
+                  onChange={(e) => setProposePageMessage(e.target.value)}
+                  className="w-full min-h-[100px] p-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 resize-y"
+                  placeholder="Entrez votre message d'invitation..."
+                />
+              </div>
+
+              {/* Footer Message Setting */}
+              <div className="space-y-4">
+                <div>
+                  <Label htmlFor="footer-message" className="text-base font-medium">
+                    Message du bas de page
+                  </Label>
+                  <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
+                    Ce texte apparaît en bas des pages publiques. Vous pouvez utiliser <code className="bg-slate-100 dark:bg-slate-700 px-1 rounded text-xs">[texte du lien](GITURL)</code> pour insérer un lien vers le repository Git.
+                  </p>
+                </div>
+                                  <textarea
+                    id="footer-message"
+                    value={footerMessage}
+                    onChange={(e) => setFooterMessage(e.target.value)}
+                    className="w-full min-h-[80px] p-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 resize-y"
+                    placeholder="Entrez votre message de bas de page..."
+                  />
+              </div>
+            </CardContent>
+          </Card>
+
           {/* Email Category */}
           <SmtpSettingsForm onSave={() => {
             setSaved(true);
diff --git a/src/app/campaigns/[id]/propose/page.tsx b/src/app/campaigns/[id]/propose/page.tsx
index a006afd..b9930c2 100644
--- a/src/app/campaigns/[id]/propose/page.tsx
+++ b/src/app/campaigns/[id]/propose/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
 import Link from 'next/link';
 import { Campaign } from '@/types';
-import { campaignService, propositionService } from '@/lib/services';
+import { campaignService, propositionService, settingsService } from '@/lib/services';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -13,6 +13,7 @@ import { ArrowLeft, FileText, User, Mail, CheckCircle, AlertCircle } from 'lucid
 import { MarkdownContent } from '@/components/MarkdownContent';
 import { MarkdownEditor } from '@/components/MarkdownEditor';
 import { PROJECT_CONFIG } from '@/lib/project.config';
+import Footer from '@/components/Footer';
 
 export const dynamic = 'force-dynamic';
 
@@ -25,13 +26,16 @@ export default function PublicProposePage() {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
+  const [startTime] = useState(Date.now()); // Validation temporelle
+  const [proposePageMessage, setProposePageMessage] = useState('');
   
   const [formData, setFormData] = useState({
     title: '',
     description: '',
     author_first_name: '',
     author_last_name: '',
-    author_email: ''
+    author_email: '',
+    website: '' // Honeypot field
   });
 
   useEffect(() => {
@@ -43,8 +47,12 @@ export default function PublicProposePage() {
   const loadCampaign = async () => {
     try {
       setLoading(true);
-      const campaigns = await campaignService.getAll();
-      const campaignData = campaigns.find(c => c.id === campaignId);
+      const [campaigns, messageValue] = await Promise.all([
+        campaignService.getAll(),
+        settingsService.getStringValue('propose_page_message', 'Partagez votre vision et proposez des projets qui feront la différence dans votre collectif. Votre voix compte pour façonner l\'avenir de votre communauté.')
+      ]);
+      
+      const campaignData = campaigns.find((c: Campaign) => c.id === campaignId);
       
       if (!campaignData) {
         setError('Campagne non trouvée');
@@ -57,6 +65,7 @@ export default function PublicProposePage() {
       }
       
       setCampaign(campaignData);
+      setProposePageMessage(messageValue);
     } catch (error) {
       console.error('Erreur lors du chargement de la campagne:', error);
       setError('Erreur lors du chargement de la campagne');
@@ -70,6 +79,21 @@ export default function PublicProposePage() {
     setSubmitting(true);
     setError('');
 
+    // Validation temporelle - détecte les soumissions trop rapides
+    const timeSpent = Date.now() - startTime;
+    if (timeSpent < 5000) { // Moins de 5 secondes
+      setError('Veuillez prendre le temps de bien rédiger votre proposition');
+      setSubmitting(false);
+      return;
+    }
+
+    // Validation honeypot - détecte les bots
+    if (formData.website) {
+      setError('Soumission invalide');
+      setSubmitting(false);
+      return;
+    }
+
     try {
       await propositionService.create({
         campaign_id: campaignId,
@@ -86,7 +110,8 @@ export default function PublicProposePage() {
         description: '',
         author_first_name: '',
         author_last_name: '',
-        author_email: ''
+        author_email: '',
+        website: ''
       });
     } catch (err: any) {
       const errorMessage = err?.message || err?.details || 'Erreur lors de la soumission de la proposition';
@@ -172,44 +197,28 @@ export default function PublicProposePage() {
       <div className="container mx-auto px-4 py-8">
         {/* Header */}
         <div className="mb-8">
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <div>
-              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Déposer une proposition</h1>
-              <p className="text-slate-600 dark:text-slate-300 mt-2">
-                Campagne : <span className="font-medium">{campaign?.title}</span>
-              </p>
-            </div>
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+              {campaign?.title}
+            </h1>
+            <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
+              {proposePageMessage}
+            </p>
           </div>
         </div>
 
-        {/* Campaign Info */}
-        <Card className="mb-8">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FileText className="w-5 h-5" />
-              Informations sur la campagne
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div>
-                <h3 className="text-sm font-medium text-slate-600 dark:text-slate-300 mb-2">Description</h3>
-                <MarkdownContent 
-                  content={campaign?.description || ''} 
-                  className="text-slate-900 dark:text-slate-100"
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        {/* Campaign Description */}
+        <div className="mb-8 max-w-3xl mx-auto">
+          <MarkdownContent 
+            content={campaign?.description || ''} 
+            className="text-slate-700 dark:text-slate-300 text-base leading-relaxed"
+          />
+        </div>
 
         {/* Form */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Votre proposition</CardTitle>
-            <CardDescription>
-              Remplissez le formulaire ci-dessous pour soumettre votre proposition.
-            </CardDescription>
+        <Card className="max-w-3xl mx-auto">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl">Votre proposition</CardTitle>
           </CardHeader>
 
           <CardContent>
@@ -220,6 +229,25 @@ export default function PublicProposePage() {
                 </div>
               )}
 
+              {/* Honeypot field - caché pour détecter les bots */}
+              <input
+                type="text"
+                name="website"
+                value={formData.website}
+                onChange={handleChange}
+                style={{ 
+                  position: 'absolute', 
+                  left: '-9999px', 
+                  width: '1px', 
+                  height: '1px',
+                  opacity: 0,
+                  pointerEvents: 'none'
+                }}
+                tabIndex={-1}
+                autoComplete="off"
+                aria-hidden="true"
+              />
+
               <div className="space-y-2">
                 <label htmlFor="title" className="text-sm font-medium text-slate-700 dark:text-slate-300">
                   Titre de la proposition *
@@ -305,20 +333,7 @@ export default function PublicProposePage() {
         </Card>
 
         {/* Footer discret */}
-        <div className="text-center mt-16 pb-8">
-          <p className="text-slate-400 dark:text-slate-500 text-sm">
-            Développé avec ❤️ pour faciliter la démocratie participative -{' '}
-            <a 
-              href={PROJECT_CONFIG.repository.url} 
-              target="_blank" 
-              rel="noopener noreferrer"
-              className="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 underline"
-            >
-              Logiciel libre
-            </a>{' '}
-            et transparent pour tous
-          </p>
-        </div>
+        <Footer />
       </div>
     </div>
   );
diff --git a/src/app/campaigns/[id]/vote/[participantId]/page.tsx b/src/app/campaigns/[id]/vote/[participantId]/page.tsx
index 90ad768..a87c9f2 100644
--- a/src/app/campaigns/[id]/vote/[participantId]/page.tsx
+++ b/src/app/campaigns/[id]/vote/[participantId]/page.tsx
@@ -7,6 +7,7 @@ import { Campaign, Proposition, Participant, Vote, PropositionWithVote } from '@
 import { campaignService, participantService, propositionService, voteService, settingsService } from '@/lib/services';
 import { MarkdownContent } from '@/components/MarkdownContent';
 import { PROJECT_CONFIG } from '@/lib/project.config';
+import Footer from '@/components/Footer';
 
 // Force dynamic rendering to avoid SSR issues with Supabase
 export const dynamic = 'force-dynamic';
@@ -539,20 +540,7 @@ export default function PublicVotePage() {
         )}
 
         {/* Footer discret */}
-        <div className="text-center mt-16 pb-20">
-          <p className="text-gray-400 text-sm">
-            Développé avec ❤️ pour faciliter la démocratie participative -{' '}
-            <a 
-              href={PROJECT_CONFIG.repository.url} 
-              target="_blank" 
-              rel="noopener noreferrer"
-              className="text-gray-500 hover:text-gray-700 underline"
-            >
-              Logiciel libre
-            </a>{' '}
-            et transparent pour tous
-          </p>
-        </div>
+        <Footer />
       </div>
 
       {/* Barre fixe en bas */}
diff --git a/src/app/globals.css b/src/app/globals.css
index 7519226..20cc568 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -255,24 +255,24 @@
 .prose h1 {
   font-size: 1.5rem;
   font-weight: 700;
-  margin-bottom: 1rem;
-  margin-top: 1.5rem;
+  margin-bottom: 0;
+  margin-top: 0.75rem;
   color: hsl(222.2 84% 4.9%);
 }
 
 .prose h2 {
   font-size: 1.25rem;
   font-weight: 600;
-  margin-bottom: 0.75rem;
-  margin-top: 1.25rem;
+  margin-bottom: 0;
+  margin-top: 0.5rem;
   color: hsl(222.2 84% 4.9%);
 }
 
 .prose h3 {
   font-size: 1.125rem;
   font-weight: 500;
-  margin-bottom: 0.5rem;
-  margin-top: 1rem;
+  margin-bottom: 0;
+  margin-top: 0.375rem;
   color: hsl(222.2 84% 4.9%);
 }
 
@@ -280,22 +280,22 @@
 .vote-page .prose h1 {
   font-size: 1.125rem;
   font-weight: 600;
-  margin-bottom: 0.75rem;
-  margin-top: 1rem;
+  margin-bottom: 0;
+  margin-top: 0.5rem;
 }
 
 .vote-page .prose h2 {
   font-size: 1rem;
   font-weight: 600;
-  margin-bottom: 0.5rem;
-  margin-top: 0.75rem;
+  margin-bottom: 0;
+  margin-top: 0.375rem;
 }
 
 .vote-page .prose h3 {
   font-size: 0.875rem;
   font-weight: 500;
-  margin-bottom: 0.375rem;
-  margin-top: 0.5rem;
+  margin-bottom: 0;
+  margin-top: 0.25rem;
 }
 
 .prose p {
@@ -334,7 +334,7 @@
 }
 
 .prose li {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.25rem !important;
 }
 
 .prose a {
@@ -445,3 +445,9 @@
   border-color: hsl(210 40% 98%);
   color: hsl(210 40% 98%);
 }
+
+/* Styles simples pour réduire l'espacement des listes */
+.prose ul li,
+.prose ol li {
+  margin-bottom: 0.25rem !important;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0ca8c91..7dd8166 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { PROJECT_CONFIG } from '@/lib/project.config';
+import Footer from '@/components/Footer';
 
 export default function HomePage() {
   return (
@@ -154,11 +155,7 @@ export default function HomePage() {
         </Card>
 
         {/* Footer */}
-        <div className="text-center mt-16 pb-8">
-          <p className="text-slate-600 dark:text-slate-400 text-lg">
-            Développé avec ❤️ pour faciliter la démocratie participative
-          </p>
-        </div>
+        <Footer variant="home" />
       </div>
     </div>
   );
diff --git a/src/components/AddPropositionModal.tsx b/src/components/AddPropositionModal.tsx
index 132e8e8..2812621 100644
--- a/src/components/AddPropositionModal.tsx
+++ b/src/components/AddPropositionModal.tsx
@@ -78,7 +78,7 @@ export default function AddPropositionModal({ isOpen, onClose, onSuccess, campai
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Ajouter une proposition</DialogTitle>
           <DialogDescription>
diff --git a/src/components/DeleteCampaignModal.tsx b/src/components/DeleteCampaignModal.tsx
index ff30711..13c27e3 100644
--- a/src/components/DeleteCampaignModal.tsx
+++ b/src/components/DeleteCampaignModal.tsx
@@ -5,6 +5,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { AlertTriangle } from 'lucide-react';
 import { campaignService } from '@/lib/services';
 import { Campaign } from '@/types';
+import { MarkdownContent } from '@/components/MarkdownContent';
 
 interface DeleteCampaignModalProps {
   isOpen: boolean;
@@ -64,7 +65,7 @@ export default function DeleteCampaignModal({ isOpen, onClose, onSuccess, campai
               <strong>Titre :</strong> {campaign.title}
             </p>
             <p className="text-sm text-slate-600 dark:text-slate-300">
-              <strong>Description :</strong> {campaign.description}
+              <strong>Description :</strong> <MarkdownContent content={campaign.description} />
             </p>
           </div>
           
diff --git a/src/components/EditPropositionModal.tsx b/src/components/EditPropositionModal.tsx
index ebb0b36..3c70a55 100644
--- a/src/components/EditPropositionModal.tsx
+++ b/src/components/EditPropositionModal.tsx
@@ -75,7 +75,7 @@ export default function EditPropositionModal({ isOpen, onClose, onSuccess, propo
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Modifier la proposition</DialogTitle>
           <DialogDescription>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..2358936
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,100 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { PROJECT_CONFIG } from '@/lib/project.config';
+import { settingsService } from '@/lib/services';
+import { parseFooterMessage } from '@/lib/utils';
+
+interface FooterProps {
+  className?: string;
+  variant?: 'home' | 'public';
+}
+
+export default function Footer({ className = '', variant = 'public' }: FooterProps) {
+  const [footerMessage, setFooterMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadFooterMessage = async () => {
+      try {
+        const message = await settingsService.getStringValue(
+          'footer_message', 
+          'Développé avec ❤️ pour faciliter la démocratie participative - [Logiciel libre et open source](GITURL) et transparent pour tous'
+        );
+        setFooterMessage(message);
+      } catch (error) {
+        console.error('Erreur lors du chargement du message du bas de page:', error);
+        // Utiliser le message par défaut en cas d'erreur
+        setFooterMessage('Développé avec ❤️ pour faciliter la démocratie participative - [Logiciel libre et open source](GITURL) et transparent pour tous');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadFooterMessage();
+  }, []);
+
+  if (loading) {
+    return null; // Ne pas afficher le bas de page pendant le chargement
+  }
+
+  const { text: processedText, links } = parseFooterMessage(footerMessage, PROJECT_CONFIG.repository.url);
+
+  // Pour la page d'accueil, utiliser un style plus simple
+  if (variant === 'home') {
+    return (
+      <div className={`text-center mt-16 pb-8 ${className}`}>
+        <p className="text-slate-600 dark:text-slate-400 text-lg">
+          {processedText}
+        </p>
+      </div>
+    );
+  }
+
+  // Pour les pages publiques, utiliser un style plus discret avec liens
+  const renderFooterText = () => {
+    if (links.length === 0) {
+      return processedText;
+    }
+    
+    // Créer un tableau d'éléments avec les liens
+    const elements: React.ReactNode[] = [];
+    let lastIndex = 0;
+    
+    links.forEach((link, index) => {
+      // Ajouter le texte avant le lien
+      if (link.start > lastIndex) {
+        elements.push(processedText.slice(lastIndex, link.start));
+      }
+      
+      // Ajouter le lien
+      elements.push(
+        <a
+          key={`link-${index}`}
+          href={link.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-gray-500 hover:text-gray-700 underline"
+        >
+          {link.text}
+        </a>
+      );
+      
+      lastIndex = link.end;
+    });
+    
+    // Ajouter le texte restant
+    if (lastIndex < processedText.length) {
+      elements.push(processedText.slice(lastIndex));
+    }
+    
+    return elements;
+  };
+
+  return (
+    <div className={`text-center mt-16 pb-20 ${className}`}>
+      <p className="text-gray-400 text-sm">
+        {renderFooterText()}
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/MarkdownEditor.tsx b/src/components/MarkdownEditor.tsx
index b9dc917..d041189 100644
--- a/src/components/MarkdownEditor.tsx
+++ b/src/components/MarkdownEditor.tsx
@@ -3,9 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
 import { Eye, Edit3, AlertCircle, HelpCircle } from 'lucide-react';
 import { previewMarkdown, validateMarkdown } from '@/lib/markdown';
 
@@ -51,89 +49,116 @@ export function MarkdownEditor({
           {label}
         </Label>
         <div className="flex items-center gap-2">
-          <Button
+          <button
             type="button"
-            variant="ghost"
-            size="sm"
             onClick={() => setShowHelp(!showHelp)}
-            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
+            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground rounded border-0 bg-transparent cursor-pointer flex items-center gap-1"
+            tabIndex={-1}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                setShowHelp(!showHelp);
+              }
+            }}
           >
-            <HelpCircle className="h-3 w-3 mr-1" />
+            <HelpCircle className="h-3 w-3" />
             Aide Markdown
-          </Button>
+          </button>
           <span className="text-sm text-muted-foreground">{value.length}/{maxLength}</span>
         </div>
       </div>
 
-      <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'edit' | 'preview')}>
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="edit" className="flex items-center gap-2">
+      <div className="flex items-center justify-center mb-4">
+        <div className="flex rounded-lg border bg-muted p-1">
+          <button
+            type="button"
+            onClick={() => setActiveTab('edit')}
+            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center gap-2 ${
+              activeTab === 'edit'
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+            tabIndex={-1}
+          >
             <Edit3 className="h-4 w-4" />
             Éditer
-          </TabsTrigger>
-          <TabsTrigger value="preview" className="flex items-center gap-2">
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('preview')}
+            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center gap-2 ${
+              activeTab === 'preview'
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+            tabIndex={-1}
+          >
             <Eye className="h-4 w-4" />
             Prévisualiser
-          </TabsTrigger>
-        </TabsList>
+          </button>
+        </div>
+      </div>
 
-        <TabsContent value="edit" className="space-y-4">
-          <Textarea
-            id="markdown-editor"
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            placeholder={placeholder}
-            className="min-h-[200px] font-mono text-sm"
-          />
-          
-          {/* Aide markdown (affichée conditionnellement) */}
-          {showHelp && (
-            <div className="rounded-lg border bg-muted/50 p-4 animate-in fade-in duration-200">
-              <div className="flex items-center justify-between mb-2">
-                <h4 className="text-sm font-medium">Syntaxe Markdown supportée</h4>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowHelp(false)}
-                  className="h-6 px-2 text-xs"
-                >
-                  ×
-                </Button>
-              </div>
-              <div className="grid grid-cols-2 gap-4 text-xs text-muted-foreground">
-                <div>
-                  <p><strong>**gras**</strong> → <strong>gras</strong></p>
-                  <p><em>*italique*</em> → <em>italique</em></p>
-                  <p><u>__souligné__</u> → <u>souligné</u></p>
-                  <p><del>~~barré~~</del> → <del>barré</del></p>
+        {activeTab === 'edit' && (
+          <div className="space-y-4">
+            <Textarea
+              id="markdown-editor"
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              placeholder={placeholder}
+              className="min-h-[200px] max-h-[300px] font-mono text-sm overflow-y-auto"
+              tabIndex={0}
+            />
+            
+            {/* Aide markdown (affichée conditionnellement) */}
+            {showHelp && (
+              <div className="rounded-lg border bg-muted/50 p-4 animate-in fade-in duration-200">
+                <div className="flex items-center justify-between mb-2">
+                  <h4 className="text-sm font-medium">Syntaxe Markdown supportée</h4>
+                  <button
+                    type="button"
+                    onClick={() => setShowHelp(false)}
+                    className="h-6 px-2 text-xs rounded border-0 bg-transparent cursor-pointer hover:bg-muted"
+                    tabIndex={-1}
+                  >
+                    ×
+                  </button>
                 </div>
-                <div>
-                  <p># Titre 1</p>
-                  <p>## Titre 2</p>
-                  <p>- Liste à puces</p>
-                  <p>[Lien](https://exemple.com)</p>
+                <div className="grid grid-cols-2 gap-4 text-xs text-muted-foreground">
+                  <div>
+                    <p><strong>**gras**</strong> → <strong>gras</strong></p>
+                    <p><em>*italique*</em> → <em>italique</em></p>
+                    <p><u>__souligné__</u> → <u>souligné</u></p>
+                    <p><del>~~barré~~</del> → <del>barré</del></p>
+                  </div>
+                  <div>
+                    <p># Titre 1</p>
+                    <p>## Titre 2</p>
+                    <p>- Liste à puces</p>
+                    <p>[Lien](https://exemple.com)</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-        </TabsContent>
-
-        <TabsContent value="preview" className="space-y-4">
-          <div className="min-h-[200px] rounded-lg border bg-background p-4">
-            {value ? (
-              <div 
-                className="prose prose-sm max-w-none"
-                dangerouslySetInnerHTML={{ __html: previewContent }}
-              />
-            ) : (
-              <p className="text-muted-foreground italic">
-                Aucun contenu à prévisualiser
-              </p>
             )}
           </div>
-        </TabsContent>
-      </Tabs>
+        )}
+
+        {activeTab === 'preview' && (
+          <div className="space-y-4">
+            <div className="min-h-[200px] max-h-[300px] rounded-lg border bg-background p-4 overflow-y-auto">
+              {value ? (
+                <div 
+                  className="prose prose-sm max-w-none [&_ul]:space-y-1 [&_ol]:space-y-1 [&_li]:my-0"
+                  dangerouslySetInnerHTML={{ __html: previewContent }}
+                />
+              ) : (
+                <p className="text-muted-foreground italic">
+                  Aucun contenu à prévisualiser
+                </p>
+              )}
+            </div>
+          </div>
+        )}
 
       {/* Messages d'erreur */}
       {!validation.isValid && (
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index 8f201c2..4211156 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -18,39 +18,95 @@ export function parseMarkdown(content: string): string {
   // Nettoyer le contenu avant parsing
   const cleanContent = content.trim();
 
-  // Parser le markdown avec des regex simples et sécurisées
-  let htmlContent = cleanContent
-    // Échapper les caractères HTML
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-    // Parser le markdown de base
-    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-    .replace(/__(.*?)__/g, '<u>$1</u>')
-    .replace(/~~(.*?)~~/g, '<del>$1</del>')
-    // Parser les liens avec validation
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
-      if (isValidUrl(url)) {
-        return `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`;
-      }
-      return text; // Retourner juste le texte si l'URL n'est pas valide
-    })
-    // Parser les titres
-    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-    // Parser les listes
-    .replace(/^- (.*$)/gim, '<li>$1</li>')
-    .replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
-    // Parser les paragraphes
-    .replace(/\n\n/g, '</p><p>')
-    .replace(/\n/g, '<br>');
+  // Diviser le contenu en lignes pour traiter les listes correctement
+  const lines = cleanContent.split('\n');
+  const processedLines: string[] = [];
+  let inUnorderedList = false;
+  let inOrderedList = false;
 
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    
+    // Échapper les caractères HTML
+    let processedLine = line
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+
+    // Parser le markdown de base
+    processedLine = processedLine
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/__(.*?)__/g, '<u>$1</u>')
+      .replace(/~~(.*?)~~/g, '<del>$1</del>')
+      // Parser les liens avec validation
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
+        if (isValidUrl(url)) {
+          return `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+        }
+        return text; // Retourner juste le texte si l'URL n'est pas valide
+      });
+
+    // Traiter les titres
+    if (processedLine.match(/^### /)) {
+      processedLine = processedLine.replace(/^### (.*$)/, '<h3>$1</h3>');
+    } else if (processedLine.match(/^## /)) {
+      processedLine = processedLine.replace(/^## (.*$)/, '<h2>$1</h2>');
+    } else if (processedLine.match(/^# /)) {
+      processedLine = processedLine.replace(/^# (.*$)/, '<h1>$1</h1>');
+    }
+
+    // Traiter les listes à puce
+    if (processedLine.match(/^- /)) {
+      if (!inUnorderedList) {
+        processedLine = '<ul>' + processedLine.replace(/^- (.*$)/, '<li>$1</li>');
+        inUnorderedList = true;
+      } else {
+        processedLine = processedLine.replace(/^- (.*$)/, '<li>$1</li>');
+      }
+    } else if (processedLine.match(/^\d+\. /)) {
+      if (!inOrderedList) {
+        processedLine = '<ol>' + processedLine.replace(/^\d+\. (.*$)/, '<li>$1</li>');
+        inOrderedList = true;
+      } else {
+        processedLine = processedLine.replace(/^\d+\. (.*$)/, '<li>$1</li>');
+      }
+    } else {
+      // Ligne normale - fermer les listes si nécessaire
+      if (inUnorderedList) {
+        processedLine = '</ul>' + processedLine;
+        inUnorderedList = false;
+      }
+      if (inOrderedList) {
+        processedLine = '</ol>' + processedLine;
+        inOrderedList = false;
+      }
+      
+      // Traiter les paragraphes
+      if (processedLine.trim() === '') {
+        processedLine = '</p><p>';
+      } else {
+        processedLine = processedLine + '<br>';
+      }
+    }
+
+    processedLines.push(processedLine);
+  }
+
+  // Fermer les listes ouvertes à la fin
+  if (inUnorderedList) {
+    processedLines.push('</ul>');
+  }
+  if (inOrderedList) {
+    processedLines.push('</ol>');
+  }
+
+  let htmlContent = processedLines.join('\n');
+  
   // Ajouter les balises de paragraphe si nécessaire
-  if (!htmlContent.startsWith('<h') && !htmlContent.startsWith('<li')) {
+  if (!htmlContent.startsWith('<h') && !htmlContent.startsWith('<ul') && !htmlContent.startsWith('<ol')) {
     htmlContent = `<p>${htmlContent}</p>`;
   }
 
@@ -101,25 +157,93 @@ export function parseMarkdown(content: string): string {
 export function previewMarkdown(content: string): string {
   if (!content) return '';
 
-  // Remplacer les caractères spéciaux pour la prévisualisation
-  return content
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-    .replace(/__(.*?)__/g, '<u>$1</u>')
-    .replace(/~~(.*?)~~/g, '<del>$1</del>')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
-    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-    .replace(/^- (.*$)/gim, '<li>$1</li>')
-    .replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
-    .replace(/\n\n/g, '</p><p>')
-    .replace(/\n/g, '<br>');
+  // Diviser le contenu en lignes pour traiter les listes correctement
+  const lines = content.split('\n');
+  const processedLines: string[] = [];
+  let inUnorderedList = false;
+  let inOrderedList = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    
+    // Échapper les caractères HTML
+    let processedLine = line
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+
+    // Traiter le markdown de base
+    processedLine = processedLine
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/__(.*?)__/g, '<u>$1</u>')
+      .replace(/~~(.*?)~~/g, '<del>$1</del>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+
+    // Traiter les titres
+    if (processedLine.match(/^### /)) {
+      processedLine = processedLine.replace(/^### (.*$)/, '<h3>$1</h3>');
+    } else if (processedLine.match(/^## /)) {
+      processedLine = processedLine.replace(/^## (.*$)/, '<h2>$1</h2>');
+    } else if (processedLine.match(/^# /)) {
+      processedLine = processedLine.replace(/^# (.*$)/, '<h1>$1</h1>');
+    }
+
+    // Traiter les listes à puce
+    if (processedLine.match(/^- /)) {
+      if (!inUnorderedList) {
+        processedLine = '<ul>' + processedLine.replace(/^- (.*$)/, '<li>$1</li>');
+        inUnorderedList = true;
+      } else {
+        processedLine = processedLine.replace(/^- (.*$)/, '<li>$1</li>');
+      }
+    } else if (processedLine.match(/^\d+\. /)) {
+      if (!inOrderedList) {
+        processedLine = '<ol>' + processedLine.replace(/^\d+\. (.*$)/, '<li>$1</li>');
+        inOrderedList = true;
+      } else {
+        processedLine = processedLine.replace(/^\d+\. (.*$)/, '<li>$1</li>');
+      }
+    } else {
+      // Ligne normale - fermer les listes si nécessaire
+      if (inUnorderedList) {
+        processedLine = '</ul>' + processedLine;
+        inUnorderedList = false;
+      }
+      if (inOrderedList) {
+        processedLine = '</ol>' + processedLine;
+        inOrderedList = false;
+      }
+      
+      // Traiter les paragraphes
+      if (processedLine.trim() === '') {
+        processedLine = '</p><p>';
+      } else {
+        processedLine = processedLine + '<br>';
+      }
+    }
+
+    processedLines.push(processedLine);
+  }
+
+  // Fermer les listes ouvertes à la fin
+  if (inUnorderedList) {
+    processedLines.push('</ul>');
+  }
+  if (inOrderedList) {
+    processedLines.push('</ol>');
+  }
+
+  let result = processedLines.join('\n');
+  
+  // Ajouter les balises de paragraphe si nécessaire
+  if (!result.startsWith('<h') && !result.startsWith('<ul') && !result.startsWith('<ol')) {
+    result = '<p>' + result + '</p>';
+  }
+
+  return result;
 }
 
 // Fonction pour valider le contenu markdown avant sauvegarde
diff --git a/src/lib/services.ts b/src/lib/services.ts
index 5b62b64..b0982ca 100644
--- a/src/lib/services.ts
+++ b/src/lib/services.ts
@@ -578,6 +578,14 @@ export const settingsService = {
     return this.setValue(key, value.toString());
   },
 
+  async getStringValue(key: string, defaultValue: string = ''): Promise<string> {
+    return this.getValue(key, defaultValue);
+  },
+
+  async setStringValue(key: string, value: string): Promise<Setting> {
+    return this.setValue(key, value);
+  },
+
   async delete(key: string): Promise<void> {
     const { error } = await supabase
       .from('settings')
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..43ccc09 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,42 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/**
+ * Traite le message du footer en remplaçant [LINK] par le lien vers le repository
+ */
+export function processFooterMessage(message: string, repositoryUrl: string): string {
+  return message.replace(/\[LINK\]/g, repositoryUrl);
+}
+
+/**
+ * Traite le message du footer et retourne le texte avec les liens Markdown remplacés
+ */
+export function parseFooterMessage(message: string, repositoryUrl: string): { text: string; links: Array<{ text: string; url: string; start: number; end: number }> } {
+  const links: Array<{ text: string; url: string; start: number; end: number }> = [];
+  let processedText = message;
+  
+  // Remplacer [texte](GITURL) par le texte du lien
+  const linkRegex = /\[([^\]]+)\]\(GITURL\)/g;
+  let match;
+  let offset = 0;
+  
+  while ((match = linkRegex.exec(message)) !== null) {
+    const linkText = match[1]; // Le texte entre crochets
+    const fullMatch = match[0]; // Le match complet [texte](GITURL)
+    const start = match.index + offset;
+    const end = start + linkText.length;
+    
+    links.push({
+      text: linkText,
+      url: repositoryUrl,
+      start,
+      end
+    });
+    
+    processedText = processedText.replace(fullMatch, linkText);
+    offset += linkText.length - fullMatch.length;
+  }
+  
+  return { text: processedText, links };
+}