décalage

README.md

@@ -8,6 +8,21 @@ Démarrer NUXT
 - npm run dev
 - URL : http://localhost:3000/
 
+# Variables d'environnement
+Elles sont **définies** dans `ecosystem.config.cjs` (PM2) et **consommées** dans `nuxt.config.js` via `runtimeConfig`.
+
+Exemples de variables :
+- `NUXT_PUBLIC_STRAPI_URL`
+- `NUXT_PUBLIC_SAISON`
+- `NUXT_STRAPI_TOKEN`
+
+Utilisation dans le code :
+- `runtimeConfig.public.saison`
+- `runtimeConfig.public.strapiUrl`
+
+Après modification de `ecosystem.config.cjs` :
+- `pm2 reload ecosystem.config.cjs --only wondif_vue`
+
 # Site de développement
 ## URL
 https://2025.orchestre-ile.com/
@@ -42,7 +57,8 @@ cd /var/www/wondif_vue
 git pull origin main        # récupère le dernier code
 npm ci                      # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
 npm run build               # rebuild Nuxt
-pm2 restart wondif_vue     # redémarre le process
+pm2 reload ecosystem.config.cjs --only wondif_vue     # redémarre le process avec les nouvelles variables d'environnement de ecosystem
+
 
 # STRAPI
 ## URL de PROD

app/components/Breadcrumb.vue

@@ -2,7 +2,7 @@
   <div v-if="items.length > 1" aria-label="Fil d’Ariane" class="breadcrumb">
     <ul class="breadcrumb__list">
       <li v-for="(item, i) in items" :key="item.to" class="breadcrumb__item">
-        <NuxtLink v-if="i < items.length - 1" :to="item.to">
+        <NuxtLink v-if="i < items.length - 1 && !item.noLink" :to="item.to">
           <img
             v-if="i === 0"
             src="/img/icones/house-grey.svg"
@@ -32,6 +32,27 @@
     professionnels: "Professionnels"
   }
 
