From 5946c7b61e63589dfa73a8cc1b92fc14eede9d50 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 9 Mar 2026 18:16:14 +0100
Subject: [PATCH] Afficher l'affiche du spectacle dans les lignes d'agenda

---
 src/pages/agenda/index.astro | 48 +++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/pages/agenda/index.astro b/src/pages/agenda/index.astro
index 425bdbd..f13b8f6 100644
--- a/src/pages/agenda/index.astro
+++ b/src/pages/agenda/index.astro
@@ -32,38 +32,34 @@ const now = new Date();
           return (
             <div
               class:list={[
-                'fade-up group relative flex flex-col md:flex-row gap-6 md:gap-10 p-6 md:p-10 rounded-[32px] md:rounded-[40px] border transition-all',
+                'fade-up group relative flex flex-col md:flex-row md:items-center gap-5 md:gap-8 p-5 md:p-6 rounded-[28px] md:rounded-[32px] border transition-all overflow-hidden',
                 isPast
                   ? 'opacity-40 grayscale bg-night/5 border-transparent'
-                  : 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.02]',
+                  : 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.01]',
               ]}
               style={`transition-delay: ${index * 0.1}s`}
             >
-              <!-- Date Block -->
-              <div class="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-36 md:h-36 rounded-[24px] md:rounded-[32px] bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg mx-auto md:mx-0">
-                <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80 mb-1">
+              <!-- Date -->
+              <div class="flex-shrink-0 flex flex-col items-center justify-center w-16 h-24 md:w-20 md:h-28 rounded-xl md:rounded-2xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
+                <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80">
                   {dateObj.toLocaleString('fr-FR', { month: 'short' })}
                 </span>
-                <span class="font-display text-4xl md:text-6xl">
+                <span class="font-display text-3xl md:text-4xl leading-none">
                   {dateObj.getDate()}
                 </span>
-                <span class="font-sans text-[10px] md:text-xs font-bold opacity-60 mt-1">
+                <span class="font-sans text-[10px] md:text-xs font-bold opacity-60">
                   {dateObj.getFullYear()}
                 </span>
               </div>
 
               <!-- Info Block -->
-              <div class="flex-grow flex flex-col justify-center space-y-3 md:space-y-4 text-center md:text-left">
-                <div class="flex items-center justify-center md:justify-start gap-3">
-                  <Icon name="lucide:sparkles" size={14} class="text-dream-coral" />
-                  <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">
-                    {spectacle?.title}
-                  </span>
+              <div class="flex-grow flex flex-col justify-center space-y-1.5 md:space-y-2">
+                <div class="flex items-center gap-2">
                   {isPast && <span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>}
                 </div>
-                <h3 class="font-display text-2xl md:text-4xl text-night">{spectacle?.title}</h3>
-                <div class="flex items-center justify-center md:justify-start gap-3 text-night/50 font-sans font-bold text-[10px] md:text-sm uppercase tracking-widest">
-                  <Icon name="lucide:map-pin" size={16} class="text-dream-blue" />
+                <h3 class="font-display text-xl md:text-3xl text-night leading-tight">{spectacle?.title}</h3>
+                <div class="flex items-center gap-2 text-night/50 font-sans font-bold text-[10px] md:text-sm uppercase tracking-widest">
+                  <Icon name="lucide:map-pin" size={14} class="text-dream-blue" />
                   <span>{event.location}</span>
                 </div>
               </div>
@@ -75,18 +71,30 @@ const now = new Date();
                     href={event.bookingLink}
                     target="_blank"
                     rel="noreferrer"
-                    class="w-full md:w-auto flex items-center justify-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
+                    class="w-full md:w-auto flex items-center justify-center gap-3 bg-night text-cloud px-6 py-3 md:px-8 md:py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
                   >
-                    <Icon name="lucide:ticket" size={20} />
+                    <Icon name="lucide:ticket" size={18} />
                     Réserver
                   </a>
                 ) : (
-                  <div class="w-full md:w-auto flex items-center justify-center gap-2 border-2 border-dashed border-night/10 text-night/30 px-8 py-4 rounded-full font-sans text-sm font-bold uppercase tracking-widest italic">
-                    <Icon name="lucide:info" size={18} />
+                  <div class="w-full md:w-auto flex items-center justify-center gap-2 border-2 border-dashed border-night/10 text-night/30 px-6 py-3 md:px-8 md:py-4 rounded-full font-sans text-sm font-bold uppercase tracking-widest italic">
+                    <Icon name="lucide:info" size={16} />
                     Sur place
                   </div>
                 )}
               </div>
+
+              <!-- Affiche -->
+              {spectacle?.affiche && (
+                <a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0 order-first md:order-last">
+                  <img
+                    src={`${spectacle.affiche}/m/0x200`}
+                    alt={`Affiche ${spectacle.title}`}
+                    class="w-16 h-24 md:w-20 md:h-28 rounded-xl md:rounded-2xl shadow-md object-cover"
+                    loading="lazy"
+                  />
+                </a>
+              )}
             </div>
           );
         })}