feat: implement event submission flow with image upload and modal interface

app/actualites/[id]/page.tsx

@@ -5,6 +5,7 @@ import { ArrowLeft, ArrowRight, User, Calendar, Share2 } from 'lucide-react';
 import { sanitizeHTML } from '../../../lib/sanitize';
 import { prisma } from '../../../lib/prisma';
 import BlogShareButtons from '../../../components/BlogShareButtons';
+import LightboxImage from '@/components/LightboxImage';
 import { Metadata } from 'next';
 
 interface Props {
@@ -117,11 +118,12 @@ export default async function BlogPostPage({ params }: Props) {
 
           <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative z-10">
             {/* Image d'en-tête */}
-          <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
-            <img
-              src={post.imageUrl}
-              alt={post.title}
-              className="w-full h-full object-cover"
+          <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden shadow-md">
+            <LightboxImage 
+              src={post.imageUrl} 
+              alt={post.title} 
+              position={post.coverPosition || "50% 50%"}
+              zoom={post.coverZoom || 1}
             />
           </div>
 
@@ -160,7 +162,7 @@ export default async function BlogPostPage({ params }: Props) {
               {post.excerpt}
             </p>
 
-            {/* Corps du texte avec ID pour le contrôle CSS */}
+              {/* Corps du texte avec ID pour le contrôle CSS */}
             <div
               id="blog-content"
               className="mt-6"
@@ -168,6 +170,32 @@ export default async function BlogPostPage({ params }: Props) {
             />
           </div>
 
+          {/* Sources Section */}
+          {Array.isArray(post.sources) && post.sources.length > 0 && (
+            <div className="mt-12 p-6 bg-gray-50 rounded-xl border border-gray-100">
+              <h3 className="text-sm font-bold uppercase tracking-wider text-gray-400 mb-4 flex items-center gap-2">
+                <Share2 className="w-4 h-4 text-brand-500" />
+                Sources & Références
+              </h3>
+              <ul className="space-y-3">
+                {(post.sources as any[]).map((source, index) => (
+                  <li key={index} className="flex items-start gap-3">
+                    <span className="w-1.5 h-1.5 rounded-full bg-brand-500 mt-2 shrink-0" />
+                    <a 
+                      href={source.url} 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-gray-700 hover:text-brand-600 transition-colors break-all"
+                    >
+                      <span className="font-semibold">{source.title || 'Source'}</span>
+                      <span className="text-gray-400 ml-2 text-sm">{source.url}</span>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
           {/* Partage / Footer */}
           <div className="mt-12 pt-8 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4">
             <p className="text-gray-500 font-medium">Vous avez aimé cet article ?</p>

app/actualites/page.tsx

@@ -42,7 +42,16 @@ export default async function BlogPage() {
           {posts.map(post => (
             <Link key={post.id} href={`/actualites/${post.slug || post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
               <div className="flex-shrink-0 relative overflow-hidden h-48">
-                <img className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" src={post.imageUrl} alt={post.title} />
+                <img 
+                  className="h-full w-full object-cover group-hover:scale-[1.05] transition-transform duration-500" 
+                  src={post.imageUrl} 
+                  alt={post.title} 
+                  style={{ 
+                    objectPosition: post.coverPosition || '50% 50%',
+                    transform: `scale(${post.coverZoom || 1})`,
+                    transformOrigin: post.coverPosition || '50% 50%'
+                  }}
+                />
                 <div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
               </div>
               <div className="flex-1 bg-white p-6 flex flex-col justify-between">