From 2f88f9a201a3dd3914ee50cb11ecedb441bf191b Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 11 Aug 2025 19:31:56 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20restructure=20la=20page=20=C3=A9v=C3=A9?=
 =?UTF-8?q?nement=20avec=20un=20nouveau=20layout=20et=20am=C3=A9liore=20le?=
 =?UTF-8?q?s=20styles=20pour=20une=20meilleure=20lisibilit=C3=A9=20et=20ad?=
 =?UTF-8?q?aptabilit=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/evenements/[slug].astro | 225 ++++++++++++++++++++++--------
 1 file changed, 167 insertions(+), 58 deletions(-)

diff --git a/src/pages/evenements/[slug].astro b/src/pages/evenements/[slug].astro
index 0d11bce..0dfc8e4 100644
--- a/src/pages/evenements/[slug].astro
+++ b/src/pages/evenements/[slug].astro
@@ -35,32 +35,49 @@ const Wrapper = lieuUrl ? 'a' : 'div'
         )}
     </div>
     
-    <h1>{nom}</h1>
-    <div class="content">
-        {affiche && <img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />}
-        <div class="infos">
-            <Card title={date ? new Date(date as string).toLocaleDateString("fr-FR") : ""}>
-                <div>
+    <header class="event-header">
+        <h1>{nom}</h1>
+        <div class="event-meta">
+            <span class="event-date">{date ? new Date(date as string).toLocaleDateString("fr-FR") : ""}</span>
+            {lieu && (
+                <span class="event-location">
                     à <Wrapper target="_blank" href={lieuUrl}>{lieu}</Wrapper>
-                </div>
-                {
-                    description && <article set:html={documentToHtmlString(description)} />
-                }
-            </Card>
-            
-            {album && (
-                <div class="album">
-                    <div class="flickr-embed">
-                        <iframe 
-                            src={`${album}/player/`}
-                            width="100%" 
-                            height="500" 
-                            frameborder="0" 
-                            allowfullscreen
-                        ></iframe>
-                    </div>
+                </span>
+            )}
+        </div>
+    </header>
+    
+    <div class="event-content">
+        <div class="content-grid">
+            {affiche && (
+                <div class="affiche-section">
+                    <img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />
                 </div>
             )}
+            
+            <div class="description-section">
+                {description && (
+                    <div class="description-card">
+                        <h2>Le spectacle</h2>
+                        <article set:html={documentToHtmlString(description)} />
+                    </div>
+                )}
+                
+                {album && (
+                    <div class="gallery-section">
+                        <h2>Retour en photo</h2>
+                        <div class="flickr-embed">
+                            <iframe 
+                                src={`${album}/player/`}
+                                width="100%" 
+                                height="500" 
+                                frameborder="0" 
+                                allowfullscreen
+                            ></iframe>
+                        </div>
+                    </div>
+                )}
+            </div>
         </div>
     </div>
     
@@ -92,42 +109,110 @@ const Wrapper = lieuUrl ? 'a' : 'div'
 </style>
 
 <style>
-    .content {
+    /* Structure principale */
+    .event-header {
+        background: white;
+        padding: 2rem;
+        margin-bottom: 3rem;
+        border-radius: 0.5rem;
+        box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1);
+        border-left: 5px solid orange;
+    }
+    
+    .event-header h1 {
+        margin: 0 0 1rem 0;
+        font-size: 2.5rem;
+        color: rgb(17,17,17);
+    }
+    
+    .event-meta {
         display: flex;
         gap: 2rem;
-        align-items: flex-start;
+        align-items: center;
+        color: rgb(68,68,68);
+        font-size: 1.1rem;
     }
     
-    .content > img {
-        flex: 0 0 30%;
-        max-width: 30%;
+    .event-date {
+        font-weight: bold;
+        color: orange;
+    }
+    
+    .event-location a {
+        color: rgb(68,68,68);
+        text-decoration: underline;
+    }
+    
+    .event-location a:hover {
+        color: orange;
+    }
+    
+    .event-content {
+        margin-bottom: 3rem;
+    }
+    
+    .content-grid {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        gap: 3rem;
+        margin-bottom: 4rem;
+        align-items: start;
+    }
+    
+    .description-section {
+        display: flex;
+        flex-direction: column;
+        gap: 3rem;
+    }
+    
+    .affiche-section {
+        position: sticky;
+        top: 2rem;
+    }
+    
+    .affiche-section img {
+        width: 100%;
         height: auto;
-        margin: 0;
-        object-fit: contain;
+        border-radius: 0.5rem;
+        box-shadow: 0.3em 0.3em 1.5em rgba(0,0,0,0.3);
     }
     
-    .infos {
-        flex: 1;
+    .description-card {
+        background: white;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1);
+    }
+    
+    .description-card h2 {
+        margin: 0 0 1.5rem 0;
+        color: rgb(17,17,17);
+        font-size: 1.5rem;
+        border-bottom: 2px solid orange;
+        padding-bottom: 0.5rem;
     }
 
-    article {
-        font-size: 1.2em;
-    }
-    
-    .album {
-        margin: 2rem 0;
-        padding: 0;
-        width: 100%;
-        max-width: 80ch; /* Même largeur max que la Card */
-        box-sizing: border-box;
-    }
-    
-    .album h2 {
-        font-size: 1.8rem;
-        margin-bottom: 1rem;
+    .description-card article {
+        font-size: 1.1em;
+        line-height: 1.6;
         color: rgb(68,68,68);
     }
     
+    .gallery-section {
+        background: white;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1);
+    }
+    
+    .gallery-section h2 {
+        margin: 0 0 1.5rem 0;
+        color: rgb(17,17,17);
+        font-size: 1.5rem;
+        border-bottom: 2px solid orange;
+        padding-bottom: 0.5rem;
+    }
+    
     .flickr-embed {
         text-align: center;
     }
@@ -199,18 +284,42 @@ const Wrapper = lieuUrl ? 'a' : 'div'
         transform: translateX(-3px);
     }
 
-    @media (max-width: 48em) {
-        .content {
-            flex-direction: column;
+    @media (max-width: 768px) {
+        .event-header {
+            padding: 1.5rem;
+            margin-bottom: 2rem;
         }
-
-        .content > img {
-            width: 100%;
-            max-width: 400px;
-            border: black solid 0.1em;
-            border-radius: 1em;
-            margin: 0 auto 1em;
-            box-shadow: 0.2em 0.2em 1em black;
+        
+        .event-header h1 {
+            font-size: 2rem;
+        }
+        
+        .event-meta {
+            flex-direction: column;
+            gap: 0.5rem;
+            align-items: flex-start;
+        }
+        
+        .content-grid {
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+        
+        .affiche-section {
+            position: static;
+            order: -1;
+        }
+        
+        .affiche-section img {
+            max-width: 300px;
+            margin: 0 auto;
+            display: block;
+        }
+        
+        .description-card,
+        .gallery-section {
+            padding: 1.5rem;
         }
         
         .navigation-header {