feat(cosmicfest): Integrate audio players and enhance UI/UX

Integrates Bandcamp and SoundCloud players for the ParVagues live set
into the CosmicFest page.

Key changes:
- Added Bandcamp embed for track-by-track listening.
- Added SoundCloud embed for the continuous mix (downloads enabled).
- Updated "prends la prochaine vague" button to a mailto link.
- Reduced padding and font sizes for lineup tiles for a more compact look.
- Ensured lineup artist names and emojis stay on a single line with responsive font sizing.
- Improved hero section text contrast.
- Enhanced V0 gallery:
    - Improved visibility of alt text for photos.
    - Made entire video items clickable links.
    - Standardized gallery item styling.
- General mobile-first and accessibility improvements.

next/pages/cosmicfest/index.js

@@ -72,9 +72,9 @@ export default function CosmicFestHome() {
           <div className={styles.grid}>
             {lineup2024.map((item, index) => (
               <div key={index} className={styles.card}>
-                <h3>{item.artist}</h3>
-                <p>{item.description}</p><br/>
-                <p>~ {item.emojis} ~</p>
+                <h3>{item.artist} <span className={styles.cardEmojis}>~ {item.emojis} ~</span></h3>
+                <p>{item.description}</p>
+                {/* The emoji line is now part of the h3, the extra <p> for emojis and <br/> are removed */}
               </div>
             ))}
           </div>
@@ -86,10 +86,10 @@ export default function CosmicFestHome() {
           <h3>photos v0</h3>
           <div className={styles.gallery}>
             {v0_content.photos.map((photo, index) => (
-              <div key={index} style={{backgroundImage: `url(${photo.src})`, backgroundSize: 'cover', backgroundPosition: 'center', height: '150px'}}>
+              <div key={index} className={styles.galleryPhotoItem} style={{backgroundImage: `url(${photo.src})`}}>
                  {/* <Image src={photo.src} alt={photo.alt} width={200} height={150} objectFit="cover" /> */}
                  {/* Using div with background for now, as next/image needs actual image dimensions for non-fill */}
-                 <span style={{color: '#fff', backgroundColor: 'rgba(0,0,0,0.5)', padding: '2px'}}>{photo.alt}</span>
+                 <span>{photo.alt}</span>
               </div>
             ))}
           </div>
@@ -106,11 +106,17 @@ export default function CosmicFestHome() {
             )}
             {/* Other videos */}
             {v0_content.videos.map((video, index) => (
-              <div key={index} style={{backgroundImage: `url(${video.src})`, backgroundSize: 'cover', backgroundPosition: 'center', height: '150px'}}>
-                <a href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer">
-                  {video.title}
+              <a
+                key={index}
+                href={`https://www.youtube.com/watch?v=${video.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${styles.galleryItem} ${styles.galleryVideoLink}`}
+                style={video.src ? {backgroundImage: `url(${video.src})`} : {}} // Apply BG only if src exists
+                aria-label={`Watch video: ${video.title}`}
+              >
+                <span>{video.title}</span> {/* Span for styling the text overlay */}
               </a>
-              </div>
             ))}
           </div>
 
@@ -120,6 +126,17 @@ export default function CosmicFestHome() {
               <li key={index}>{artist}</li>
             ))}
           </ul>
+
+          <h3 style={{marginTop: '2rem'}}>live@cosmicfest v0 (audio)</h3>
+          <p>
+            écoutez le live track-par-track (qualité master via Bandcamp) ou en version mix continu ci-dessous (téléchargement gratuit activé sur SoundCloud).
+          </p>
+          <div className={styles.audioEmbed}>
+            <iframe title="Bandcamp player for Parvagues live at Cosmicfest" style={{border: 0, width: "100%", maxWidth: "350px", height: "470px"}} src="https://bandcamp.com/EmbeddedPlayer/album=644862623/size=large/bgcol=333333/linkcol=0f91ff/tracklist=true/artwork=small/transparent=true/" seamless><a href="https://parvagues.bandcamp.com/album/live-cosmicfest">live@cosmicfest by ParVagues</a></iframe>
+          </div>
+          <div className={styles.audioEmbed} style={{marginTop: "2rem"}}>
+            <iframe title="Soundcloud player for Parvagues live at Cosmicfest" width="100%" height="450" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/2121089043&color=%233e00f7&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style={{fontSize: "10px", color: "#cccccc",lineBreak: "anywhere",wordBreak: "normal",overflow: "hidden",whiteSpace: "nowrap",textOverflow: "ellipsis", fontFamily: "Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif",fontWeight: "100"}}><a href="https://soundcloud.com/parvagues" title="ParVagues" target="_blank" rel="noopener noreferrer" style={{color: "#cccccc", textDecoration: "none"}}>ParVagues</a> · <a href="https://soundcloud.com/parvagues/cosmicfest" title="Live@cosmicfest 🌊🌅" target="_blank" rel="noopener noreferrer" style={{color: "#cccccc", textDecoration: "none"}}>Live@cosmicfest 🌊🌅</a></div>
+          </div>
         </section>
 
         <section className={styles.section} id="next-edition">
