update a lot of change since a while

app/components/concert/ConcertCard.vue

@@ -0,0 +1,88 @@
+<template>
+  <DsCard class="concert-card">
+    <div class="concert-card__grid">
+      <!-- Image -->
+      <div class="concert-card__media">
+        <DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
+      </div>
+
+      <!-- Content -->
+      <div class="concert-card__content">
+        <DsHeading as="h4" tone="default" class="concert-card__title">
+          {{ title }}
+        </DsHeading>
+
+        <!-- Meta : date + lieu -->
+        <div class="concert-card__meta">
+          <DsHeading as="h5" tone="default">
+            {{ venue }}
+          </DsHeading>
+          <DsHeading as="h6" tone="default">
+            <time :datetime="dateISO">{{ dateLabel }}</time>
+          </DsHeading>
+        </div>
+
+        <!-- Description -->
+        <DsText as="p" tone="default" :clamp="3" class="concert-card__description">
+          {{ description }}
+        </DsText>
+
+        <!-- Actions -->
+        <div class="concert-card__actions">
+          <DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
+            Réserver
+          </DsButtonArrow>
+        </div>
+      </div>
+    </div>
+  </DsCard>
+</template>
+
+<script setup>
+  import DsCard from '@root/design-system/components/DsCard.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
+
+
+  defineProps({
+    id: { type: [String, Number], required: true },
+    title: { type: String, required: true },
+    venue: { type: String, required: true },
+    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: '' },
+    imageUrl: { type: String, default: '' },
+    imageAlt: { type: String, default: '' },
+  })
+</script>
+
+<style lang="scss">
+
+  .concert-card__grid {
+    display: grid;
+    gap: var(--sp-16);
+    align-items: start;
+  }
+
+  .concert-card__content {
+    display: grid;
+    gap: var(--sp-6);
+    max-width: 518px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .concert-card__meta {
+    margin-top: calc(var(--sp-4) * -1);
+  }
+  .concert-card__description {
+    margin-top: 10px;
+    margin-bottom: 20px;
+  }
+  .concert-card__actions {
+    margin-top: auto;
+  }
+
+</style>