diff --git a/src/components/Agenda.tsx b/src/components/Agenda.tsx
index 9f0572b..e263f60 100644
--- a/src/components/Agenda.tsx
+++ b/src/components/Agenda.tsx
@@ -1,26 +1,33 @@
 import { motion } from 'motion/react';
 import { agenda, spectacles } from '../data';
-import { MapPin, Ticket, Info } from 'lucide-react';
+import { MapPin, Ticket, Info, Sparkles, Calendar as CalendarIcon } from 'lucide-react';
 
 export default function Agenda() {
   const sortedAgenda = [...agenda].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
   return (
-    <div className="pt-32 pb-24 min-h-screen">
-      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
+      {/* Background Magic */}
+      <div className="absolute top-1/2 left-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[120px] -translate-x-1/2"></div>
+      
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          className="text-center mb-16"
+          className="text-center mb-12 md:mb-20"
         >
-          <h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Agenda</h1>
-          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg">
-            Retrouvez toutes nos prochaines représentations.
+          <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
+            <CalendarIcon size={16} />
+            <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Calendrier</span>
+          </div>
+          <h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">L'<span className="text-dream-coral italic">Agenda</span></h1>
+          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
+            Venez nous voir sur scène ! <br className="hidden sm:block" />Chaque date est une nouvelle aventure.
           </p>
         </motion.div>
 
-        <div className="space-y-8">
+        <div className="space-y-6 md:space-y-10">
           {sortedAgenda.map((event, index) => {
             const spectacle = spectacles.find(s => s.id === event.spectacleId);
             const dateObj = new Date(event.date);
@@ -32,34 +39,35 @@ export default function Agenda() {
                 initial={{ opacity: 0, x: -20 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ delay: index * 0.1 }}
-                className={`group relative flex flex-col md:flex-row gap-8 p-8 rounded-3xl border transition-all ${
-                  isPast ? 'opacity-50 grayscale bg-night/5 border-transparent' : 'bg-white border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5'
+                className={`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 ${
+                  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]'
                 }`}
               >
                 {/* Date Block */}
-                <div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-32 md:h-32 rounded-2xl bg-night text-cloud">
-                  <span className="font-sans text-sm uppercase tracking-widest opacity-70">
+                <div className="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 className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80 mb-1">
                     {dateObj.toLocaleString('fr-FR', { month: 'short' })}
                   </span>
-                  <span className="font-serif text-4xl md:text-5xl">
+                  <span className="font-display text-4xl md:text-6xl">
                     {dateObj.getDate()}
                   </span>
-                  <span className="font-sans text-xs opacity-50 mt-1">
+                  <span className="font-sans text-[10px] md:text-xs font-bold opacity-60 mt-1">
                     {dateObj.getFullYear()}
                   </span>
                 </div>
 
                 {/* Info Block */}
-                <div className="flex-grow flex flex-col justify-center space-y-3">
-                  <div className="flex items-center gap-2">
-                    <span className="font-sans text-xs uppercase tracking-widest text-star font-bold">
+                <div className="flex-grow flex flex-col justify-center space-y-3 md:space-y-4 text-center md:text-left">
+                  <div className="flex items-center justify-center md:justify-start gap-3">
+                    <Sparkles size={14} className="text-dream-coral" />
+                    <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">
                       {spectacle?.title}
                     </span>
-                    {isPast && <span className="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50">Passé</span>}
+                    {isPast && <span className="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>}
                   </div>
-                  <h3 className="font-serif text-3xl text-night">{spectacle?.title}</h3>
-                  <div className="flex items-center gap-2 text-night/60 font-sans">
-                    <MapPin size={16} className="text-star" />
+                  <h3 className="font-display text-2xl md:text-4xl text-night">{spectacle?.title}</h3>
+                  <div className="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">
+                    <MapPin size={16} className="text-dream-blue" />
                     <span>{event.location}</span>
                   </div>
                 </div>
@@ -71,15 +79,15 @@ export default function Agenda() {
                       href={event.bookingLink}
                       target="_blank"
                       rel="noreferrer"
-                      className="w-full md:w-auto flex items-center justify-center gap-2 bg-night text-cloud px-6 py-3 rounded-full font-sans text-sm font-medium hover:bg-night/80 transition-colors"
+                      className="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"
                     >
-                      <Ticket size={18} />
+                      <Ticket size={20} />
                       Réserver
                     </a>
                   ) : (
-                    <div className="w-full md:w-auto flex items-center justify-center gap-2 border border-night/10 text-night/40 px-6 py-3 rounded-full font-sans text-sm italic">
+                    <div className="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">
                       <Info size={18} />
-                      Entrée libre / Sur place
+                      Sur place
                     </div>
                   )}
                 </div>
@@ -89,8 +97,8 @@ export default function Agenda() {
         </div>
 
         {sortedAgenda.length === 0 && (
-          <div className="text-center py-20 border-2 border-dashed border-night/10 rounded-3xl">
-            <p className="font-serif text-2xl text-night/40 italic">Aucune date prévue pour le moment...</p>
+          <div className="text-center py-32 bg-white/50 rounded-[60px] border-4 border-dashed border-dream-blue/20">
+            <p className="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p>
           </div>
         )}
       </div>
diff --git a/src/components/Ateliers.tsx b/src/components/Ateliers.tsx
index 20be680..87fcc2b 100644
--- a/src/components/Ateliers.tsx
+++ b/src/components/Ateliers.tsx
@@ -1,19 +1,28 @@
 import { motion } from 'motion/react';
-import { Mail, Clock, MapPin, Users } from 'lucide-react';
+import { Mail, Clock, MapPin, Users, Sparkles, Star } from 'lucide-react';
 import { companyInfo } from '../data';
 
 export default function Ateliers() {
   return (
-    <div className="pt-32 pb-24 min-h-screen">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+    <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
+      {/* Background Magic */}
+      <div className="absolute top-1/4 right-0 w-[500px] h-[500px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
           <motion.div
             initial={{ opacity: 0, x: -30 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8 }}
+            className="text-center lg:text-left"
           >
-            <h1 className="font-serif text-5xl md:text-7xl text-night mb-8">Ateliers Théâtre</h1>
-            <div className="space-y-6 font-sans text-lg text-night/70 leading-relaxed">
+            <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
+              <Sparkles size={16} />
+              <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Partage & Transmission</span>
+            </div>
+            <h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 md:mb-10 leading-tight">Ateliers <br /><span className="text-dream-purple italic">Théâtre</span></h1>
+            
+            <div className="space-y-6 md:space-y-8 font-sans text-lg md:text-xl text-night/70 leading-relaxed">
               <p>
                 La Compagnie AspiRêves propose des ateliers pour petits et grands enfants, pour que vous aussi vous voliez sur votre petit nuage.
               </p>
@@ -22,45 +31,45 @@ export default function Ateliers() {
               </p>
             </div>
 
-            <div className="mt-12 space-y-6">
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
+            <div className="mt-12 md:mt-16 grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8">
+              <div className="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white text-left">
+                <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-purple/20 flex items-center justify-center text-dream-purple flex-shrink-0">
                   <Users size={24} />
                 </div>
                 <div>
-                  <h3 className="font-serif text-xl text-night">Pour tous les âges</h3>
-                  <p className="font-sans text-night/60">Enfants, adolescents et adultes.</p>
+                  <h3 className="font-display text-lg md:text-xl text-night mb-1">Pour tous</h3>
+                  <p className="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Enfants & Adultes</p>
                 </div>
               </div>
               
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
+              <div className="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white text-left">
+                <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-blue/20 flex items-center justify-center text-dream-blue flex-shrink-0">
                   <Clock size={24} />
                 </div>
                 <div>
-                  <h3 className="font-serif text-xl text-night">Horaires & Tarifs</h3>
-                  <p className="font-sans text-night/60">Contactez-nous pour recevoir la plaquette complète.</p>
+                  <h3 className="font-display text-lg md:text-xl text-night mb-1">Plaquette</h3>
+                  <p className="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Sur demande</p>
                 </div>
               </div>
 
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
+              <div className="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white sm:col-span-2 text-left">
+                <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-coral/20 flex items-center justify-center text-dream-coral flex-shrink-0">
                   <MapPin size={24} />
                 </div>
                 <div>
-                  <h3 className="font-serif text-xl text-night">Lieux</h3>
-                  <p className="font-sans text-night/60">Interventions dans le Tarn et l'Hérault.</p>
+                  <h3 className="font-display text-lg md:text-xl text-night mb-1">Lieux d'intervention</h3>
+                  <p className="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Tarn (81) & Hérault (34)</p>
                 </div>
               </div>
             </div>
 
-            <div className="mt-12">
+            <div className="mt-12 md:mt-16">
               <a
                 href={`mailto:${companyInfo.emails.ateliers}`}
-                className="inline-flex items-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-medium hover:bg-night/90 transition-all"
+                className="inline-flex items-center gap-4 bg-night text-cloud px-8 py-4 md:px-10 md:py-5 rounded-full font-sans font-bold tracking-widest uppercase text-sm hover:bg-night/90 transition-all hover:scale-105 shadow-xl shadow-night/20"
               >
-                <Mail size={18} />
-                S'inscrire ou se renseigner
+                <Mail size={20} />
+                Nous contacter
               </a>
             </div>
           </motion.div>
@@ -69,9 +78,10 @@ export default function Ateliers() {
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className="relative"
+            className="relative px-4 md:px-0"
           >
-            <div className="aspect-square rounded-full overflow-hidden border-8 border-white shadow-2xl">
+            {/* Whimsical Image Frame */}
+            <div className="relative z-10 aspect-square rounded-[40px] md:rounded-[80px] overflow-hidden border-4 md:border-[12px] border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-700">
               <img
                 src="https://picsum.photos/seed/theater-workshop/800/800"
                 alt="Atelier Théâtre"
@@ -79,8 +89,11 @@ export default function Ateliers() {
                 referrerPolicy="no-referrer"
               />
             </div>
-            {/* Decorative element */}
-            <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-star rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
+            
+            {/* Floating Decorations */}
+            <div className="absolute -top-10 -right-10 w-48 h-48 bg-dream-purple rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
+            <div className="absolute -bottom-10 -left-10 w-48 h-48 bg-dream-blue rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
+            <div className="absolute top-1/2 -right-12 animate-float text-star"><Star size={48} fill="currentColor" /></div>
           </motion.div>
         </div>
       </div>
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
index b8d412d..039de95 100644
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -1,58 +1,65 @@
 import { motion } from 'motion/react';
-import { Mail, Instagram, Facebook, Youtube, Send } from 'lucide-react';
+import { Mail, Instagram, Facebook, Youtube, Send, Sparkles, Star } from 'lucide-react';
 import { companyInfo } from '../data';
 
 export default function Contact() {
   return (
-    <div className="pt-32 pb-24 min-h-screen">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
+      {/* Background Magic */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          className="text-center mb-20"
+          className="text-center mb-16 md:mb-24"
         >
-          <h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Nous Joindre</h1>
-          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg">
-            Une question ? Un projet ? N'hésitez pas à nous contacter, nous vous répondrons avec plaisir.
+          <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
+            <Sparkles size={16} />
+            <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Contact</span>
+          </div>
+          <h1 className="font-display text-5xl md:text-8xl text-night mb-8">Nous <span className="text-dream-coral italic">Joindre</span></h1>
+          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
+            Une question ? Un projet ? N'hésitez pas à nous contacter, <br className="hidden sm:block" />nous vous répondrons avec plaisir.
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16">
           {/* Email Cards */}
           <motion.div
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="space-y-6"
+            className="space-y-6 md:space-y-8"
           >
-            <div className="bg-white p-8 rounded-3xl border border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5 transition-all">
-              <div className="w-12 h-12 rounded-2xl bg-night text-cloud flex items-center justify-center mb-6">
-                <Mail size={24} />
+            <div className="bg-white p-8 md:p-10 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 transition-all group">
+              <div className="w-14 h-14 rounded-2xl bg-night text-cloud flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
+                <Mail size={28} />
               </div>
-              <h3 className="font-serif text-2xl text-night mb-2">Diffusion & Programmation</h3>
-              <p className="font-sans text-night/60 mb-6">Pour toute demande concernant nos spectacles.</p>
+              <h3 className="font-display text-2xl md:text-3xl text-night mb-3">Diffusion & Programmation</h3>
+              <p className="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Pour toute demande concernant nos spectacles.</p>
               <a
                 href={`mailto:${companyInfo.emails.pro}`}
-                className="inline-flex items-center gap-2 text-night font-sans font-semibold hover:text-star transition-colors"
+                className="inline-flex items-center gap-3 text-night font-sans font-bold hover:text-dream-coral transition-colors break-all"
               >
                 {companyInfo.emails.pro}
-                <Send size={14} />
+                <Send size={16} className="text-dream-coral" />
               </a>
             </div>
 
-            <div className="bg-white p-8 rounded-3xl border border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5 transition-all">
-              <div className="w-12 h-12 rounded-2xl bg-star text-night flex items-center justify-center mb-6">
-                <Mail size={24} />
+            <div className="bg-white p-8 md:p-10 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5 hover:shadow-dream-blue/10 transition-all group">
+              <div className="w-14 h-14 rounded-2xl bg-dream-blue text-white flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
+                <Mail size={28} />
               </div>
-              <h3 className="font-serif text-2xl text-night mb-2">Ateliers & Pédagogie</h3>
-              <p className="font-sans text-night/60 mb-6">Pour les inscriptions et renseignements ateliers.</p>
+              <h3 className="font-display text-2xl md:text-3xl text-night mb-3">Ateliers & Pédagogie</h3>
+              <p className="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Pour les inscriptions et renseignements ateliers.</p>
               <a
                 href={`mailto:${companyInfo.emails.ateliers}`}
-                className="inline-flex items-center gap-2 text-night font-sans font-semibold hover:text-star transition-colors"
+                className="inline-flex items-center gap-3 text-night font-sans font-bold hover:text-dream-blue transition-colors break-all"
               >
                 {companyInfo.emails.ateliers}
-                <Send size={14} />
+                <Send size={16} className="text-dream-blue" />
               </a>
             </div>
           </motion.div>
@@ -62,41 +69,47 @@ export default function Contact() {
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.6, delay: 0.4 }}
-            className="bg-night text-cloud p-12 rounded-3xl flex flex-col justify-between"
+            className="bg-night text-cloud p-10 md:p-16 rounded-[40px] md:rounded-[60px] flex flex-col justify-between relative overflow-hidden"
           >
-            <div>
-              <h3 className="font-serif text-4xl mb-8">Suivez nos aventures</h3>
-              <p className="font-sans text-cloud/60 text-lg mb-12 leading-relaxed">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-dream-purple/20 rounded-full filter blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
+            
+            <div className="relative z-10">
+              <h3 className="font-display text-4xl md:text-5xl mb-8">Suivez nos <br /><span className="text-dream-coral">aventures</span></h3>
+              <p className="font-sans text-cloud/60 text-lg md:text-xl mb-12 leading-relaxed">
                 Rejoignez-nous sur les réseaux sociaux pour découvrir les coulisses, les photos de tournée et les actualités de la compagnie.
               </p>
               
               <div className="space-y-6">
-                <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="flex items-center gap-4 group">
-                  <div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all">
-                    <Instagram size={20} />
+                <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
+                  <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-pink group-hover:text-dream-pink transition-all">
+                    <Instagram size={24} />
                   </div>
-                  <span className="font-sans text-lg group-hover:text-star transition-colors">Instagram</span>
+                  <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-pink transition-colors">Instagram</span>
                 </a>
-                <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="flex items-center gap-4 group">
-                  <div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all">
-                    <Facebook size={20} />
+                <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
+                  <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-blue group-hover:text-dream-blue transition-all">
+                    <Facebook size={24} />
                   </div>
-                  <span className="font-sans text-lg group-hover:text-star transition-colors">Facebook</span>
+                  <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-blue transition-colors">Facebook</span>
                 </a>
-                <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-4 group">
-                  <div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all">
-                    <Youtube size={20} />
+                <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
+                  <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-coral group-hover:text-dream-coral transition-all">
+                    <Youtube size={24} />
                   </div>
-                  <span className="font-sans text-lg group-hover:text-star transition-colors">YouTube</span>
+                  <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-coral transition-colors">YouTube</span>
                 </a>
               </div>
             </div>
 
-            <div className="mt-12 pt-12 border-t border-cloud/10">
-              <p className="font-serif text-xl italic text-cloud/40">
+            <div className="mt-16 pt-12 border-t border-cloud/10 relative z-10">
+              <p className="font-display text-2xl italic text-cloud/40 leading-relaxed">
                 "Le théâtre est une nourriture aussi indispensable que le pain et le vin."
               </p>
             </div>
+            
+            <div className="absolute bottom-10 right-10 text-star opacity-20 animate-float">
+              <Star size={48} fill="currentColor" />
+            </div>
           </motion.div>
         </div>
       </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 39dc393..5ab739d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,56 +1,59 @@
-import { Instagram, Facebook, Youtube, Mail } from 'lucide-react';
+import { Instagram, Facebook, Youtube, Mail, Star } from 'lucide-react';
 import { companyInfo } from '../data';
 
 export default function Footer() {
   return (
-    <footer className="bg-night text-cloud py-16 border-t border-cloud/10">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8">
+    <footer className="bg-night text-cloud py-20 border-t border-cloud/10 relative overflow-hidden">
+      {/* Background Magic */}
+      <div className="absolute top-0 left-0 w-64 h-64 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 -translate-x-1/2"></div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-16 md:gap-12">
           
           {/* Brand */}
           <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center gap-3 mb-6">
-              <div className="w-10 h-10 rounded-full bg-cloud flex items-center justify-center overflow-hidden">
-                <span className="text-night font-serif italic text-xl">A</span>
+            <div className="flex items-center gap-4 mb-8">
+              <div className="w-12 h-12 rounded-2xl bg-cloud flex items-center justify-center overflow-hidden shadow-lg">
+                <span className="text-night font-display text-2xl">A</span>
               </div>
-              <span className="font-serif text-2xl font-medium tracking-wide text-cloud">
+              <span className="font-display text-3xl font-bold tracking-tight text-cloud">
                 AspiRêves
               </span>
             </div>
-            <p className="font-sans text-cloud/60 max-w-sm leading-relaxed mb-8">
+            <p className="font-sans text-cloud/50 text-lg max-w-sm leading-relaxed mb-10">
               {companyInfo.description}
             </p>
-            <div className="flex gap-4">
-              <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
+            <div className="flex gap-5">
+              <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="w-12 h-12 rounded-2xl border-2 border-cloud/10 flex items-center justify-center text-cloud/40 hover:text-dream-pink hover:border-dream-pink transition-all">
                 <span className="sr-only">Instagram</span>
-                <Instagram size={18} />
+                <Instagram size={20} />
               </a>
-              <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
+              <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="w-12 h-12 rounded-2xl border-2 border-cloud/10 flex items-center justify-center text-cloud/40 hover:text-dream-blue hover:border-dream-blue transition-all">
                 <span className="sr-only">Facebook</span>
-                <Facebook size={18} />
+                <Facebook size={20} />
               </a>
-              <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
+              <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="w-12 h-12 rounded-2xl border-2 border-cloud/10 flex items-center justify-center text-cloud/40 hover:text-dream-coral hover:border-dream-coral transition-all">
                 <span className="sr-only">YouTube</span>
-                <Youtube size={18} />
+                <Youtube size={20} />
               </a>
             </div>
           </div>
 
           {/* Contact */}
           <div>
-            <h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Contact</h4>
-            <ul className="space-y-4 font-sans text-cloud/80">
+            <h4 className="font-sans text-xs uppercase tracking-[0.2em] text-cloud/30 font-bold mb-8">Contact</h4>
+            <ul className="space-y-8 font-sans">
               <li>
-                <span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Professionnels</span>
-                <a href={`mailto:${companyInfo.emails.pro}`} className="hover:text-star transition-colors flex items-center gap-2">
-                  <Mail size={14} />
+                <span className="block text-[10px] text-cloud/20 uppercase tracking-widest font-bold mb-2">Professionnels</span>
+                <a href={`mailto:${companyInfo.emails.pro}`} className="text-cloud/70 hover:text-dream-coral transition-colors flex items-center gap-3 font-bold break-all">
+                  <Mail size={16} className="text-dream-coral" />
                   {companyInfo.emails.pro}
                 </a>
               </li>
               <li>
-                <span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Ateliers Théâtre</span>
-                <a href={`mailto:${companyInfo.emails.ateliers}`} className="hover:text-star transition-colors flex items-center gap-2">
-                  <Mail size={14} />
+                <span className="block text-[10px] text-cloud/20 uppercase tracking-widest font-bold mb-2">Ateliers Théâtre</span>
+                <a href={`mailto:${companyInfo.emails.ateliers}`} className="text-cloud/70 hover:text-dream-blue transition-colors flex items-center gap-3 font-bold break-all">
+                  <Mail size={16} className="text-dream-blue" />
                   {companyInfo.emails.ateliers}
                 </a>
               </li>
@@ -59,18 +62,22 @@ export default function Footer() {
 
           {/* Legal */}
           <div>
-            <h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Informations</h4>
-            <ul className="space-y-3 font-sans text-cloud/80 text-sm">
+            <h4 className="font-sans text-xs uppercase tracking-[0.2em] text-cloud/30 font-bold mb-8">Informations</h4>
+            <ul className="space-y-4 font-sans text-cloud/50 text-sm">
               <li><a href="#" className="hover:text-cloud transition-colors">Mentions légales</a></li>
               <li><a href="#" className="hover:text-cloud transition-colors">Politique de confidentialité</a></li>
-              <li className="pt-4 text-cloud/40">
-                © {new Date().getFullYear()} Compagnie AspiRêves. Tous droits réservés.
+              <li className="pt-8 text-cloud/20 text-xs font-bold uppercase tracking-widest">
+                © {new Date().getFullYear()} Compagnie AspiRêves
               </li>
             </ul>
           </div>
 
         </div>
       </div>
+      
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 text-cloud/5 animate-pulse">
+        <Star size={120} fill="currentColor" />
+      </div>
     </footer>
   );
 }
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index ee72e46..9660fb0 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,5 +1,5 @@
 import { motion } from 'motion/react';
-import { Play, Calendar, ArrowRight } from 'lucide-react';
+import { Play, Calendar, ArrowRight, Star, Sparkles, Moon, MapPin } from 'lucide-react';
 import { companyInfo, spectacles, agenda } from '../data';
 
 interface HomeProps {
@@ -16,95 +16,102 @@ export default function Home({ onNavigate }: HomeProps) {
   return (
     <div className="min-h-screen bg-cloud">
       {/* Hero Section */}
-      <section className="relative h-[90vh] flex items-center justify-center overflow-hidden">
-        {/* Abstract Cloud/Dream Background Elements */}
-        <div className="absolute top-1/4 -left-20 w-96 h-96 bg-star/10 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
-        <div className="absolute top-1/3 -right-20 w-96 h-96 bg-night/5 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
-        <div className="absolute -bottom-32 left-1/3 w-96 h-96 bg-star/5 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-4000"></div>
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-24 md:pt-32">
+        {/* Whimsical Background Blobs */}
+        <div className="absolute top-1/4 -left-20 w-[500px] h-[500px] bg-dream-purple/30 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
+        <div className="absolute top-1/3 -right-20 w-[600px] h-[600px] bg-dream-blue/40 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
+        <div className="absolute -bottom-32 left-1/3 w-[550px] h-[550px] bg-dream-pink/40 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-4000"></div>
+        
+        {/* Floating Stars/Sparkles */}
+        <div className="absolute top-20 left-20 animate-float text-star opacity-40"><Star size={40} fill="currentColor" /></div>
+        <div className="absolute bottom-40 right-20 animate-float animation-delay-2000 text-dream-coral opacity-40"><Sparkles size={32} /></div>
+        <div className="absolute top-1/2 right-1/4 animate-float animation-delay-4000 text-dream-purple opacity-30"><Moon size={24} fill="currentColor" /></div>
 
-        <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 1, ease: "easeOut" }}
           >
-            <h1 className="font-serif text-6xl md:text-8xl lg:text-9xl text-night leading-none mb-6">
-              Embarquez sur <br />
-              <span className="italic font-light text-night/80">notre nuage</span>
+            <div className="inline-block mb-6 px-4 py-2 rounded-full bg-white/50 backdrop-blur-sm border border-white/20 shadow-sm">
+              <span className="font-sans text-[10px] sm:text-sm font-semibold text-dream-coral uppercase tracking-widest">Compagnie de Théâtre Jeune Public</span>
+            </div>
+            <h1 className="font-display text-4xl sm:text-6xl md:text-8xl lg:text-9xl text-night leading-tight mb-8">
+              Rêver en <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-dream-purple via-dream-coral to-dream-blue">grand ensemble</span>
             </h1>
-            <p className="font-sans text-lg md:text-xl text-night/70 max-w-2xl mx-auto leading-relaxed mb-10">
+            <p className="font-sans text-lg md:text-2xl text-night/70 max-w-3xl mx-auto leading-relaxed mb-12">
               {companyInfo.description}
             </p>
             
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-8">
               <button 
                 onClick={() => onNavigate('spectacles')}
-                className="group flex items-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-medium tracking-wide hover:bg-night/90 transition-all hover:scale-105"
+                className="group relative flex items-center gap-3 bg-night text-cloud px-10 py-5 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-xl shadow-night/20"
               >
-                Découvrir les spectacles
-                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
+                Nos Spectacles
+                <ArrowRight size={20} className="group-hover:translate-x-2 transition-transform" />
               </button>
               
               <a 
                 href={`https://www.youtube.com/watch?v=${companyInfo.teaserVideoId}`}
                 target="_blank"
                 rel="noreferrer"
-                className="group flex items-center gap-3 text-night font-sans font-medium hover:text-star transition-colors"
+                className="group flex items-center gap-4 text-night font-sans font-bold hover:text-dream-coral transition-colors"
               >
-                <div className="w-12 h-12 rounded-full border border-night/20 flex items-center justify-center group-hover:border-star group-hover:bg-star/10 transition-all">
-                  <Play size={18} className="ml-1" />
+                <div className="w-14 h-14 rounded-full bg-white flex items-center justify-center shadow-lg group-hover:shadow-dream-coral/20 group-hover:scale-110 transition-all">
+                  <Play size={22} className="ml-1 fill-night" />
                 </div>
                 Voir le teaser
               </a>
             </div>
           </motion.div>
         </div>
+        
+        {/* Wave Divider */}
+        <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-none">
+          <svg className="relative block w-full h-[100px]" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.23,103.19,115.6,115.59,173.45,108a512.21,512.21,0,0,0,147.94-51.56Z" fill="#ffffff"></path>
+          </svg>
+        </div>
       </section>
 
       {/* Featured Spectacles Section */}
-      <section className="py-24 bg-white">
+      <section className="py-20 md:py-32 bg-white relative">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-end mb-16">
-            <div>
-              <h2 className="font-serif text-4xl md:text-5xl text-night mb-4">À l'affiche</h2>
-              <p className="font-sans text-night/60 uppercase tracking-widest text-sm">Créations Jeune Public</p>
-            </div>
-            <button 
-              onClick={() => onNavigate('spectacles')}
-              className="hidden md:flex items-center gap-2 text-night/60 hover:text-night transition-colors font-sans uppercase tracking-wider text-sm"
-            >
-              Tout voir <ArrowRight size={16} />
-            </button>
+          <div className="text-center mb-12 md:mb-20">
+            <h2 className="font-display text-4xl md:text-6xl text-night mb-6">Nos Créations</h2>
+            <div className="w-16 md:w-24 h-2 bg-gradient-to-r from-dream-purple to-dream-blue mx-auto rounded-full"></div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
             {spectacles.map((spectacle, index) => (
               <motion.div 
                 key={spectacle.id}
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: index * 0.2, duration: 0.6 }}
                 className="group cursor-pointer"
                 onClick={() => onNavigate('spectacles')}
               >
-                <div className="relative aspect-[4/5] overflow-hidden rounded-2xl mb-6 bg-night/5">
+                <div className="relative aspect-[4/5] overflow-hidden rounded-[32px] md:rounded-[40px] mb-6 md:mb-8 shadow-2xl shadow-night/5 group-hover:shadow-dream-purple/20 transition-all duration-500">
                   <img 
                     src={spectacle.image} 
                     alt={spectacle.title}
-                    className="object-cover w-full h-full transform group-hover:scale-105 transition-transform duration-700 ease-in-out"
+                    className="object-cover w-full h-full transform group-hover:scale-110 transition-transform duration-1000 ease-in-out"
                     referrerPolicy="no-referrer"
                   />
-                  <div className="absolute inset-0 bg-gradient-to-t from-night/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
-                    <span className="text-cloud font-sans text-sm uppercase tracking-wider border border-cloud/30 rounded-full px-4 py-2 backdrop-blur-sm">
-                      En savoir plus
+                  <div className="absolute inset-0 bg-gradient-to-t from-night/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-8">
+                    <span className="text-cloud font-sans font-bold uppercase tracking-widest bg-white/20 backdrop-blur-md rounded-full px-6 py-3 border border-white/30">
+                      Découvrir
                     </span>
                   </div>
                 </div>
-                <h3 className="font-serif text-3xl text-night mb-2">{spectacle.title}</h3>
-                <div className="flex items-center gap-3 font-sans text-sm text-night/60 uppercase tracking-wider">
-                  <span>{spectacle.age}</span>
-                  <span className="w-1 h-1 rounded-full bg-star"></span>
+                <h3 className="font-display text-3xl text-night mb-3 group-hover:text-dream-coral transition-colors">{spectacle.title}</h3>
+                <div className="flex items-center gap-4 font-sans text-sm font-bold text-night/40 uppercase tracking-widest">
+                  <span className="px-3 py-1 bg-dream-blue/20 rounded-lg text-dream-blue-dark">{spectacle.age}</span>
+                  <span className="w-1.5 h-1.5 rounded-full bg-dream-coral"></span>
                   <span>{spectacle.duration}</span>
                 </div>
               </motion.div>
@@ -113,64 +120,68 @@ export default function Home({ onNavigate }: HomeProps) {
         </div>
       </section>
 
-      {/* Quick Agenda Section */}
-      <section className="py-24 bg-night text-cloud">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-            <div>
-              <h2 className="font-serif text-5xl md:text-6xl mb-6">Prochaines dates</h2>
-              <p className="font-sans text-cloud/70 text-lg mb-10 max-w-md">
-                Retrouvez-nous près de chez vous. Venez partager un moment suspendu avec la compagnie.
-              </p>
-              <button 
-                onClick={() => onNavigate('agenda')}
-                className="inline-flex items-center gap-3 border border-cloud/30 hover:border-cloud px-8 py-4 rounded-full font-sans uppercase tracking-wider text-sm transition-colors"
-              >
-                Voir tout l'agenda
-              </button>
-            </div>
+      {/* Quick Agenda Section with a softer look */}
+      <section className="py-20 md:py-32 bg-cloud relative overflow-hidden">
+        <div className="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none">
+          <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-dream-purple rounded-full filter blur-[100px] animate-pulse"></div>
+          <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-dream-blue rounded-full filter blur-[100px] animate-pulse animation-delay-2000"></div>
+        </div>
 
-            <div className="space-y-6">
-              {upcomingShows.length > 0 ? (
-                upcomingShows.map((event, index) => {
-                  const spec = spectacles.find(s => s.id === event.spectacleId);
-                  const dateObj = new Date(event.date);
-                  return (
-                    <motion.div 
-                      key={event.id}
-                      initial={{ opacity: 0, x: 20 }}
-                      whileInView={{ opacity: 1, x: 0 }}
-                      viewport={{ once: true }}
-                      transition={{ delay: index * 0.2 }}
-                      className="group flex flex-col sm:flex-row gap-6 p-6 rounded-2xl border border-cloud/10 hover:bg-cloud/5 transition-colors cursor-pointer"
-                      onClick={() => onNavigate('agenda')}
-                    >
-                      <div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 rounded-xl bg-cloud/10 text-cloud">
-                        <span className="font-sans text-sm uppercase tracking-widest opacity-70">
-                          {dateObj.toLocaleString('fr-FR', { month: 'short' })}
-                        </span>
-                        <span className="font-serif text-4xl">
-                          {dateObj.getDate()}
-                        </span>
-                      </div>
-                      <div className="flex-grow flex flex-col justify-center">
-                        <h4 className="font-serif text-2xl mb-1">{spec?.title}</h4>
-                        <div className="flex items-center gap-2 font-sans text-sm text-cloud/60">
-                          <Calendar size={14} />
-                          <span>{event.location}</span>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="bg-white rounded-[40px] md:rounded-[60px] p-8 md:p-20 shadow-2xl shadow-night/5 border border-white">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-20 items-center">
+              <div className="text-center lg:text-left">
+                <h2 className="font-display text-4xl md:text-6xl text-night mb-6 md:mb-8 leading-tight">Prochaines <br /><span className="text-dream-coral">Rencontres</span></h2>
+                <p className="font-sans text-night/60 text-lg mb-8 md:mb-12 max-w-md mx-auto lg:mx-0 leading-relaxed">
+                  Le théâtre est un voyage qui se partage. Retrouvez-nous pour une parenthèse enchantée.
+                </p>
+                <button 
+                  onClick={() => onNavigate('agenda')}
+                  className="inline-flex items-center gap-4 bg-night text-cloud px-8 py-4 md:px-10 md:py-5 rounded-full font-sans font-bold uppercase tracking-widest text-sm transition-all hover:scale-105 shadow-xl shadow-night/20"
+                >
+                  Tout l'agenda
+                </button>
+              </div>
+
+              <div className="space-y-6 md:space-y-8">
+                {upcomingShows.length > 0 ? (
+                  upcomingShows.map((event, index) => {
+                    const spec = spectacles.find(s => s.id === event.spectacleId);
+                    const dateObj = new Date(event.date);
+                    return (
+                      <motion.div 
+                        key={event.id}
+                        initial={{ opacity: 0, x: 30 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ delay: index * 0.2 }}
+                        className="group flex flex-col sm:flex-row gap-6 md:gap-8 p-6 md:p-8 rounded-[24px] md:rounded-[32px] bg-cloud/50 hover:bg-white hover:shadow-xl hover:shadow-night/5 transition-all cursor-pointer border border-transparent hover:border-dream-purple/20 items-center sm:items-stretch"
+                        onClick={() => onNavigate('agenda')}
+                      >
+                        <div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-28 md:h-28 rounded-2xl md:rounded-3xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
+                          <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80 mb-1">
+                            {dateObj.toLocaleString('fr-FR', { month: 'short' })}
+                          </span>
+                          <span className="font-display text-4xl md:text-5xl">
+                            {dateObj.getDate()}
+                          </span>
                         </div>
-                      </div>
-                      <div className="flex items-center justify-end sm:opacity-0 group-hover:opacity-100 transition-opacity">
-                        <ArrowRight className="text-star" />
-                      </div>
-                    </motion.div>
-                  );
-                })
-              ) : (
-                <div className="p-8 border border-cloud/10 rounded-2xl text-center">
-                  <p className="font-sans text-cloud/60 italic">De nouvelles dates seront annoncées prochainement.</p>
-                </div>
-              )}
+                        <div className="flex-grow flex flex-col justify-center text-center sm:text-left">
+                          <h4 className="font-display text-xl md:text-2xl text-night mb-2 group-hover:text-dream-coral transition-colors">{spec?.title}</h4>
+                          <div className="flex items-center justify-center sm:justify-start gap-2 font-sans text-[10px] md:text-sm font-bold text-night/40 uppercase tracking-widest">
+                            <MapPin size={14} className="text-dream-coral" />
+                            <span>{event.location}</span>
+                          </div>
+                        </div>
+                      </motion.div>
+                    );
+                  })
+                ) : (
+                  <div className="p-10 md:p-12 border-4 border-dashed border-dream-blue/20 rounded-[32px] md:rounded-[40px] text-center">
+                    <p className="font-sans text-night/40 font-bold uppercase tracking-widest text-sm">De nouveaux rêves arrivent bientôt...</p>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
@@ -178,3 +189,4 @@ export default function Home({ onNavigate }: HomeProps) {
     </div>
   );
 }
+
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d855008..756b02e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Menu, X, Instagram, Facebook, Youtube } from 'lucide-react';
+import { Menu, X, Instagram, Facebook, Youtube, Star } from 'lucide-react';
 import { companyInfo } from '../data';
 
 interface NavbarProps {
@@ -35,40 +35,44 @@ export default function Navbar({ currentPage, onNavigate }: NavbarProps) {
 
   return (
     <nav
-      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
-        isScrolled ? 'bg-cloud/90 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5'
+      className={`fixed top-0 w-full z-50 transition-all duration-500 ${
+        isScrolled ? 'bg-white/80 backdrop-blur-lg shadow-xl shadow-night/5 py-4' : 'bg-transparent py-8'
       }`}
     >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center">
           {/* Logo Area */}
           <div 
-            className="flex items-center gap-3 cursor-pointer group"
+            className="flex items-center gap-4 cursor-pointer group"
             onClick={() => handleNavClick('home')}
           >
-            {/* Placeholder for the actual logo image */}
-            <div className="w-10 h-10 rounded-full bg-night flex items-center justify-center overflow-hidden transition-transform group-hover:scale-105">
-              <span className="text-cloud font-serif italic text-xl">A</span>
+            <div className="relative">
+              <div className="w-12 h-12 rounded-2xl bg-night flex items-center justify-center overflow-hidden transition-all group-hover:rotate-12 group-hover:scale-110 shadow-lg">
+                <span className="text-cloud font-display text-2xl">A</span>
+              </div>
+              <div className="absolute -top-2 -right-2 text-star animate-pulse">
+                <Star size={16} fill="currentColor" />
+              </div>
             </div>
-            <span className="font-serif text-2xl font-medium tracking-wide text-night">
+            <span className="font-display text-2xl font-bold tracking-tight text-night group-hover:text-dream-coral transition-colors">
               AspiRêves
             </span>
           </div>
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-8">
+          <div className="hidden md:flex items-center space-x-10">
             {navLinks.map((link) => (
               <button
                 key={link.id}
                 onClick={() => handleNavClick(link.id)}
-                className={`text-sm tracking-wide uppercase transition-colors relative group ${
-                  currentPage === link.id ? 'text-night font-medium' : 'text-night/60 hover:text-night'
+                className={`text-sm font-bold uppercase tracking-widest transition-all relative group ${
+                  currentPage === link.id ? 'text-dream-coral' : 'text-night/60 hover:text-night'
                 }`}
               >
                 {link.label}
                 <span 
-                  className={`absolute -bottom-1 left-0 h-px bg-night transition-all duration-300 ${
-                    currentPage === link.id ? 'w-full' : 'w-0 group-hover:w-full'
+                  className={`absolute -bottom-2 left-1/2 -translate-x-1/2 h-1.5 w-1.5 rounded-full bg-dream-coral transition-all duration-300 ${
+                    currentPage === link.id ? 'opacity-100 scale-100' : 'opacity-0 scale-0 group-hover:opacity-100 group-hover:scale-100'
                   }`} 
                 />
               </button>
@@ -89,28 +93,28 @@ export default function Navbar({ currentPage, onNavigate }: NavbarProps) {
 
       {/* Mobile Menu */}
       {isMobileMenuOpen && (
-        <div className="md:hidden absolute top-full left-0 w-full bg-cloud shadow-lg border-t border-night/5">
-          <div className="px-4 pt-2 pb-6 space-y-1">
+        <div className="md:hidden absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl shadow-2xl border-t border-night/5 animate-in fade-in slide-in-from-top-4 duration-300">
+          <div className="px-6 py-8 space-y-2">
             {navLinks.map((link) => (
               <button
                 key={link.id}
                 onClick={() => handleNavClick(link.id)}
-                className={`block w-full text-left px-3 py-4 text-base uppercase tracking-wider ${
-                  currentPage === link.id ? 'text-night font-medium bg-night/5' : 'text-night/70'
+                className={`block w-full text-left px-4 py-4 text-lg font-display tracking-wide rounded-2xl transition-all ${
+                  currentPage === link.id ? 'text-dream-coral bg-dream-coral/5 font-bold' : 'text-night/70 hover:bg-night/5'
                 }`}
               >
                 {link.label}
               </button>
             ))}
-            <div className="flex gap-4 px-3 pt-6 pb-2">
-              <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="text-night/60 hover:text-night">
-                <Instagram size={20} />
+            <div className="flex gap-6 px-4 pt-8 border-t border-night/5">
+              <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="text-night/40 hover:text-dream-pink transition-colors">
+                <Instagram size={24} />
               </a>
-              <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="text-night/60 hover:text-night">
-                <Facebook size={20} />
+              <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="text-night/40 hover:text-dream-blue transition-colors">
+                <Facebook size={24} />
               </a>
-              <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="text-night/60 hover:text-night">
-                <Youtube size={20} />
+              <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="text-night/40 hover:text-dream-coral transition-colors">
+                <Youtube size={24} />
               </a>
             </div>
           </div>
diff --git a/src/components/Spectacles.tsx b/src/components/Spectacles.tsx
index 44b8c23..da6cb4c 100644
--- a/src/components/Spectacles.tsx
+++ b/src/components/Spectacles.tsx
@@ -1,24 +1,32 @@
 import { motion } from 'motion/react';
 import { spectacles } from '../data';
-import { ExternalLink, Clock, Users } from 'lucide-react';
+import { ExternalLink, Clock, Users, Star, Sparkles } from 'lucide-react';
 
 export default function Spectacles() {
   return (
-    <div className="pt-32 pb-24 min-h-screen">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
+      {/* Background Magic */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
+      <div className="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
-          className="text-center mb-20"
+          className="text-center mb-16 md:mb-24"
         >
-          <h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Nos Spectacles</h1>
-          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg">
-            Des créations originales pour petits et grands, mêlant poésie, humour et burlesque.
+          <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
+            <Sparkles size={16} />
+            <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Le Répertoire</span>
+          </div>
+          <h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span className="text-dream-purple italic">Spectacles</span></h1>
+          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
+            Des bulles de poésie et d'humour pour s'évader, <br className="hidden sm:block" />apprendre et grandir ensemble.
           </p>
         </motion.div>
 
-        <div className="space-y-32">
+        <div className="space-y-24 md:space-y-40">
           {spectacles.map((spectacle, index) => (
             <motion.div
               key={spectacle.id}
@@ -26,46 +34,57 @@ export default function Spectacles() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-100px" }}
               transition={{ duration: 0.8 }}
-              className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-12 items-center`}
+              className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-10 md:gap-16 items-center`}
             >
-              {/* Image Side */}
-              <div className="w-full md:w-1/2">
-                <div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl shadow-night/10 group">
+              {/* Image Side - Dream Bubble Look */}
+              <div className="w-full md:w-1/2 relative">
+                <div className="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
+                <div className="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
+                
+                <div className="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
                   <img
                     src={spectacle.image}
                     alt={spectacle.title}
-                    className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
+                    className="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
                     referrerPolicy="no-referrer"
                   />
-                  <div className="absolute inset-0 bg-night/10 group-hover:bg-transparent transition-colors duration-300" />
+                  <div className="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                 </div>
               </div>
 
               {/* Content Side */}
-              <div className="w-full md:w-1/2 space-y-6">
-                <h2 className="font-serif text-4xl md:text-5xl text-night">{spectacle.title}</h2>
+              <div className="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
+                <div className="flex items-center justify-center md:justify-start gap-3">
+                  <div className="h-px w-8 md:w-12 bg-dream-coral"></div>
+                  <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
+                </div>
                 
-                <div className="flex flex-wrap gap-4">
-                  <div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70">
-                    <Users size={16} />
+                <h2 className="font-display text-4xl md:text-6xl text-night group-hover:text-dream-purple transition-colors">{spectacle.title}</h2>
+                
+                <div className="flex flex-wrap justify-center md:justify-start gap-3 md:gap-4">
+                  <div className="flex items-center gap-2 bg-dream-blue/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold text-dream-blue-dark">
+                    <Users size={16} className="text-dream-blue" />
                     <span>{spectacle.age}</span>
                   </div>
-                  <div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70">
-                    <Clock size={16} />
+                  <div className="flex items-center gap-2 bg-dream-pink/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold text-dream-pink-dark">
+                    <Clock size={16} className="text-dream-pink" />
                     <span>{spectacle.duration}</span>
                   </div>
                 </div>
 
-                <p className="font-sans text-lg text-night/70 leading-relaxed">
+                <p className="font-sans text-lg md:text-xl text-night/70 leading-relaxed">
                   {spectacle.summary}
                 </p>
 
-                <div className="pt-6 flex flex-wrap gap-4">
-                  <button className="bg-night text-cloud px-8 py-3 rounded-full font-sans font-medium hover:bg-night/90 transition-all">
+                <div className="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
+                  <button className="w-full sm:w-auto bg-night text-cloud px-8 py-4 md:px-10 md:py-4 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-lg shadow-night/20">
                     Dossier Pédagogique
                   </button>
-                  <button className="border border-night/20 text-night px-8 py-3 rounded-full font-sans font-medium hover:bg-night/5 transition-all flex items-center gap-2">
-                    Voir les photos <ExternalLink size={16} />
+                  <button className="group flex items-center gap-3 text-night font-sans font-bold hover:text-dream-purple transition-colors">
+                    <div className="w-10 h-10 md:w-12 md:h-12 rounded-full border-2 border-night/10 flex items-center justify-center group-hover:border-dream-purple group-hover:bg-dream-purple/10 transition-all">
+                      <ExternalLink size={16} />
+                    </div>
+                    Voir les photos
                   </button>
                 </div>
               </div>
@@ -73,6 +92,10 @@ export default function Spectacles() {
           ))}
         </div>
       </div>
+      
+      {/* Decorative Floating Elements */}
+      <div className="absolute top-1/4 left-10 text-dream-pink opacity-20 animate-float"><Star size={60} fill="currentColor" /></div>
+      <div className="absolute bottom-1/4 right-10 text-dream-blue opacity-20 animate-float animation-delay-2000"><Star size={40} fill="currentColor" /></div>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index c6e0b60..f13d1ac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,18 @@
-@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600&family=Fredoka:wght@300..700&display=swap');
 @import "tailwindcss";
 
 @theme {
   --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
   --font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
+  --font-display: "Fredoka", sans-serif;
   
-  --color-cloud: #FAF9F6;
-  --color-night: #18181B;
-  --color-star: #FBBF24;
+  --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;
 }
 
 body {
@@ -15,19 +20,50 @@ body {
   color: var(--color-night);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
-/* Custom scrollbar for a polished feel */
+@keyframes float {
+  0% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(2deg); }
+  100% { transform: translateY(0px) rotate(0deg); }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes blob {
+  0% { transform: scale(1); }
+  33% { transform: scale(1.1) translate(10px, -10px); }
+  66% { transform: scale(0.9) translate(-10px, 10px); }
+  100% { transform: scale(1); }
+}
+
+.animate-blob {
+  animation: blob 10s infinite alternate;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+
+/* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 10px;
 }
 ::-webkit-scrollbar-track {
   background: var(--color-cloud);
 }
 ::-webkit-scrollbar-thumb {
-  background: #d4d4d8;
-  border-radius: 4px;
+  background: var(--color-dream-purple);
+  border-radius: 10px;
+  border: 3px solid var(--color-cloud);
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #a1a1aa;
+  background: var(--color-dream-coral);
 }