UI: simplify article layout and fix text wrapping

app/blog/[id]/page.tsx

@@ -63,24 +63,25 @@ export default async function BlogPostPage({ params }: Props) {
   }
 
   return (
-    <article className="bg-white min-h-screen">
-      {/* Hero Image */}
-      <div className="w-full h-64 md:h-96 relative">
-        <img
-          src={post.imageUrl}
-          alt={post.title}
-          className="w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
-        <div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
-          <Link href="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
+    <article className="bg-gray-50 min-h-screen py-12">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Navigation */}
+        <div className="mb-8">
+          <Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
             <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
           </Link>
         </div>
-      </div>
 
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10">
-        <div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100">
+        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100">
+          {/* Header Image */}
+          <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>
+
           {/* Header */}
           <header className="mb-8 border-b border-gray-100 pb-8">
             <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">

app/globals.css

@@ -26,11 +26,10 @@ body {
 }
 
 .prose {
-  text-align: justify;
+  text-align: left;
   hyphens: none;
   word-break: normal;
-  overflow-wrap: normal;
-  overflow-x: auto;
+  overflow-wrap: break-word;
 }
 
 .prose p {

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.