Accueil : clarifier les 3 activités dans le hero avec phrase d'accroche et 3 boutons colorés (FR/EN/AR)

src/components/photo/ExploreSection.astro

@@ -1,6 +1,8 @@
 ---
+import { Image } from 'astro:assets';
 import { getLocalizedCollection } from '../../utils/content-i18n';
 import { t, getPhotoBlogPath, getPhotoAlbumsPath, type Locale } from '../../utils/i18n';
+import exhibitionImage from '../../assets/images/a-nous-les-chemins.jpg';
 
 interface Props {
   lang?: Locale;
@@ -11,34 +13,123 @@ const { lang = 'fr' } = Astro.props;
 // Récupérer les catégories filtrées par langue
 const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
   .sort((a, b) => (a.data.order || 99) - (b.data.order || 99));
+
+const exhibition = {
+  fr: {
+    label: "Exposition en cours",
+    title: "« À nous les chemins ! »",
+    description: "Exposition collective itinérante de photographies avec l'association Albi Tadam, dans le cadre de « En 2026, la culture sillonne le Tarn ».",
+    venues: [
+      { dates: "4 avril – 25 mai", place: "Musée-mine départemental, Cagnac-les-Mines" },
+      { dates: "1er – 26 juin", place: "Mairie de Pampelonne" },
+      { dates: "1er – 31 juillet", place: "Communauté de Communes Sor et Agout, Saïx" },
+      { dates: "4 – 28 août", place: "Musée de la vie paysanne, Rieumontagné" },
+      { dates: "3 – 30 sept.", place: "Pan'art, Castres" },
+      { dates: "6 – 31 oct.", place: "Médiathèque, Saint-Sulpice" },
+      { dates: "4 – 28 nov.", place: "Espace Reynès, Albi" },
+      { dates: "1er – 24 déc.", place: "Archives départementales du Tarn, Albi" },
+    ],
+    vernissage: "Vernissage le samedi 18 avril à 17h au Musée-mine départemental, Cagnac-les-Mines.",
+    free: "Entrée libre",
+    imageAlt: "Affiche de l'exposition « À nous les chemins ! » par Albi Tadam — escalier illuminé aux couleurs bleu, blanc, rouge, photo de Candic Clavel-Deandington",
+  },
+  en: {
+    label: "Current exhibition",
+    title: '"The Paths Are Ours!"',
+    description: "Itinerant collective photography exhibition with the Albi Tadam association, as part of 'In 2026, culture travels through the Tarn'.",
+    venues: [
+      { dates: "April 4 – May 25", place: "Musée-mine départemental, Cagnac-les-Mines" },
+      { dates: "June 1 – 26", place: "Mairie de Pampelonne" },
+      { dates: "July 1 – 31", place: "Communauté de Communes Sor et Agout, Saïx" },
+      { dates: "Aug. 4 – 28", place: "Musée de la vie paysanne, Rieumontagné" },
+      { dates: "Sept. 3 – 30", place: "Pan'art, Castres" },
+      { dates: "Oct. 6 – 31", place: "Médiathèque, Saint-Sulpice" },
+      { dates: "Nov. 4 – 28", place: "Espace Reynès, Albi" },
+      { dates: "Dec. 1 – 24", place: "Archives départementales du Tarn, Albi" },
+    ],
+    vernissage: "Opening reception: Saturday, April 18 at 5 PM, Musée-mine départemental, Cagnac-les-Mines.",
+    free: "Free admission",
+    imageAlt: "Exhibition poster 'The Paths Are Ours!' by Albi Tadam — stairway lit in blue, white and red, photo by Candic Clavel-Deandington",
+  },
+  ar: {
+    label: "معرض جارٍ",
+    title: "« !الدروب لنا »",
+    description: "معرض تصوير جماعي متنقل مع جمعية ألبي تادام، ضمن برنامج « في 2026، الثقافة تجوب التارن ».",
+    venues: [
+      { dates: "4 أبريل – 25 مايو", place: "متحف المنجم الإقليمي، كانياك لي مين" },
+      { dates: "1 – 26 يونيو", place: "بلدية بامبلون" },
+      { dates: "1 – 31 يوليو", place: "مجموعة بلديات سور وأغو، سايكس" },
+      { dates: "4 – 28 أغسطس", place: "متحف الحياة الريفية، ريومونتانيي" },
+      { dates: "3 – 30 سبتمبر", place: "بان آر، كاستر" },
+      { dates: "6 – 31 أكتوبر", place: "المكتبة الوسائطية، سان سولبيس" },
+      { dates: "4 – 28 نوفمبر", place: "فضاء رينيس، ألبي" },
+      { dates: "1 – 24 ديسمبر", place: "الأرشيف الإقليمي للتارن، ألبي" },
+    ],
+    vernissage: "حفل الافتتاح: السبت 18 أبريل الساعة 17:00، متحف المنجم الإقليمي، كانياك لي مين.",
+    free: "الدخول مجاني",
+    imageAlt: "ملصق معرض « !الدروب لنا » من ألبي تادام — درج مضاء بالأزرق والأبيض والأحمر",
+  },
+};
+
+const exh = exhibition[lang];
 ---
 
 <section id="explore-section" class="explore-section">
   <div class="explore-content">
-    <div class="explore-card">
+    <div class="exhibition-banner">
-      <h2 class="explore-card-title">{t('photo', 'categories', lang)}</h2>
+      <div class="exhibition-layout">
-      <p class="explore-card-desc">{t('photo', 'browseByTheme', lang)}</p>
+        <a href="https://rdvculturels.tarn.fr/ressources/les-expositions-et-conferences/exposition-itinerante-a-nous-les-chemins" target="_blank" rel="noopener noreferrer" class="exhibition-image">
-      <ul class="category-list">
+          <Image
-        {sortedCategories.map(cat => (
+            src={exhibitionImage}
-          <li>
+            alt={exh.imageAlt}
-            <a href={`${getPhotoAlbumsPath(lang)}/${cat.id.replace(/\.(en|ar)$/, '')}`} class="category-link">
+            width={240}
-              {cat.data.title}
+            class="exhibition-img"
-            </a>
+          />
-          </li>
+        </a>
-        ))}
+        <div class="exhibition-info">
-      </ul>
+          <span class="exhibition-label">{exh.label}</span>
+          <h2 class="explore-card-title">{exh.title}</h2>
+          <p class="explore-card-desc">{exh.description}</p>
+          <ul class="venue-list">
+            {exh.venues.map((v) => (
+              <li class="venue-item">
+                <span class="venue-dates">{v.dates}</span>
+                <span class="venue-place">{v.place}</span>
+              </li>
+            ))}
+          </ul>
+          <p class="exhibition-vernissage">{exh.vernissage}</p>
+          <p class="exhibition-free">{exh.free}</p>
+        </div>
+      </div>
     </div>
 
-    <div class="explore-card">
+    <div class="explore-row">
-      <h2 class="explore-card-title">{t('photo', 'photoFeed', lang)}</h2>
+      <div class="explore-card">
-      <p class="explore-card-desc">{t('photo', 'feedDescription', lang)}</p>
+        <h2 class="explore-card-title">{t('photo', 'categories', lang)}</h2>
-      <a href={getPhotoBlogPath(lang)} class="explore-cta">
+        <p class="explore-card-desc">{t('photo', 'browseByTheme', lang)}</p>
-        {t('photo', 'viewFeed', lang)}
+        <ul class="category-list">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          {sortedCategories.map(cat => (
-          <line x1="5" y1="12" x2="19" y2="12"/>
+            <li>
-          <polyline points="12 5 19 12 12 19"/>
+              <a href={`${getPhotoAlbumsPath(lang)}/${cat.id.replace(/\.(en|ar)$/, '')}`} class="category-link">
-        </svg>
+                {cat.data.title}
-      </a>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div class="explore-card">
+        <h2 class="explore-card-title">{t('photo', 'photoFeed', lang)}</h2>
+        <p class="explore-card-desc">{t('photo', 'feedDescription', lang)}</p>
+        <a href={getPhotoBlogPath(lang)} class="explore-cta">
+          {t('photo', 'viewFeed', lang)}
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="5" y1="12" x2="19" y2="12"/>
+            <polyline points="12 5 19 12 12 19"/>
+          </svg>
+        </a>
+      </div>
     </div>
   </div>
 </section>
@@ -69,11 +160,17 @@ const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
 
 .explore-content {
   display: flex;
+  flex-direction: column;
   gap: 3rem;
   max-width: 900px;
   width: 100%;
 }
 
+.explore-row {
+  display: flex;
+  gap: 3rem;
+}
+
 .explore-card {
   flex: 1;
   padding: 2rem;
@@ -96,6 +193,82 @@ const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
   line-height: 1.5;
 }
 
+/* Exhibition banner */
+.exhibition-banner {
+  padding: 2rem;
+  background: rgba(16, 185, 129, 0.08);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  border-radius: 12px;
+}
+
+.exhibition-layout {
+  display: flex;
+  gap: 2rem;
+  align-items: flex-start;
+}
+
+.exhibition-image {
+  flex-shrink: 0;
+}
+
+.exhibition-img {
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.exhibition-info {
+  flex: 1;
+}
+
+.exhibition-label {
+  display: inline-block;
+  padding: 0.25rem 0.7rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(16, 185, 129, 0.9);
+  background: rgba(16, 185, 129, 0.15);
+  border-radius: 20px;
+}
+
+.venue-list {
+  list-style: none;
+  margin: 0 0 1rem;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem 2rem;
+}
+
+.venue-item {
+  font-size: 0.85rem;
+}
+
+.venue-dates {
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.venue-place {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.exhibition-vernissage {
+  margin: 0 0 0.25rem;
+  font-size: 0.85rem;
+  font-style: italic;
+  color: rgba(16, 185, 129, 0.7);
+}
+
+.exhibition-free {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: rgba(16, 185, 129, 0.9);
+}
+
 .category-list {
   list-style: none;
   margin: 0;
@@ -146,7 +319,7 @@ const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
     padding: 3rem 1.25rem;
   }
 
-  .explore-content {
+  .explore-row {
     flex-direction: column;
     gap: 2rem;
   }
@@ -154,5 +327,23 @@ const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
   .explore-card {
     padding: 1.5rem;
   }
+
+  .exhibition-layout {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .exhibition-image {
+    display: flex;
+    justify-content: center;
+  }
+
+  .exhibition-banner {
+    padding: 1.5rem;
+  }
+
+  .venue-list {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

src/components/photo/PhotoGallery.astro

@@ -1,7 +1,6 @@
 ---
 import CategoryNav from './CategoryNav.astro';
 import Slideshow from './Slideshow.astro';
-import SlideControls from './SlideControls.astro';
 import favorites from '../../data/favorites.json';
 import type { Locale } from '../../utils/i18n';
 
@@ -54,7 +53,6 @@ const imagesForJS = JSON.stringify(images.map(img => ({
 <div id="photo-gallery" class="gallery-container">
   <CategoryNav currentCategory="" lang={lang} />
   <Slideshow images={images} lang={lang} />
-  <SlideControls lang={lang} />
 </div>
 
 <script is:inline define:vars={{ imagesForJS }}>

src/pages/ar/index.astro

@@ -32,15 +32,21 @@ const recommendationCount = (await getCollection("recommendations")).length;
           مطوّر • مصوّر • ممثل
         </h2>
         <p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
-          أكتب الكود من أجل عالم أكثر عدلًا، وأصعد على الخشبة لأجل الباقي. أو العكس.
+          ثلاثة أنشطة، محرّك واحد: الفضول. أصمّم البرمجيات، أصوّر ما حولي، وأصعد على الخشبة.
         </p>
 
-        <div class="flex flex-wrap gap-4">
+        <div class="flex flex-wrap gap-3">
-          <a href="/ar/برمجة" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
+          <a href="/ar/برمجة" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
-            اكتشف أعمالي
+            برمجة
           </a>
-          <a href="/ar/نبذة-عني" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
+          <a href="/ar/تصوير" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-600 rounded-full hover:bg-slate-700 transition-colors duration-200">
-            تعرّف عليّ أكثر
+            تصوير
+          </a>
+          <a href="/ar/مسرح" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-amber-600 rounded-full hover:bg-amber-700 transition-colors duration-200">
+            مسرح
+          </a>
+          <a href="/ar/نبذة-عني" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
+            نبذة عنّي
           </a>
         </div>
       </div>
@@ -134,9 +140,14 @@ const recommendationCount = (await getCollection("recommendations")).length;
             <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
               التصوير
             </h3>
-            <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
+            <p class="text-slate-600 dark:text-slate-300 mb-4 leading-relaxed">
               أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
             </p>
+            <div class="mb-4 px-3 py-2 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-800/40 rounded-xl">
+              <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">
+                معرض متنقل « !الدروب لنا » مع ألبي تادام — أبريل إلى ديسمبر 2026، في التارن
+              </p>
+            </div>
             <div class="space-y-3">
               <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
                 ← معرض الصور

src/pages/en/index.astro

@@ -32,15 +32,21 @@ const recommendationCount = (await getCollection("recommendations")).length;
           Software Craftsman • Photographer • Actor
         </h2>
         <p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
-          I write code for a fairer world and get on stage for the rest. Or the other way around.
+          Three pursuits, one driving force: curiosity. I build software, photograph what surrounds me, and perform on stage.
         </p>
 
-        <div class="flex flex-wrap gap-4">
+        <div class="flex flex-wrap gap-3">
-          <a href="/en/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
+          <a href="/en/code" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
-            View my work
+            Code
           </a>
-          <a href="/en/about" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
+          <a href="/en/photo" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-600 rounded-full hover:bg-slate-700 transition-colors duration-200">
-            Learn more
+            Photo
+          </a>
+          <a href="/en/theater" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-amber-600 rounded-full hover:bg-amber-700 transition-colors duration-200">
+            Theater
+          </a>
+          <a href="/en/about" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
+            About
           </a>
         </div>
       </div>
@@ -134,9 +140,14 @@ const recommendationCount = (await getCollection("recommendations")).length;
             <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
               Photography
             </h3>
-            <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
+            <p class="text-slate-600 dark:text-slate-300 mb-4 leading-relaxed">
               I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
             </p>
+            <div class="mb-4 px-3 py-2 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-800/40 rounded-xl">
+              <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">
+                Itinerant exhibition "The Paths Are Ours!" with Albi Tadam — April to December 2026, in the Tarn
+              </p>
+            </div>
             <div class="space-y-3">
               <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
                 → Photo portfolio

src/pages/index.astro

@@ -32,15 +32,21 @@ const recommendationCount = (await getCollection("recommendations")).length;
           Développeur • Photographe • Comédien
         </h2>
         <p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
-          Je code pour un monde plus juste et je monte sur scène pour le reste. Ou l'inverse.
+          Trois activités, un même moteur : la curiosité. Je conçois du logiciel, je photographie ce qui m'entoure et je monte sur scène.
         </p>
-        
+
-        <div class="flex flex-wrap gap-4">
+        <div class="flex flex-wrap gap-3">
-          <a href="/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
+          <a href="/code" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
-            Voir mon travail
+            Code
           </a>
-          <a href="/a-propos" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
+          <a href="/photo" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-600 rounded-full hover:bg-slate-700 transition-colors duration-200">
-            En savoir plus
+            Photo
+          </a>
+          <a href="/theatre" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-amber-600 rounded-full hover:bg-amber-700 transition-colors duration-200">
+            Théâtre
+          </a>
+          <a href="/a-propos" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
+            À propos
           </a>
         </div>
       </div>
@@ -134,9 +140,14 @@ const recommendationCount = (await getCollection("recommendations")).length;
             <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
               Photographie
             </h3>
-            <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
+            <p class="text-slate-600 dark:text-slate-300 mb-4 leading-relaxed">
               Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
             </p>
+            <div class="mb-4 px-3 py-2 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-800/40 rounded-xl">
+              <p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">
+                Expo itinérante « À nous les chemins ! » avec Albi Tadam — avril à décembre 2026, dans le Tarn
+              </p>
+            </div>
             <div class="space-y-3">
               <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
                 → Portfolio photo
@@ -151,7 +162,7 @@ const recommendationCount = (await getCollection("recommendations")).length;
     </div>
   </div>
 
-  <!-- Blog Section 
+  <!-- Blog Section
   <div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
     <div class="text-center mb-12">
       <h2 class="text-3xl font-bold text-neutral-800 dark:text-neutral-200 mb-4">