+  function resolveTo(part, index, parts, acc) {
+    if (part === 'concerts') {
+      const next = parts[index + 1] || ''
+      if (next.startsWith('concert-')) {
+        const from = typeof route.query.from === 'string' ? route.query.from : ''
+        if (from === 'agenda') return '/concerts/agenda'
+        if (from === 'saison') return '/concerts/saison'
+        if (from === 'jeune-public') return '/concerts/jeune-public'
+      }
+    }
+    if (part === 'orchestre') {
+      const next = parts[index + 1] || ''
+      if (next.startsWith('artiste-') || next.startsWith('artisteinvitee-') || next.startsWith('artistesinvitees-')) {
+        const from = typeof route.query.from === 'string' ? route.query.from : ''
+        if (from === 'musiciens') return '/orchestre/musiciens'
+        if (from === 'artistesinvitees') return '/orchestre/artistesinvitees'
+      }
+    }
+    return acc
+  }
+
   function humanize(segment) {
     return segment
       .replace(/-/g, ' ')
@@ -41,6 +62,7 @@
   const items = computed(() => {
     const parts = route.path.split('/').filter(Boolean)
     const crumbs = [{ to: '/', label: 'Accueil' }]
+    const from = typeof route.query.from === 'string' ? route.query.from : ''
 
     let acc = ''
     parts.forEach((part, index) => {
@@ -50,7 +72,35 @@
         ? props.currentLabel
         : (labelMap[part] || humanize(decodeURIComponent(part)))
 
-      crumbs.push({ to: acc, label })
+      const noLink = part === 'orchestre' || part === 'concerts'
+      crumbs.push({ to: resolveTo(part, index, parts, acc), label, noLink })
+
+      if (part === 'concerts') {
+        const next = parts[index + 1] || ''
+        if (next.startsWith('concert-')) {
+          if (from === 'agenda') {
+            crumbs.push({ to: '/concerts/agenda', label: 'Agenda' })
+          }
+          if (from === 'saison') {
+            crumbs.push({ to: '/concerts/saison', label: 'Saison' })
+          }
+          if (from === 'jeune-public') {
+            crumbs.push({ to: '/concerts/jeune-public', label: 'Jeune public' })
+          }
+        }
+      }
+
+      if (part === 'orchestre') {
+        const next = parts[index + 1] || ''
+        if (next.startsWith('artiste-') || next.startsWith('artisteinvitee-')) {
+          if (from === 'musiciens') {
+            crumbs.push({ to: '/orchestre/musiciens', label: 'Les musiciens' })
+          }
+          if (from === 'artistesinvitees') {
+            crumbs.push({ to: '/orchestre/artistesinvitees', label: 'Les artistes invités' })
+          }
+        }
+      }
     })
 
     return crumbs

app/components/concert/ConcertCard.vue

@@ -49,7 +49,7 @@
   defineProps({
     id: { type: [String, Number], required: true },
     title: { type: String, required: true },
-    lieu: { type: String, required: true },
+    lieu: { type: String, default: '' },
     dateISO: { type: String, required: true },      // ex: "2026-01-15T20:00:00+01:00"
     dateLabel: { type: String, required: true },    // ex: "Jeu. 15 jan. 2026 — 20h"
     description: { type: String, default: '' },

app/components/section/Decalage.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="decalage_cont"
+         :class="[
+            `decalage_cont--${position}`
+        ]""
+    >
+        <div class="decalage"
+             :class="[
+                 `decalage--${tone}`,
+                 `decalage--${position}`
+             ]"
+             >
+            <div class="decalage_inner">
+                <DsHeading v-if="$slots.title" :tone=titleTone as="h2" textcase="uppercase">
+                  <slot name="title" />
+                </DsHeading>
+                <slot />
+                <div v-if="$slots.button" class="decalage_button">
+                    <slot name="button" />
+                </div>
+                <div v-if="ensavoirplusTarget" class="decalage_button">
+                    <DsButton :textColor=buttonTone :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+import DsText from '@root/design-system/primitives/DsText.vue'
+import DsButton from '@root/design-system/primitives/DsButton.vue'
+  
+    defineProps({
+        tone: { type: String, default: 'default' },
+        titleTone: { type: String, default: 'default' },
+        buttonTone: { type: String, default: 'default' },
+        position: { type: String, default: 'left' },
+        ensavoirplusTarget: { type: String, default: '' }
+    })
+    
+    function toggleTarget(ensavoirplusTarget) {
+        document.getElementById(ensavoirplusTarget).classList.toggle("decalage_ensavoirplus--hidden");
+    }
+</script>
+
+<style lang="scss">
+    
+    .decalage_cont {
+        margin-bottom: 70px;
+        display: flex;
+        
+        &--left {
+            justify-content: flex-start;
+        }
+        
+        &--right {
+            justify-content: flex-end;
+        }       
+        
+    }
+
+    .decalage {
+        padding-top: 50px;
+        padding-bottom: 50px;
+        display: flex;
+        
+        @media (min-width: 0px) and (max-width: 700px) {
+            width: 89vw;
+        }
+        @media (min-width: 700px) {
+          width: 67vw;
+        }
+        @media (min-width: 800px) {
+          width: 50vw;
+        }
+        
+        /* tons = arrière-plan section */
+        &--default { background: transparent; }
+        &--brand   { background: var(--c-brand_rouge);}
+        &--dark    { background: var(--c-backgroud-black); }
+        &--brandreverse    { background: var(--c-backgroud-brandreverse); }
+        &--jaune { background: var(--c-background-jaune); }
+        
+        /* position = arrière-plan section */
+        &--right {
+            
+            .decalage_inner {
+                
+                padding-left: 50px;                
+                
+                @media (max-width: 599px) {
+                  padding-left: 40px;
+                }
+            }
+        }
+        
+        &--left {
+            justify-content: flex-end;            
+           
+            .decalage_inner {
+                padding-right: 50px;
+                
+                @media (max-width: 599px) {
+                    padding-right: 40px;
+                  }
+            }
+            
+        }
+
+    }
+    
+    .decalage_inner {
+        
+        @media (min-width: 0px) {
+                width: 100%;                
+            }
+            @media (min-width: 600px) {
+                width: calc(290px + 39vw);
+            }
+            @media (min-width: 700px) {
+                width: calc(330px + 17vw);
+            }
+            @media (min-width: 800px) {
+                width: 390px;
+            }   
+            @media (min-width: 900px) {
+                width: 430px;
+            }
+            @media (min-width: 1000px) {
+                width: 475px;
+            }
+            @media (min-width: 1100px) {
+                width: 510px;
+            }
+            @media (min-width: 1200px) {
+                width: 550px;
+            }
+            @media (min-width: 1300px) {
+                width: 600px;
+            }
+            @media (min-width: 1400px) {
+                width: 650px;
+            }
+            @media (min-width: 1500px) {
+                width: 700px;
+            }
+    }
+    
+    .decalage_button {
+        margin-top: 10px;
+        text-align: right;
+    }
+    
+    .decalage_ensavoirplus--hidden {
+        display: none;
+    }
+</style>

app/pages/concerts/agenda.vue

@@ -20,7 +20,7 @@
                 :description="c.resume_concert"
                 :imageUrl="c.image_illustration_concert?.url"
                 :imageAlt="c.image_illustration_concert?.alternativeText"
-                :href="`concert-${c.slug_concert}`"
+                :href="`concert-${c.slug_concert}?from=agenda`"
             />
           </ConcertCardList>
         </PageSection>

app/pages/concerts/concert-[id].vue

@@ -654,7 +654,10 @@
       margin-bottom: 70px;
       padding-top: 50px;
       padding-right: 30px;
-      padding-left: 40px;
+      padding-left: 50px;
+      @media (max-width: 599px) {
+        padding-left: 40px;
+      }
       padding-bottom: 50px;
 
       /* DÉCALAGE DU BLOC VERS LA DROITE */

app/pages/concerts/jeune-public.vue

@@ -20,7 +20,7 @@
                 :description="c.resume_concert"
                 :imageUrl="c.image_illustration_concert?.url"
                 :imageAlt="c.image_illustration_concert?.alternativeText"
-                :href="`concert-${c.slug_concert}`"
+                :href="`concert-${c.slug_concert}?from=jeune-public`"
             />
           </ConcertCardList>
         </PageSection>

app/pages/concerts/saison.vue

@@ -20,7 +20,7 @@
                 :description="c.resume_concert"
                 :imageUrl="c.image_illustration_concert?.url"
                 :imageAlt="c.image_illustration_concert?.alternativeText"
-                :href="`concert-${c.slug_concert}`"
+                :href="`concert-${c.slug_concert}?from=saison`"
             />
           </ConcertCardList>
         </PageSection>
@@ -57,7 +57,7 @@
             saison_concert: {
                 nom_saison: {
                     $eq: String(runtimeConfig.public.saison),
-            },
+                },
             },
         },
         upcomingOnly: false,

app/pages/index.vue

@@ -26,7 +26,7 @@
           :description="c.resume_concert"
           :imageUrl="c.image_illustration_concert?.url"
           :imageAlt="c.image_illustration_concert?.alternativeText"
-          :href="`/concerts/concert-${c.slug_concert}`"
+          :href="`/concerts/concert-${c.slug_concert}?from=agenda`"
         />
       </ConcertCardList>
     </PageSection>

app/pages/orchestre/artistesinvitees.vue

@@ -51,7 +51,7 @@
           <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
 
           <DsHeading as="h4" tone="default" class="musicien_card_nom">
-            <NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}`">
+            <NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}?from=artistesinvitees`">
               {{ a.nom_artiste_invite }}
             </NuxtLink>
           </DsHeading>
