From 4bd0595e3a7ce810fc3b5f5a5332a9d21e8470c5 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Wed, 18 Feb 2026 18:56:17 +0100
Subject: [PATCH] =?UTF-8?q?Blocs=20de=20la=20homepage=20enti=C3=A8rement?=
 =?UTF-8?q?=20cliquables=20(FR/EN/AR)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les cartes Code et Théâtre sont des <a> directs. La carte Photo utilise un stretched link avec le lien Fil Photo cliquable indépendamment par-dessus.
---
 src/pages/ar/index.astro | 33 +++++++++++++++------------------
 src/pages/en/index.astro | 33 +++++++++++++++------------------
 src/pages/index.astro    | 33 +++++++++++++++------------------
 3 files changed, 45 insertions(+), 54 deletions(-)

diff --git a/src/pages/ar/index.astro b/src/pages/ar/index.astro
index 5eea512..331a11c 100644
--- a/src/pages/ar/index.astro
+++ b/src/pages/ar/index.astro
@@ -50,7 +50,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
   <div dir="rtl" lang="ar" class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
-      <div class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30">
+      <a href="/ar/برمجة" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
         <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
         <div class="relative z-10">
           <h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
@@ -59,15 +59,13 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
           <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
             أكثر من 20 سنة في بناء البرمجيات. اليوم، أختار مشاريعي: برمجيات حرّة، أدوات مفيدة، لا شيء يُقيّد. Craftsmanship، DDD، TypeScript — وهاجس التحيّزات التي نضعها في الكود دون أن ندري. أُدرّس البرمجة وأنشّط مجتمع Software Crafters في ألبي.
           </p>
-          <div class="space-y-3">
-            <a href="/ar/برمجة" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
-              ← اكتشف المزيد
-            </a>
-          </div>
+          <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
+            ← اكتشف المزيد
+          </span>
         </div>
-      </div>
+      </a>
 
-      <div class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30">
+      <a href="/ar/مسرح" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
         <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
         <div class="relative z-10">
           <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
@@ -76,17 +74,16 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
           <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
             ممثل ارتجالي منذ 2008، من ضواحي باريس إلى المغرب قبل تأسيس فرقة Les Particules في ألبي. اليوم أخوض أيضًا غمار المسرح المكتوب.
           </p>
-          <div class="space-y-3">
-            <a href="/ar/مسرح" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
-              ← المسار الفني
-            </a>
-          </div>
+          <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
+            ← المسار الفني
+          </span>
         </div>
-      </div>
+      </a>
 
       <div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
+        <a href="/ar/تصوير" class="absolute inset-0 z-0" aria-label="التصوير"></a>
         <div class="absolute top-4 left-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
-        <div class="relative z-10">
+        <div class="relative z-10 pointer-events-none">
           <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
             التصوير
           </h3>
@@ -94,10 +91,10 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
             أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
           </p>
           <div class="space-y-3">
-            <a href="/ar/تصوير" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
+            <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
               ← معرض الصور
-            </a>
-            <a href="/ar/تصوير/مدونة" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
+            </span>
+            <a href="/ar/تصوير/مدونة" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium pointer-events-auto relative z-20">
               ← مُدوّنة الصور
             </a>
           </div>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 712f3fd..c50f4b0 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -50,7 +50,7 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
   <div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
-      <div class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30">
+      <a href="/en/code" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
         <div class="relative z-10">
           <h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
@@ -59,15 +59,13 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
           <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
             Over 20 years building software. Today, I choose my projects: free software, useful tools, nothing that alienates. Craftsmanship, DDD, TypeScript — and an obsession with the biases we unknowingly put into code. I teach programming and run the Software Crafters meetup in Albi.
           </p>
-          <div class="space-y-3">
-            <a href="/en/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
-              → Learn more
-            </a>
-          </div>
+          <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
+            → Learn more
+          </span>
         </div>
