Appliquer le thème Crépuscule par défaut et supprimer le sélecteur de thème

src/components/ThemeSwitcher.astro

@@ -1,198 +0,0 @@
----
-// Composant temporaire pour prévisualiser les palettes de couleurs.
-// À supprimer une fois le thème choisi.
----
-
-<div id="theme-switcher">
-  <button id="theme-toggle" aria-label="Changer de thème">
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="5"/>
-      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
-    </svg>
-  </button>
-
-  <div id="theme-panel" class="hidden">
-    <span class="panel-title">Palette</span>
-
-    <button data-set-theme="" class="theme-btn active" title="Rêverie (actuel)">
-      <span class="swatch" style="background: linear-gradient(135deg, #E0C3FC, #FF9F89)"></span>
-      <span class="label">Rêverie</span>
-      <span class="desc">Pastels actuels</span>
-    </button>
-
-    <button data-set-theme="crepuscule" class="theme-btn" title="Crépuscule & Cuivre">
-      <span class="swatch" style="background: linear-gradient(135deg, #1A1A2E, #C9956B)"></span>
-      <span class="label">Crépuscule</span>
-      <span class="desc">Cuivre & nuit</span>
-    </button>
-
-    <button data-set-theme="foret" class="theme-btn" title="Forêt enchantée">
-      <span class="swatch" style="background: linear-gradient(135deg, #3D5A47, #D4A843)"></span>
-      <span class="label">Forêt</span>
-      <span class="desc">Mousse & terre</span>
-    </button>
-
-    <button data-set-theme="nuit" class="theme-btn" title="Nuit étoilée">
-      <span class="swatch" style="background: linear-gradient(135deg, #1E1E3F, #C8A961)"></span>
-      <span class="label">Nuit</span>
-      <span class="desc">Sombre & or</span>
-    </button>
-
-    <button data-set-theme="aube" class="theme-btn" title="Aube rosée">
-      <span class="swatch" style="background: linear-gradient(135deg, #6B3A5A, #C0785A)"></span>
-      <span class="label">Aube</span>
-      <span class="desc">Prune & terracotta</span>
-    </button>
-  </div>
-</div>
-
-<style>
-  #theme-switcher {
-    position: fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
-    z-index: 9999;
-    font-family: system-ui, sans-serif;
-  }
-
-  #theme-toggle {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.85);
-    color: white;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s;
-  }
-
-  #theme-toggle:hover {
-    transform: scale(1.1);
-  }
-
-  #theme-panel {
-    position: absolute;
-    bottom: calc(100% + 0.75rem);
-    right: 0;
-    background: rgba(255, 255, 255, 0.97);
-    backdrop-filter: blur(20px);
-    border-radius: 1rem;
-    padding: 1rem;
-    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
-    min-width: 220px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .panel-title {
-    font-size: 0.65rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    color: rgba(0, 0, 0, 0.3);
-    padding: 0 0.5rem 0.5rem;
-  }
-
-  .theme-btn {
-    display: grid;
-    grid-template-columns: 1.75rem 1fr;
-    grid-template-rows: auto auto;
-    column-gap: 0.625rem;
-    row-gap: 0;
-    align-items: center;
-    padding: 0.5rem;
-    border-radius: 0.625rem;
-    border: 2px solid transparent;
-    background: transparent;
-    cursor: pointer;
-    transition: all 0.15s;
-    text-align: left;
-  }
-
-  .theme-btn:hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-
-  .theme-btn.active {
-    background: rgba(0, 0, 0, 0.06);
-    border-color: rgba(0, 0, 0, 0.15);
-  }
-
-  .swatch {
-    grid-row: 1 / 3;
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 0.5rem;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  }
-
-  .label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: #1a1a1a;
-    line-height: 1.2;
-  }
-
-  .desc {
-    font-size: 0.65rem;
-    color: rgba(0, 0, 0, 0.4);
-    line-height: 1.2;
-  }
-
-  .hidden {
-    display: none !important;
-  }
-</style>
-
-<script>
-  const toggle = document.getElementById('theme-toggle')!;
-  const panel = document.getElementById('theme-panel')!;
-  const buttons = panel.querySelectorAll<HTMLButtonElement>('[data-set-theme]');
-
-  // Appliquer le thème sauvegardé
-  const saved = localStorage.getItem('aspireves-theme');
-  if (saved) {
-    document.documentElement.setAttribute('data-theme', saved);
-  }
-
-  function updateActive() {
-    const current = document.documentElement.getAttribute('data-theme') || '';
-    buttons.forEach((btn) => {
-      btn.classList.toggle('active', btn.dataset.setTheme === current);
-    });
-  }
-  updateActive();
-
-  // Toggle du panel
-  toggle.addEventListener('click', () => {
-    panel.classList.toggle('hidden');
-  });
-
-  // Fermer si clic en dehors
-  document.addEventListener('click', (e) => {
-    const switcher = document.getElementById('theme-switcher')!;
-    if (!switcher.contains(e.target as Node)) {
-      panel.classList.add('hidden');
-    }
-  });
-
-  // Changement de thème
-  buttons.forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const theme = btn.dataset.setTheme!;
-      if (theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        localStorage.setItem('aspireves-theme', theme);
-      } else {
-        document.documentElement.removeAttribute('data-theme');
-        localStorage.removeItem('aspireves-theme');
-      }
-      updateActive();
-    });
-  });
-</script>

