redesign(project-page): editorial redesign of /works/[slug]

- ProjectHero: full-viewport dark hero with blurred cover image overlay,
  animated entrance (back link → date → title → description), scroll indicator
- ProjectMeta: reveal-animated metadata strip with top/bottom dividers,
  refined label/value typography using brand color tokens
- ProjectTechnologies: outline pill tags with per-tag staggered reveal,
  hover border/color transition
- ProjectsColumns: cleaner 2-col prose grid with wider gap
- ProjectPreviewGrid: rounded-xl with subtle border, responsive 1→2 col
- ProjectVisitButton: pill-shaped dark CTA replacing bordered rectangle
- OtherProjects: image-first card layout with scroll reveal, hover scale +
  brightness on covers, sliding arrow, refined "Voir aussi" header
- page.tsx: passes cover prop to ProjectHero, 900px max-width content
  column, semantic MDX prose styles via article selector chains

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/sections/ProjectMeta.tsx

@@ -1,3 +1,7 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+
 type props = {
     dateLabel: string;
     category: string;
@@ -5,34 +9,58 @@ type props = {
     client: string;
 };
 
-function Item({
-    label,
-    children,
-}: {
-    label: string;
-    children: React.ReactNode;
-}) {
+function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
     return (
-        <div className="space-y-2">
-            <p className="text-sm text-neutral-500">{label}</p>
-            <div className="text-base text-neutral-900">{children}</div>
+        <div className="flex flex-col gap-2">
+            <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                {label}
+            </span>
+            <div className="font-sans text-sm text-brand-brown/80 leading-relaxed">
+                {children}
+            </div>
         </div>
     );
 }
 
 export function ProjectMeta({ dateLabel, category, roles, client }: props) {
+    const ref = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.classList.add('visible');
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.2 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
     return (
-        <section className="grid gap-8 py-10 md:grid-cols-4">
-            <Item label="Année">{dateLabel}</Item>
-            <Item label="Catégorie">{category}</Item>
-            <Item label="Rôles">
-                <div className="flex flex-col gap-1">
-                    {roles.map((role) => (
-                        <span key={role}>{role}</span>
-                    ))}
-                </div>
-            </Item>
-            <Item label="Client">{client}</Item>
+        <section ref={ref} className="reveal py-12 md:py-16">
+            {/* Top divider */}
+            <div className="w-full h-px bg-brand-brown/10 mb-10" />
+
+            <div className="grid grid-cols-2 gap-8 md:grid-cols-4 md:gap-12">
+                <MetaItem label="Année">{dateLabel}</MetaItem>
+                <MetaItem label="Catégorie">{category}</MetaItem>
+                <MetaItem label="Rôles">
+                    <div className="flex flex-col gap-1">
+                        {roles.map((role) => (
+                            <span key={role}>{role}</span>
+                        ))}
+                    </div>
+                </MetaItem>
+                <MetaItem label="Client">{client}</MetaItem>
+            </div>
+
+            {/* Bottom divider */}
+            <div className="w-full h-px bg-brand-brown/10 mt-10" />
         </section>
     );
-}
+}