décalage

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: '' },
@@ -86,4 +86,4 @@
     margin-top: auto;
   }
 
-</style>
+</style>

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>