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/ProjectTechnologies.tsx

@@ -1,17 +1,46 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+
 type props = {
     technologies: string[];
 };
 
 export function ProjectTechnologies({ technologies }: props) {
-    return (
-        <section className="pb-16">
-            <p className="mb-4 text-sm text-neutral-500">Technologies</p>
+    const ref = useRef<HTMLElement>(null);
 
-            <div className="flex flex-wrap gap-3">
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node, i) => {
+                        setTimeout(() => node.classList.add('visible'), i * 60);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.2 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <section ref={ref} className="pb-14">
+            <div className="flex items-center gap-3 mb-6">
+                <span className="w-6 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                    Technologies
+                </span>
+            </div>
+
+            <div className="flex flex-wrap gap-2.5">
                 {technologies.map((tech) => (
                     <span
                         key={tech}
-                        className="rounded-full bg-brand-brown px-4 py-2 text-sm text-white"
+                        className="reveal font-sans text-xs uppercase tracking-[0.12em] text-brand-brown/70 border border-brand-brown/20 rounded-full px-4 py-1.5 hover:border-brand-brown/50 hover:text-brand-brown transition-colors duration-200 cursor-default"
                     >
                         {tech}
                     </span>
@@ -19,4 +48,4 @@ export function ProjectTechnologies({ technologies }: props) {
             </div>
         </section>
     );
-}
+}