synchronisation du contenu avec la DB et amélioration du CMS

- Migration du blog et des interviews des données mockées vers PostgreSQL (Prisma).
- Refonte des pages publiques en Server Components pour de meilleures performances/SEO.
- Intégration d'un éditeur de texte riche (React Quill) avec titres H1-H6 et séparateurs.
- Correction des erreurs de validation Prisma liées aux paramètres asynchrones (Next.js 15+).
- Correction des problèmes d'affichage des modales de suspension via React Portals.
- Installation de @tailwindcss/typography et correction du débordement de texte (break-words).
- Implémentation des actions de modération (suspension/révocation) pour les utilisateurs et boutiques.

app/blog/[id]/page.tsx

@@ -1,31 +1,22 @@
-"use client";
-
-
-import React, { useEffect } from 'react';
+import React from 'react';
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
+import { notFound } from 'next/navigation';
 import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
-import { MOCK_BLOG_POSTS } from '../../../lib/mockData';
+import { prisma } from '../../../lib/prisma';
 
-const BlogPostPage = () => {
-  const { id } = useParams();
-  const post = MOCK_BLOG_POSTS.find(p => p.id === id);
+interface Props {
+  params: Promise<{ id: string }>;
+}
 
-  // Scroll to top when loading a new post
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [id]);
+export default async function BlogPostPage({ params }: Props) {
+  const { id } = await params;
+  
+  const post = await prisma.blogPost.findUnique({
+    where: { id }
+  });
 
   if (!post) {
-    return (
-      <div className="min-h-[60vh] flex flex-col items-center justify-center">
-        <h2 className="text-3xl font-serif font-bold text-gray-900 mb-4">Article introuvable</h2>
-        <p className="text-gray-600 mb-8">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
-        <Link href="/blog" className="text-brand-600 hover:text-brand-700 font-medium flex items-center">
-          <ArrowLeft className="w-4 h-4 mr-2" /> Retour au blog
-        </Link>
-      </div>
-    );
+    notFound();
   }
 
   return (
@@ -56,7 +47,7 @@ const BlogPostPage = () => {
               </span>
               <span className="flex items-center">
                 <Calendar className="w-4 h-4 mr-1 text-brand-500" />
-                {post.date}
+                {new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
               </span>
               <span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
                 Conseils
@@ -68,18 +59,14 @@ const BlogPostPage = () => {
           </header>
 
           {/* Content */}
-          <div className="prose prose-lg prose-orange max-w-none text-gray-600">
-            <p className="lead text-xl text-gray-500 font-serif italic mb-6">
+          <div className="prose prose-lg prose-orange max-w-none text-gray-600 break-words overflow-hidden">
+            <p className="lead text-xl text-gray-500 font-serif italic mb-6 border-b border-gray-100 pb-6">
               {post.excerpt}
             </p>
-            {/* Rendering paragraphs manually for the mock data */}
-            {post.content.split('\n').map((paragraph, index) => (
-              paragraph.trim() !== '' && (
-                <p key={index} className="mb-4 leading-relaxed">
-                  {paragraph}
-                </p>
-              )
-            ))}
+            <div 
+              className="mt-6"
+              dangerouslySetInnerHTML={{ __html: post.content }} 
+            />
           </div>
 
           {/* Footer / Share */}
@@ -95,6 +82,5 @@ const BlogPostPage = () => {
       </div>
     </article>
   );
-};
+}
 
-export default BlogPostPage;