src/layouts/Layout.astro

@@ -1,7 +1,6 @@
 ---
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
-import ThemeSwitcher from '../components/ThemeSwitcher.astro';
 import '../styles/global.css';
 
 interface Props {
@@ -24,7 +23,5 @@ const { title = 'Compagnie AspiRêves' } = Astro.props;
       <slot />
     </main>
     <Footer />
-    <ThemeSwitcher />
-
   </body>
 </html>

src/pages/agenda/index.astro

@@ -32,61 +32,64 @@ 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>
 
               <!-- Action Block -->
-              <div class="flex-shrink-0 flex items-center">
-                {event.bookingLink ? (
+              {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-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} />
-                    Sur place
-                  </div>
-                )}
-              </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>
           );
         })}

src/styles/global.css

@@ -6,13 +6,13 @@
   --font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
   --font-display: "Fredoka", sans-serif;
 
-  --color-cloud: #F8F7FF;
-  --color-night: #2D2D3A;
-  --color-star: #FFD700;
-  --color-dream-pink: #FFD6E0;
-  --color-dream-blue: #C1D3FE;
-  --color-dream-purple: #E0C3FC;
-  --color-dream-coral: #FF9F89;
+  --color-cloud: #F5EFE6;
+  --color-night: #1A1A2E;
+  --color-star: #C9956B;
+  --color-dream-pink: #E8D5B7;
+  --color-dream-blue: #3A506B;
+  --color-dream-purple: #C9956B;
+  --color-dream-coral: #D4443B;
 }
 
 body {
@@ -114,64 +114,6 @@ body {
   animation: slideDown 0.3s ease forwards;
 }
 
-/* ═══════════════════════════════════════════
-   THÈMES - Sélecteur temporaire de palette
-   ═══════════════════════════════════════════ */
-
-/* Crépuscule & Cuivre — Théâtre classique, velours, projecteurs */
-[data-theme="crepuscule"] {
-  --color-cloud: #F5EFE6;
-  --color-night: #1A1A2E;
-  --color-star: #C9956B;
-  --color-dream-pink: #E8D5B7;
-  --color-dream-blue: #3A506B;
-  --color-dream-purple: #C9956B;
-  --color-dream-coral: #D4443B;
-}
-
-/* Forêt enchantée — Conte, nature mystérieuse, rêve enraciné */
-[data-theme="foret"] {
-  --color-cloud: #F2EDE4;
-  --color-night: #1B2D2A;
-  --color-star: #D4A843;
-  --color-dream-pink: #D4A843;
-  --color-dream-blue: #3D5A47;
-  --color-dream-purple: #7A9E6B;
-  --color-dream-coral: #C17F3E;
-}
-
-/* Nuit étoilée — Scène dans le noir, dramatique, onirique */
-[data-theme="nuit"] {
-  --color-cloud: #0D0D1A;
-  --color-night: #F0ECE2;
-  --color-star: #C8A961;
-  --color-dream-pink: #C8A961;
-  --color-dream-blue: #6B5FB5;
-  --color-dream-purple: #4A3F8A;
-  --color-dream-coral: #C8A961;
-}
-
-/* Nuit étoilée — Overrides pour les bg-white hardcodés */
-[data-theme="nuit"] nav.bg-white\/80,
-[data-theme="nuit"] nav[class*="bg-white"] {
-  background-color: rgba(13, 13, 26, 0.85) !important;
-}
-
-[data-theme="nuit"] #mobile-menu {
-  background-color: rgba(13, 13, 26, 0.95) !important;
-}
-
-/* Aube rosée — Chaleur, poésie, douceur mature */
-[data-theme="aube"] {
-  --color-cloud: #FAF4F0;
-  --color-night: #2C1A2E;
-  --color-star: #C0785A;
-  --color-dream-pink: #D4A88C;
-  --color-dream-blue: #7A4A6A;
-  --color-dream-purple: #6B3A5A;
-  --color-dream-coral: #C0785A;
-}
-
 /* Custom scrollbar */
 
 ::-webkit-scrollbar {