Adapter le layout pour les affiches portrait depuis StoryBlok

Renomme le champ image en affiche (StoryBlok), supprime les données hardcodées de data.ts, et adapte les layouts : ratio naturel sans rognage, largeur image réduite à 2/5 avec texte élargi à 3/5, border-radius adouci.

src/data.ts

@@ -1,7 +1,7 @@
 export const companyInfo = {
   name: "Compagnie AspiRêves",
   description: "La Compagnie AspiRêves vous embarque sur son petit nuage. Un petit nuage tout doux, poétique, drôle et burlesque. Mais attention, ça tangue ! C'est du rêve qui secoue, qui trébuche, des songes d'adultes, des jeux d'enfants... c'est du spectacle vivant.",
-  founder: "Éléonore Astruc",
+  founder: "Eléonore Astruc",
   founderRole: "Autrice, comédienne & metteuse en scène",
   address: "14 rue Gisclard, 81160 Saint-Juéry",
   phone: "06 84 26 36 92",
@@ -15,116 +15,3 @@ export const companyInfo = {
   },
   teaserVideoId: "fImFdHPvXa8"
 };
-
-export const spectacles = [
-  {
-    id: "bassibulle",
-    title: "BASSIBULLE",
-    category: "jeune-public" as const,
-    retired: false,
-    age: "Dès 6 mois",
-    duration: "30 min",
-    summary: "Une bassine, un personnage... Que va-t-il se passer entre ces deux-là ? Au fil des découvertes et des explorations, c'est une véritable aventure pleine d'émotions qui se construit sous les yeux des enfants. La bassine, tantôt docile, tantôt rebelle, n'en finit pas d'embêter ce personnage bien décidé à créer le lien avec cet objet.",
-    credits: "Création et interprétation : Éléonore Astruc",
-    image: "https://picsum.photos/seed/bassibulle/800/600",
-    gallery: [
-      "https://picsum.photos/seed/bassi1/400/300",
-      "https://picsum.photos/seed/bassi2/400/300"
-    ],
-    dossierPro: "#"
-  },
-  {
-    id: "minus",
-    title: "MiNUS",
-    category: "jeune-public" as const,
-    retired: false,
-    age: "À partir de 4 ans",
-    duration: "45 min",
-    summary: "Minus est un garçon pas comme les autres. Dans son village, dans sa famille, tout le monde l'appelle MiNUS, si bien qu'il finit par croire que c'est son vrai nom. Rien n'est à sa taille, il ne voit jamais rien, n'entend jamais rien... Mais un jour, grâce à de nouveaux arrivants, sa vie bascule dans une aventure héroïque et poétique.",
-    credits: "Création et interprétation : Éléonore Astruc",
-    image: "https://picsum.photos/seed/minus/800/600",
-    gallery: [
-      "https://picsum.photos/seed/minus1/400/300",
-      "https://picsum.photos/seed/minus2/400/300"
-    ],
-    dossierPro: "#"
-  },
-  {
-    id: "cadeau-surprise",
-    title: "Le Cadeau Surprise !",
-    category: "jeune-public" as const,
-    retired: false,
-    age: "De 6 mois à 6 ans",
-    duration: "30 min",
-    summary: "Un spectacle de théâtre visuel et sensoriel ponctué de chansons, pensé pour émerveiller les tout-petits.",
-    credits: "Création et interprétation : Éléonore Astruc",
-    image: "https://picsum.photos/seed/cadeau-surprise/800/600",
-    gallery: [],
-    dossierPro: "#"
-  },
-  {
-    id: "la-piece",
-    title: "La Pièce",
-    category: "tout-public" as const,
-    retired: false,
-    age: "Tout public",
-    duration: "",
-    summary: "Un drame sur la résistance, écrit par Michel Cals.",
-    credits: "Texte : Michel Cals — Avec : Jalil Arfaoui, Éléonore Astruc, Cathy Giovannini, Arthur Placet, Jean-Louis Reynes",
-    image: "https://picsum.photos/seed/la-piece/800/600",
-    gallery: [],
-    dossierPro: "#"
-  },
-  {
-    id: "fulgurante-envie",
-    title: "Une fulgurante envie de s'asseoir",
-    category: "tout-public" as const,
-    retired: false,
-    age: "Tout public",
-    duration: "",
-    summary: "Un duo burlesque et poétique.",
-    credits: "Écriture et interprétation : Éléonore Astruc & Cathy Giovannini",
-    image: "https://picsum.photos/seed/fulgurante/800/600",
-    gallery: [],
-    dossierPro: "#"
-  },
-  {
-    id: "au-pied-de-mon-arbre",
-    title: "Au pied de mon arbre",
-    category: "tout-public" as const,
-    retired: true,
-    age: "Tout public",
-    duration: "",
-    summary: "",
-    credits: "",
-    image: "https://picsum.photos/seed/arbre/800/600",
-    gallery: [],
-    dossierPro: "#"
-  },
-  {
-    id: "planete-des-songes",
-    title: "Planète des Songes",
-    category: "tout-public" as const,
-    retired: true,
-    age: "Tout public",
-    duration: "Duo burlesque gestuel",
-    summary: "Les aventures sans parole d'Éléonore et Fred nous transportent de la jungle des employés de bureau à la moiteur d'une chambre à coucher. Un univers poétique et absurde qui nous emmène avec un grain de folie sur la Planète des Songes.",
-    credits: "Écriture et interprétation : Éléonore Astruc & Frédéric Pillet",
-    image: "https://picsum.photos/seed/planete-songes/800/600",
-    gallery: [
-      "https://picsum.photos/seed/songes1/400/300",
-      "https://picsum.photos/seed/songes2/400/300"
-    ],
-    dossierPro: "#"
-  }
-];
-
-export const agenda = [
-  {
-    id: "1",
-    date: "2026-03-18T15:00:00",
-    location: "La Manufacture, Villefranche-de-Rouergue",
-    spectacleId: "minus",
-    bookingLink: null // Entrée libre
-  }
-];

