From fe539d4f4ab75e6ae3bcc49dc42cefddb882e111 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 9 Mar 2026 22:24:28 +0100
Subject: [PATCH] =?UTF-8?q?Revoir=20le=20layout=20mobile=20de=20l'agenda?=
 =?UTF-8?q?=20:=20date=20et=20lieu=20lisibles,=20affiche=20en=20rep=C3=A8r?=
 =?UTF-8?q?e=20visuel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/pages/agenda/index.astro b/src/pages/agenda/index.astro
index e8e3da6..fc32b07 100644
--- a/src/pages/agenda/index.astro
+++ b/src/pages/agenda/index.astro
@@ -32,64 +32,120 @@ const now = new Date();
           return (
             <div
               class:list={[
-                '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',
+                'fade-up group relative 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.01]',
               ]}
               style={`transition-delay: ${index * 0.1}s`}
             >
-              <!-- 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-3xl md:text-4xl leading-none">
-                  {dateObj.getDate()}
-                </span>
-                <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-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>}
+              {/* Mobile */}
+              <div class="md:hidden flex flex-row items-center gap-3 p-3">
+                {/* Date — info principale */}
+                <div class="flex-shrink-0 flex flex-col items-center justify-center w-18 h-22 rounded-xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg px-2 py-2">
+                  <span class="font-sans text-[10px] font-bold uppercase tracking-widest opacity-80">
+                    {dateObj.toLocaleString('fr-FR', { month: 'short' })}
+                  </span>
+                  <span class="font-display text-3xl leading-none">
+                    {dateObj.getDate()}
+                  </span>
+                  <span class="font-sans text-[10px] font-bold opacity-60">
+                    {dateObj.getFullYear()}
+                  </span>
                 </div>
-                <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>
 
-              <!-- Action Block -->
-              {event.bookingLink && (
-                <div class="flex-shrink-0 flex items-center">
-                  <a
-                    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-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={18} />
-                    Réserver
+                {/* Titre + lieu */}
+                <div class="flex-grow min-w-0 space-y-1">
+                  {isPast && (
+                    <span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>
+                  )}
+                  <h3 class="font-display text-lg text-night leading-tight truncate">{spectacle?.title}</h3>
+                  <div class="flex items-start gap-1.5 text-night/60 font-sans text-sm">
+                    <Icon name="lucide:map-pin" size={14} class="text-dream-blue flex-shrink-0 mt-0.5" />
+                    <span>{event.location}</span>
+                  </div>
+                  {event.bookingLink && (
+                    <a
+                      href={event.bookingLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      class="inline-flex items-center gap-1.5 text-dream-coral font-sans font-bold text-xs uppercase tracking-widest"
+                    >
+                      <Icon name="lucide:ticket" size={14} />
+                      Réserver
+                    </a>
+                  )}
+                </div>
+
+                {/* Affiche — repère visuel */}
+                {spectacle?.affiche && (
+                  <a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0">
+                    <img
+                      src={`${spectacle.affiche}/m/0x200`}
+                      alt={`Affiche ${spectacle.title}`}
+                      class="w-16 h-24 rounded-xl shadow-sm object-cover"
+                      loading="lazy"
+                    />
                   </a>
-                </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>
-              )}
+              {/* Desktop: ligne horizontale */}
+              <div class="hidden md:flex md:flex-row md:items-center gap-8 p-6">
+                {/* Date */}
+                <div class="flex-shrink-0 flex flex-col items-center justify-center w-20 h-28 rounded-2xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
+                  <span class="font-sans text-xs font-bold uppercase tracking-widest opacity-80">
+                    {dateObj.toLocaleString('fr-FR', { month: 'short' })}
+                  </span>
+                  <span class="font-display text-4xl leading-none">
+                    {dateObj.getDate()}
+                  </span>
+                  <span class="font-sans text-xs font-bold opacity-60">
+                    {dateObj.getFullYear()}
+                  </span>
+                </div>
+
+                {/* Info */}
+                <div class="flex-grow flex flex-col justify-center space-y-2">
+                  {isPast && (
+                    <div>
+                      <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-3xl text-night leading-tight">{spectacle?.title}</h3>
+                  <div class="flex items-center gap-2 text-night/50 font-sans font-bold text-sm uppercase tracking-widest">
+                    <Icon name="lucide:map-pin" size={14} class="text-dream-blue" />
+                    <span>{event.location}</span>
+                  </div>
+                </div>
+
+                {/* Action */}
+                {event.bookingLink && (
+                  <div class="flex-shrink-0 flex items-center">
+                    <a
+                      href={event.bookingLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      class="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"
+                    >
+                      <Icon name="lucide:ticket" size={18} />
+                      Réserver
+                    </a>
+                  </div>
+                )}
+
+                {/* Affiche */}
+                {spectacle?.affiche && (
+                  <a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0">
+                    <img
+                      src={`${spectacle.affiche}/m/0x200`}
+                      alt={`Affiche ${spectacle.title}`}
+                      class="w-20 h-28 rounded-2xl shadow-md object-cover"
+                      loading="lazy"
+                    />
+                  </a>
+                )}
+              </div>
             </div>
           );
         })}