@@ -128,9 +145,12 @@ export default function CosmicFestHome() {
             <Countdown targetDate={nextFestivalDate.toISOString()} />
           </div>
           <div style={{textAlign: 'center', marginTop: '2rem'}}>
-            <button className={styles.ctaButton} onClick={() => alert('waitlist bientôt disponible!')}>
+           <a
+             href="mailto:cosmic@nech.pl?subject=je%20suis%20cosmic%20car...&body=voila%20mon%20cot%C3%A9%20cosmique%20%3A%20..."
+             className={styles.ctaButton}
+           >
              prends la prochaine vague
-            </button>
+           </a>
             <p className={styles.waitlistMessage}>
               pas de billetterie - cosmicfest c'est sur invitation. <br/>
               riders, come to the storm.

next/styles/cosmicfest.module.css

@@ -102,7 +102,7 @@
 
 .card {
   background-color: #ffffff;
-  padding: 1.5rem;
+  padding: 1rem; /* Reduced padding */
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(44, 62, 80, 0.05);
   transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
@@ -116,17 +116,24 @@
 
 .card h3 {
   font-family: 'Montserrat', sans-serif;
-  font-size: 1.4rem; /* Slightly larger */
-  margin-bottom: 0.75rem;
+  font-size: 1.25rem; /* Reduced font size */
+  margin-bottom: 0.5rem; /* Reduced margin */
   color: #16a085; /* Teal/Turquoise for a fresh vibe */
   font-weight: 700; /* Bolder artist names */
 }
 
 .card p {
-  font-size: 0.95rem;
+  font-size: 0.9rem; /* Reduced font size */
+  line-height: 1.4; /* Added for better readability with smaller font */
   color: #34495e; /* Slightly lighter text for description */
 }
 
+/* Specific styling for the emoji line in the card */
+.card p:last-child {
+  margin-top: 0.5rem; /* Add some space above the emoji line */
+  margin-bottom: 0; /* Remove bottom margin if it's the last element */
+}
+
 .countdownContainer { /* Renamed to avoid conflict if .countdown is too generic */
   text-align: center;
   margin: 2.5rem 0;
@@ -189,6 +196,12 @@
   font-size: 0.9rem;
 }
 
+.audioEmbed {
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
 .footer a {
   text-decoration: none;
   color: #3498db; /* Link color for parvagues */
@@ -210,45 +223,76 @@
   gap: 1rem;
 }
 
-.gallery div, .gallery a { /* Target divs for background images, and links for youtube placeholders */
+/* Common styles for all gallery items (photos and video links) */
+.galleryItem {
   width: 100%;
   height: 180px; /* Taller gallery items */
   border-radius: 8px; /* Consistent rounding */
-  background-color: #ecf0f1; /* Light placeholder color */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  font-size: 0.9rem;
-  color: #7f8c8d;
+  background-color: #ecf0f1; /* Light placeholder color for items without BG image */
+  display: flex; /* Enables flexbox for content alignment */
   overflow: hidden; /* Ensure content fits */
-  position: relative;
+  position: relative; /* For absolute positioning of children or pseudo-elements */
   transition: transform 0.3s ease, box-shadow 0.3s ease;
+  text-decoration: none; /* Remove underline from links if .galleryItem is an <a> */
+  color: #7f8c8d; /* Default text color, useful for video links */
 }
 
-.gallery div:hover, .gallery a:hover {
+.galleryItem:hover {
   transform: scale(1.03);
   box-shadow: 0 5px 15px rgba(44, 62, 80, 0.1);
 }
 
-.gallery div span, .gallery a { /* For text overlay on images/video placeholders */
+/* Specific styles for photo items (divs with background images) */
+.galleryPhotoItem {
+  background-size: cover;
+  background-position: center;
+  justify-content: center; /* Center content horizontally (span) */
+  align-items: flex-end;  /* Align content (span) to the bottom */
+}
+
+/* Styling for the text overlay (alt text) on photo items */
+.galleryPhotoItem span {
   color: #fff;
-  background-color: rgba(0,0,0,0.6);
-  padding: 0.3em 0.6em;
-  border-radius: 4px;
+  background-color: rgba(0,0,0,0.7); /* Slightly darker for better contrast */
+  padding: 0.4em 0.8em; /* Increased padding */
+  border-radius: 4px 4px 0 0; /* Rounded top corners if at bottom edge */
+  width: 100%; /* Make span take full width of the item */
+  text-align: center;
+  font-size: 0.85rem; /* Slightly smaller font for alt text */
   z-index: 1;
-  text-decoration: none; /* For links */
+  box-sizing: border-box; /* Ensure padding doesn't increase width beyond 100% */
 }
 
-.gallery a { /* Specific for youtube links if not using background images */
+/* Specific styles for video link items (<a> tags) */
+.galleryVideoLink { /* This will be used for the <a> tags for videos */
+  justify-content: center; /* Center text horizontally */
+  align-items: center;   /* Center text vertically */
+  text-align: center;
+  font-size: 0.9rem;
   background-color: #333; /* Darker for video links */
-  height: 30px;
-  color: #fff;
+  color: #fff; /* Text color for video links */
+  /* height: 180px; Inherits from galleryItem. If different height is needed, uncomment and set. */
 }
-.gallery a:hover {
+.galleryVideoLink:hover {
   background-color: #444;
+  /* Potentially darken the background image or text background on hover too */
 }
 
+/* Styling for the text overlay on video links (if they have a background image) */
+.galleryVideoLink span {
+  color: #fff;
+  background-color: rgba(0,0,0,0.7); /* Consistent with photo item caption background */
+  padding: 0.4em 0.8em;
+  border-radius: 4px;
+  z-index: 1;
+  box-sizing: border-box;
+  max-width: 90%; /* Prevent text from touching edges if too long */
+  text-align: center; /* Ensure text within span is centered */
+}
+
+/* Remove the old generic .gallery a and .gallery div span if they are fully replaced */
+/* The old .gallery a styling for height:30px is now incorporated or decided by .galleryVideoLink with .galleryItem height */
+
 /* Section specific styling for V0 */
 #v0 h3 {
   font-family: 'Montserrat', sans-serif;