src/lib/storyblok.ts

@@ -14,7 +14,7 @@ export interface Spectacle {
   duration: string;
   summary: string;
   credits: string;
-  image: string;
+  affiche: string;
   gallery: string[];
   dossierPro: string;
   _blok: SbBlokData;
@@ -51,7 +51,7 @@ export function mapStoryToSpectacle(story: any): Spectacle {
     duration: c.duree || '',
     summary: c.resume || '',
     credits: c.credits || '',
-    image: c.image?.filename || '',
+    affiche: c.affiche?.filename || '',
     gallery: (c.galerie || []).map((a: any) => a.filename),
     dossierPro: c.dossier?.filename || '',
     _blok: c,

src/pages/index.astro

@@ -83,9 +83,9 @@ const spectacles = allSpectacles;
             class="fade-up group cursor-pointer block"
             style={`transition-delay: ${index * 0.15}s`}
           >
-            <div class="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">
+            <div class="relative aspect-[3/4] 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}
+                src={spectacle.affiche}
                 alt={spectacle.title}
                 class="object-cover w-full h-full transform group-hover:scale-110 transition-transform duration-1000 ease-in-out"
                 referrerpolicy="no-referrer"

src/pages/la-compagnie.astro

@@ -24,10 +24,10 @@ import { companyInfo } from '../data';
               La Compagnie AspiRêves a été créée en 2017 à Paris. Elle s'éveille 1 an plus tard avec sa première création tout public « Planète des Songes ». Puis la compagnie s'est installée dans le Tarn pour se concentrer sur la création de plusieurs spectacles jeune public.
             </p>
             <p>
-              Depuis septembre 2022, la Compagnie AspiRêves propose des ateliers théâtre, animés par Éléonore Astruc, pour les enfants, les adolescents et les adultes à la salle associative de la Gare à Saint-Juéry.
+              Depuis septembre 2022, la Compagnie AspiRêves propose des ateliers théâtre, animés par Eléonore Astruc, pour les enfants, les adolescents et les adultes à la salle associative de la Gare à Saint-Juéry.
             </p>
             <p>
-              Début 2023, suite à la rencontre de différents artistes, la compagnie décide de se lancer dans la création de nouveaux spectacles tout public. « Une fulgurante envie de s'asseoir » écrit et interprété par Éléonore Astruc et Cathy Giovannini. Et « La Pièce » écrit par Michel Cals.
+              Début 2023, suite à la rencontre de différents artistes, la compagnie décide de se lancer dans la création de nouveaux spectacles tout public. « Une fulgurante envie de s'asseoir » écrit et interprété par Eléonore Astruc et Cathy Giovannini. Et « La Pièce » écrit par Michel Cals.
             </p>
             <p class="text-night font-medium italic">
               La Compagnie AspiRêves a pour but de faire rêver les petits et les grands mais également de créer, de transmettre et de s'engager dans l'éducation artistique et culturelle.
@@ -41,12 +41,12 @@ import { companyInfo } from '../data';
         <div class="w-48 h-48 md:w-64 md:h-64 rounded-full overflow-hidden shadow-2xl shadow-night/10 border-8 border-white mb-8">
           <img
             src="/images/eleonore-astruc.jpg"
-            alt="Éléonore Astruc"
+            alt="Eléonore Astruc"
             class="object-cover w-full h-full"
             referrerpolicy="no-referrer"
           />
         </div>
-        <h2 class="font-display text-3xl md:text-5xl text-night mb-2">Éléonore Astruc</h2>
+        <h2 class="font-display text-3xl md:text-5xl text-night mb-2">Eléonore Astruc</h2>
         <p class="font-sans text-dream-coral font-bold uppercase tracking-widest text-xs md:text-sm">Directrice Artistique</p>
       </div>
 
@@ -61,7 +61,7 @@ import { companyInfo } from '../data';
             <h3 class="font-display text-2xl md:text-3xl text-night mb-2">Formation</h3>
             <p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Théâtre, chant, danse & clown</p>
             <p class="font-sans text-night/70 text-lg leading-relaxed">
-              Éléonore Astruc, véritable passionnée de théâtre depuis son plus jeune âge, a su transformer cette passion en une carrière artistique pétillante et accomplie. Diplômée de l'École de Théâtre la Compagnie Maritime à Montpellier et titulaire d'un Master 1 en Arts du spectacle, elle a développé un éventail de compétences en théâtre, chant et danse. Sa spécialisation en clown à l'école Le Samovar a ajouté une touche ludique et expressive à son répertoire, soulignant sa capacité à captiver et à enchanter son public.
+              Eléonore Astruc, véritable passionnée de théâtre depuis son plus jeune âge, a su transformer cette passion en une carrière artistique pétillante et accomplie. Diplômée de l'École de Théâtre la Compagnie Maritime à Montpellier et titulaire d'un Master 1 en Arts du spectacle, elle a développé un éventail de compétences en théâtre, chant et danse. Sa spécialisation en clown à l'école Le Samovar a ajouté une touche ludique et expressive à son répertoire, soulignant sa capacité à captiver et à enchanter son public.
             </p>
           </div>
         </div>
@@ -75,7 +75,7 @@ import { companyInfo } from '../data';
             <h3 class="font-display text-2xl md:text-3xl text-night mb-2">Sur scène</h3>
             <p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Jeu, écriture & mise en scène</p>
             <p class="font-sans text-night/70 text-lg leading-relaxed">
-              Sur scène, Éléonore se distingue par son talent et sa polyvalence, jouant dans de nombreuses pièces et collaborant avec des metteurs en scène de renom à Paris. Sa créativité débordante l'a conduite à écrire et mettre en scène son premier spectacle, « Planète des Songes », une œuvre qui reflète son imagination et son désir constant d'innover.
+              Sur scène, Eléonore se distingue par son talent et sa polyvalence, jouant dans de nombreuses pièces et collaborant avec des metteurs en scène de renom à Paris. Sa créativité débordante l'a conduite à écrire et mettre en scène son premier spectacle, « Planète des Songes », une œuvre qui reflète son imagination et son désir constant d'innover.
             </p>
           </div>
         </div>
@@ -103,7 +103,7 @@ import { companyInfo } from '../data';
             <h3 class="font-display text-2xl md:text-3xl text-night mb-2">Transmission</h3>
             <p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Ateliers & parcours théâtre</p>
             <p class="font-sans text-night/70 text-lg leading-relaxed">
-              En plus de sa carrière artistique, Éléonore transmet son énergie et son savoir-faire à travers des ateliers de théâtre pour enfants, adolescents et adultes. Depuis 2020, elle participe avec l'ADDA du Tarn au « Parcours théâtre », inspirant de nombreux jeunes talents et partageant avec eux sa passion vibrante pour le théâtre.
+              En plus de sa carrière artistique, Eléonore transmet son énergie et son savoir-faire à travers des ateliers de théâtre pour enfants, adolescents et adultes. Depuis 2020, elle participe avec l'ADDA du Tarn au « Parcours théâtre », inspirant de nombreux jeunes talents et partageant avec eux sa passion vibrante pour le théâtre.
             </p>
           </div>
         </div>

src/pages/spectacles/[id].astro

@@ -63,18 +63,18 @@ if (!spectacle) {
 
       <!-- Hero -->
       <div class="flex flex-col md:flex-row gap-10 md:gap-16 items-center mb-16 md:mb-24">
-        <div class="fade-scale w-full md:w-1/2">
+        <div class="fade-scale w-full md:w-2/5">
-          <div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 border-4 md:border-8 border-white">
+          <div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 border-4 border-white">
             <img
-              src={spectacle.image}
+              src={spectacle.affiche}
               alt={spectacle.title}
-              class="object-cover w-full h-full"
+              class="w-full h-auto"
               referrerpolicy="no-referrer"
             />
           </div>
         </div>
 
-        <div class="fade-up w-full md:w-1/2 space-y-6 text-center md:text-left" style="transition-delay: 0.2s">
+        <div class="fade-up w-full md:w-3/5 space-y-6 text-center md:text-left" style="transition-delay: 0.2s">
           {spectacle.retired && (
             <div class="inline-block px-4 py-1 rounded-full bg-night/10 text-night/50 font-sans text-xs font-bold uppercase tracking-widest">
               Spectacle retraité

src/pages/spectacles/index.astro

@@ -42,14 +42,14 @@ const retraites = spectacles.filter(s => s.retired);
                 ]}
               >
                 <!-- Image -->
-                <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
+                <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-2/5 relative cursor-pointer">
                   <div class="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 class="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 class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
+                  <div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 group border-4 border-white">
                     <img
-                      src={spectacle.image}
+                      src={spectacle.affiche}
                       alt={spectacle.title}
-                      class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
+                      class="w-full h-auto transition-transform duration-1000 group-hover:scale-110"
                       referrerpolicy="no-referrer"
                     />
                     <div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
@@ -57,7 +57,7 @@ const retraites = spectacles.filter(s => s.retired);
                 </a>
 
                 <!-- Content -->
-                <div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
+                <div class="w-full md:w-3/5 space-y-6 md:space-y-8 text-center md:text-left">
                   <div class="flex items-center justify-center md:justify-start gap-3">
                     <div class="h-px w-8 md:w-12 bg-dream-coral"></div>
                     <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
@@ -112,14 +112,14 @@ const retraites = spectacles.filter(s => s.retired);
                   ]}
                 >
                   <!-- Image -->
-                  <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
+                  <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-2/5 relative cursor-pointer">
                     <div class="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 class="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 class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
+                    <div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 group border-4 border-white">
                       <img
-                        src={spectacle.image}
+                        src={spectacle.affiche}
                         alt={spectacle.title}
-                        class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
+                        class="w-full h-auto transition-transform duration-1000 group-hover:scale-110"
                         referrerpolicy="no-referrer"
                       />
                       <div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
@@ -127,7 +127,7 @@ const retraites = spectacles.filter(s => s.retired);
                   </a>
 
                   <!-- Content -->
-                  <div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
+                  <div class="w-full md:w-3/5 space-y-6 md:space-y-8 text-center md:text-left">
                     <div class="flex items-center justify-center md:justify-start gap-3">
                       <div class="h-px w-8 md:w-12 bg-dream-coral"></div>
                       <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
@@ -180,20 +180,20 @@ const retraites = spectacles.filter(s => s.retired);
                   index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row',
                 ]}
               >
-                <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
+                <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-2/5 relative cursor-pointer">
                   <div class="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 class="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 class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
+                  <div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 group border-4 border-white">
                     <img
-                      src={spectacle.image}
+                      src={spectacle.affiche}
                       alt={spectacle.title}
-                      class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
+                      class="w-full h-auto transition-transform duration-1000 group-hover:scale-110"
                       referrerpolicy="no-referrer"
                     />
                     <div class="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>
                 </a>
-                <div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
+                <div class="w-full md:w-3/5 space-y-6 md:space-y-8 text-center md:text-left">
                   <div class="flex items-center justify-center md:justify-start gap-3">
                     <div class="h-px w-8 md:w-12 bg-dream-coral"></div>
                     <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>