dev

app/components/ContactSpecifique.vue

@@ -0,0 +1,88 @@
+<template>
+  <section class="contact_spe_cont">
+      <DsHeading as="h1" tone="default" textcase="uppercase">
+        {{titre}}
+      </DsHeading>
+      <div class="confetti"></div>
+      <div class="contact_spe_descripion">
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--nom">{{ nom }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--poste">{{ poste }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ numero }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ mail }}</div>
+      </div>
+  </section>
+</template>
+
+<script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+
+  defineProps({
+    titre: {
+      type: String,
+      required: true
+    },    
+    nom: {
+      type: String,
+      required: true
+    },
+    poste: {
+      type: String,
+      required: true
+    },
+    numero: {
+      type: String,
+      required: true
+    },
+    mail: {
+      type: String,
+      required: true
+    }
+  })
+</script>
+
+<style lang="scss">
+
+  .contact_spe_cont {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      @media (max-width: 599px) {
+          padding-left: 10px;
+          padding-right: 10px;
+      }
+
+      font-family: var(--font-roboto);
+
+      margin-top: 30px;
+
+      h1 {
+        text-align: center;
+      }
+
+      .contact_spe_descripion {
+        max-width: 370px;
+        .contact_spe_descripion_item {
+          padding-bottom: 10px;
+          &--nom {
+            font-weight: var(--fw-semibold);
+          }
+          &--poste {
+            font-weight: var(--fw-light);
+          }
+        }
+      }
+
+
+  }
+  .confetti {
+    height: 20px;
+    width: 50px;
+    margin-top: 15px;
+    margin-bottom: 30px;
+    background-color: var(--c-brand_rouge);
+    transform: rotate(20deg);
+  }
+
+
+</style>

app/components/concert/ConcertCard.vue

@@ -3,7 +3,8 @@
     <div class="concert-card__grid">
       <!-- Image -->
       <div class="concert-card__media">
-        <DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
+        <DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
+        <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
       </div>
 
       <!-- Content -->

app/components/concert/ConcertCardList.vue

@@ -94,7 +94,6 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 340px;
-      min-width: 500px;
     }
   }
 
@@ -105,7 +104,6 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 380px;
-      min-width: 500px;
     }
   }
 
@@ -125,8 +123,7 @@
     }
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
-      flex: 2 1 440px;
-      min-width: 500px;
+      flex: 2 1 370px;
     }
   }