-      </div>
+      </a>
 
-      <div class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30">
+      <a href="/en/acting" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
         <div class="relative z-10">
           <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
@@ -76,17 +74,16 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
           <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
             Improv actor since 2008, from the Paris suburbs to Morocco before co-founding Les Particules in Albi. Now also taking on scripted theater.
           </p>
-          <div class="space-y-3">
-            <a href="/en/acting" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
-              → Artistic journey
-            </a>
-          </div>
+          <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
+            → Artistic journey
+          </span>
         </div>
-      </div>
+      </a>
 
       <div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
+        <a href="/en/photo" class="absolute inset-0 z-0" aria-label="Photography"></a>
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
-        <div class="relative z-10">
+        <div class="relative z-10 pointer-events-none">
           <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
             Photography
           </h3>
@@ -94,10 +91,10 @@ import jalilPhoto from "../../assets/images/jalil-2.jpg";
             I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
           </p>
           <div class="space-y-3">
-            <a href="/en/photo" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
+            <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
               → Photo portfolio
-            </a>
-            <a href="/en/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
+            </span>
+            <a href="/en/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium pointer-events-auto relative z-20">
               → Photo Feed
             </a>
           </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a5dfb42..302f60d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -50,7 +50,7 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
   <div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
       
-      <div class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30">
+      <a href="/code" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-blue-200/50 dark:border-blue-800/30 block no-underline">
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">💻</div>
         <div class="relative z-10">
           <h3 class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">
@@ -59,15 +59,13 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
           <p class="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
             Plus de 20 ans à construire du logiciel. Aujourd'hui, je choisis mes projets : du libre, de l'utile, rien qui aliène. Craftsmanship, DDD, TypeScript — et une obsession pour les biais qu'on met dans le code sans le savoir. J'enseigne la programmation et j'anime les Software Crafters d'Albi.
           </p>
-          <div class="space-y-3">
-            <a href="/code" class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
-              → En savoir plus
-            </a>
-          </div>
+          <span class="text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 font-medium">
+            → En savoir plus
+          </span>
         </div>
-      </div>
+      </a>
 
-      <div class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30">
+      <a href="/theatre" class="group relative overflow-hidden bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-yellow-950/30 dark:to-orange-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-yellow-200/50 dark:border-yellow-800/30 block no-underline">
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">🎭</div>
         <div class="relative z-10">
           <h3 class="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-3">
@@ -76,17 +74,16 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
           <p class="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
             Improvisateur depuis 2008, passé par les Yvelines et le Maroc avant de cofonder Les Particules à Albi. Aujourd'hui je m'attaque aussi au théâtre écrit.
           </p>
-          <div class="space-y-3">
-            <a href="/theatre" class="block text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 font-medium">
-              → Parcours artistique
-            </a>
-          </div>
+          <span class="text-orange-600 dark:text-orange-400 group-hover:text-orange-800 dark:group-hover:text-orange-200 font-medium">
+            → Parcours artistique
+          </span>
         </div>
-      </div>
+      </a>
 
       <div class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-950/30 dark:to-pink-950/30 rounded-3xl p-8 hover:scale-105 transition-all duration-300 border border-purple-200/50 dark:border-purple-800/30">
+        <a href="/photo" class="absolute inset-0 z-0" aria-label="Photographie"></a>
         <div class="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">📸</div>
-        <div class="relative z-10">
+        <div class="relative z-10 pointer-events-none">
           <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">
             Photographie
           </h3>
@@ -94,10 +91,10 @@ import jalilPhoto from "../assets/images/jalil-2.jpg";
             Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
           </p>
           <div class="space-y-3">
-            <a href="/photo" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
+            <span class="block text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 font-medium">
               → Portfolio photo
-            </a>
-            <a href="/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium">
+            </span>
+            <a href="/photo/blog" class="block text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium pointer-events-auto relative z-20">
               → Fil Photo
             </a>
           </div>