@@ -99,7 +99,7 @@
           <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
 
           <DsHeading as="h4" tone="default" class="musicien_card_nom">
-            <NuxtLink :to="`/orchestre/artistesinvitees-${a.slug_artiste_invite}`">
+            <NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}?from=artistesinvitees`">
               {{ a.nom_artiste_invite }}
             </NuxtLink>
           </DsHeading>

app/pages/orchestre/missions.vue

@@ -1,10 +1,48 @@
 <template>
   <div>
-    Page en construction Missions
+    <PageSection>
+        <DsHeading as="h2" tone="invert" textcase="uppercase" class="programme_titre">
+          PROGRAMME
+        </DsHeading>
+        <DsText as="p">
+            Créé en 1974, l’Orchestre national d’Île-de-France se compose de 95 musiciens engagés et passionnés. Notre formation symphonique propose de nombreux concerts, spectacles et ateliers musicaux sur l’ensemble du territoire francilien. Notre devise : porter la musique classique partout et pour tous ! Programmation, actions éducatives, initiatives culturelles, toute l’activité de l’Orchestre exprime ses valeurs et les missions qui l’animent.
+        </DsText>
+    </Pagesection>
+      
+      <PageSection :content=false>
+        <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache">
+          <template #title>
+              La Région Île-de-France, le territoire de l’Orchestre
+          </template>
+                <DsText as="p" tone="invert" >
+                    L’Orchestre national d’Île-de-France se déploie sur les 8 départements de la région parisienne, pour amener la musique classique auprès de publics variés. Il se produit dans les salles de spectacle et les théâtres d’Île-de-France comme dans les lieux dépourvus d’offre culturelle. C’est ainsi que ses musiciens investissent régulièrement certains endroits atypiques tels que les hôpitaux, les usines ou les centres pénitentiaires.
+                </DsText>s
+        </Decalage>
+    </Pagesection>
+      
+      <PageSection>
+      <div id="texte_cache" class="decalage_ensavoirplus--hidden">Texte caché</div>
+      </Pagesection>
+      
+      <PageSection :content=false>
+        <Decalage tone="brandreverse" " title-tone="invert" position="right">
+            <template #title>
+                  Studio d’enregistrement et location d’instruments
+            </template>
+                <DsText as="p">
+L’Orchestre national d’Île-de-France accompagne les professionnels et les amateurs dans leurs activités musicales.
+Aux portes de Paris, nous mettons à leur disposition un studio d’enregistrement high-tech et plusieurs espaces de répétition. Nous leur proposons également plus de 3000 instruments à la location à travers un parc instrumental ouvert sur le monde et ses traditions musicales les plus inattendues !
+                </DsText>
+            
+        </Decalage>
+    </Pagesection>
   </div>
 </template>
 
 <script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsButton from '@root/design-system/primitives/DsButton.vue'
 
 </script>
 

app/pages/orchestre/musiciens.vue

@@ -51,7 +51,7 @@
           <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
 
           <DsHeading as="h4" tone="default" class="musicien_card_nom">
-            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
+            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
               {{ a.nom_artiste_ondif }}
             </NuxtLink>
           </DsHeading>
@@ -99,7 +99,7 @@
           <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
 
           <DsHeading as="h4" tone="default" class="musicien_card_nom">
-            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
+            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
               {{ a.nom_artiste_ondif }}
             </NuxtLink>
           </DsHeading>