Redesign de la page studio avec cards arrondies

- Renomme "THE CLIMBERS" en "THE TEAM"
- Cards valeurs et team en boxes arrondis (rounded-3xl/2rem)
- Avatars circulaires avec ring accent au hover

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/studio/page.tsx

@@ -7,6 +7,24 @@ export const metadata: Metadata = {
     "Highland Games Studio is a two-person indie team crafting survival adventures.",
 };
 
+const values = [
+  {
+    index: "01",
+    title: "CRAFT",
+    body: "Every system, asset and line of dialogue is touched by hand. No shortcuts on what matters.",
+  },
+  {
+    index: "02",
+    title: "SURVIVE",
+    body: "We love the genre. The tension between scarcity and discovery is at the core of every game we make.",
+  },
+  {
+    index: "03",
+    title: "WONDER",
+    body: "A summit isn't the end of the climb — it's the start of a new world. We design for that feeling.",
+  },
+];
+
 const team = [
   {
     name: "Founder One",
@@ -25,6 +43,7 @@ const team = [
 export default function StudioPage() {
   return (
     <div className="pt-32 pb-24 px-6 lg:px-10">
+      {/* HERO */}
       <div className="max-w-4xl mx-auto">
         <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
           — THE STUDIO
@@ -42,80 +61,79 @@ export default function StudioPage() {
         </p>
       </div>
 
-      {/* MISSION */}
+      {/* VALUES */}
-      <section className="max-w-4xl mx-auto mt-24 grid md:grid-cols-3 gap-8">
+      <section className="max-w-4xl mx-auto mt-24 grid md:grid-cols-3 gap-6">
-        <div className="border border-border p-8">
+        {values.map((v) => (
-          <p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
+          <div
-            01
+            key={v.index}
-          </p>
+            className="group relative rounded-3xl border border-border bg-surface/60 p-8 transition-all duration-300 hover:-translate-y-1 hover:border-accent/60 hover:bg-surface"
-          <h3 className="font-display text-2xl tracking-wider mb-3">
+          >
-            CRAFT
+            <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl border border-border bg-surface-elevated font-display text-sm tracking-[0.2em] text-accent transition-colors duration-300 group-hover:border-accent/50">
-          </h3>
+              {v.index}
-          <p className="text-sm text-foreground-muted leading-relaxed">
+            </div>
-            Every system, asset and line of dialogue is touched by hand. No
+            <h3 className="font-display text-2xl tracking-wider mb-3">
-            shortcuts on what matters.
+              {v.title}
-          </p>
+            </h3>
-        </div>
+            <p className="text-sm text-foreground-muted leading-relaxed">
-        <div className="border border-border p-8">
+              {v.body}
-          <p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
+            </p>
-            02
+          </div>
-          </p>
+        ))}
-          <h3 className="font-display text-2xl tracking-wider mb-3">
-            SURVIVE
-          </h3>
-          <p className="text-sm text-foreground-muted leading-relaxed">
-            We love the genre. The tension between scarcity and discovery is at
-            the core of every game we make.
-          </p>
-        </div>
-        <div className="border border-border p-8">
-          <p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
-            03
-          </p>
-          <h3 className="font-display text-2xl tracking-wider mb-3">
-            WONDER
-          </h3>
-          <p className="text-sm text-foreground-muted leading-relaxed">
-            A summit isn&apos;t the end of the climb — it&apos;s the start of a
-            new world. We design for that feeling.
-          </p>
-        </div>
       </section>
 
       {/* TEAM */}
-      <section className="max-w-4xl mx-auto mt-24">
+      <section className="max-w-4xl mx-auto mt-28">
-        <h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-12">
+        <div className="mb-12 text-center">
-          THE CLIMBERS
+          <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
-        </h2>
+            — THE PEOPLE
+          </p>
+          <h2 className="font-display text-4xl sm:text-5xl tracking-wider">
+            THE TEAM
+          </h2>
+        </div>
+
         <div className="grid sm:grid-cols-2 gap-8">
           {team.map((m) => (
-            <div key={m.name} className="border border-border p-8 bg-surface">
+            <div
-              <div className="w-20 h-20 bg-surface-elevated border border-border flex items-center justify-center mb-6 overflow-hidden">
+              key={m.name}
-                {m.photo ? (
+              className="group relative flex flex-col items-center rounded-[2rem] border border-border bg-surface/60 px-8 py-10 text-center transition-all duration-300 hover:-translate-y-1 hover:border-accent/60 hover:bg-surface"
-                  <Image
+            >
-                    src={m.photo}
+              {/* Avatar */}
-                    alt={m.name}
+              <div className="relative mb-6">
-                    width={80}
+                <div
-                    height={80}
+                  aria-hidden
-                    className="w-full h-full object-cover"
+                  className="absolute -inset-1 rounded-full bg-gradient-to-b from-accent/40 to-transparent opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-100"
-                  />
+                />
-                ) : (
+                <div className="relative h-32 w-32 overflow-hidden rounded-full border border-border bg-surface-elevated ring-2 ring-transparent transition-all duration-300 group-hover:ring-accent/40">
-                  <Image
+                  {m.photo ? (
-                    src="/image/Studio/Logo Flat.png"
+                    <Image
-                    alt=""
+                      src={m.photo}
-                    width={40}
+                      alt={m.name}
-                    height={28}
+                      width={128}
-                    className="opacity-40"
+                      height={128}
-                  />
+                      className="h-full w-full object-cover"
-                )}
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <Image
+                        src="/image/Studio/Logo Flat.png"
+                        alt=""
+                        width={56}
+                        height={40}
+                        className="opacity-30"
+                      />
+                    </div>
+                  )}
+                </div>
               </div>
-              <h3 className="font-display text-2xl tracking-wider mb-1">
+
+              <h3 className="font-display text-2xl tracking-wider mb-2">
                 {m.name}
               </h3>
               <p className="text-xs tracking-widest text-accent mb-4 uppercase">
                 {m.role}
               </p>
-              <p className="text-sm text-foreground-muted leading-relaxed">
+              <p className="text-sm text-foreground-muted leading-relaxed max-w-xs">
                 {m.bio}
               </p>
             </div>