From 25a175f89d789124b246995651101c793c3fc21e Mon Sep 17 00:00:00 2001
From: Julie <contact@parisweb.art>
Date: Sun, 14 Jun 2026 16:02:36 +0200
Subject: [PATCH] discographie

---
 README.md                                 |   2 +
 app/components/RessourcesCard.vue         |  67 +++++-
 app/components/header/HeaderNav.vue       |   4 +-
 app/pages/index.vue                       |  50 +++--
 app/pages/mediation/scolaires.vue         |  12 +-
 app/pages/orchestre/discographie.vue      | 258 +++++++++++++++++++++-
 public/vinyle.svg                         |  25 +++
 server/api/__strapi__/[collection].get.js |   1 +
 tailwind.config.js                        |   3 +
 9 files changed, 383 insertions(+), 39 deletions(-)
 create mode 100644 public/vinyle.svg

diff --git a/README.md b/README.md
index a361d31..0ee1c79 100644
--- a/README.md
+++ b/README.md
@@ -169,6 +169,8 @@ https://bo.orchestre-ile.com/api/actualites?populate[image_illustration_actu]=tr
 
 https://bo.orchestre-ile.com/api/ressources-pedagogiques?populate[illustration_ressource]=true&populate[document_ressource]=true
 
+https://bo.orchestre-ile.com/api/disques?populate[illustration_disque]=true
+
 
 j'ai créé le endpoint home-tous-orchestre strapi pour saisir le contenu de cards. Donc peux-tu le remplacer par ce contenu strapi ?
 
diff --git a/app/components/RessourcesCard.vue b/app/components/RessourcesCard.vue
index f3de6bf..9d0a85f 100644
--- a/app/components/RessourcesCard.vue
+++ b/app/components/RessourcesCard.vue
@@ -23,20 +23,20 @@
       </span>
     </div>
 
-    <div class="grid gap-6 p-6">
-      <div class="grid gap-3">
-        <h3 class="text-xl font-extrabold leading-tight tracking-tight">
+    <div class="ressources-card__content grid gap-6 p-6">
+      <div class="ressources-card__copy grid min-w-0 gap-3">
+        <h3 class="ressources-card__title min-w-0 text-xl font-extrabold leading-tight">
           {{ title }}
         </h3>
         <p
           v-if="description"
-          class="text-sm"
+          class="ressources-card__description min-w-0 text-sm"
         >
           {{ description }}
         </p>
       </div>
 
-      <div class="grid gap-3">
+      <div class="ressources-card__actions grid gap-3">
         <template
           v-for="action in resourceActions"
           :key="action.id || action.label"
@@ -45,7 +45,7 @@
             v-if="action.url"
             :href="action.url"
             :download="getDownloadAttribute(action)"
-            class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
+            class="ressources-card__action group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -61,16 +61,16 @@
               </span>
             </span>
 
-            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
+            <span class="ressources-card__action-icon grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
               <span class="material-symbols-outlined text-xl">{{ getActionIcon(action) }}</span>
             </span>
           </a>
 
           <div
             v-else
-            class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
+            class="ressources-card__action flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
           >
-            <span>
+            <span class="min-w-0">
               <span class="block text-sm font-bold text-primary">{{ action.label }}</span>
               <span
                 v-if="action.size"
@@ -79,7 +79,7 @@
                 {{ action.size }}
               </span>
             </span>
-            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
+            <span class="ressources-card__action-icon grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
               <span class="material-symbols-outlined text-xl">{{ getActionIcon(action) }}</span>
             </span>
           </div>
@@ -196,7 +196,9 @@ function getActionIcon(action) {
 
 <style lang="scss" scoped>
 .ressources-card {
+  width: 100%;
   max-width: 392px;
+  container-type: inline-size;
   font-family: 'Inter', sans-serif;
 }
 
@@ -205,6 +207,51 @@ function getActionIcon(action) {
   aspect-ratio: 392 / 200;
 }
 
+.ressources-card__title,
+.ressources-card__description,
+.ressources-card__action {
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.ressources-card__copy {
+  max-width: 100%;
+  min-width: 0;
+}
+
+@container (max-width: 320px) {
+  .ressources-card__content {
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .ressources-card__copy,
+  .ressources-card__actions {
+    gap: 10px;
+  }
+
+  .ressources-card__title {
+    font-size: 1rem;
+  }
+
+  .ressources-card__description {
+    font-size: 0.8125rem;
+    text-align: justify;
+  }
+
+  .ressources-card__action {
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .ressources-card__action-icon {
+    width: 32px;
+    height: 32px;
+  }
+}
+
 .material-symbols-outlined {
   font-variation-settings:
     'FILL' 0,
diff --git a/app/components/header/HeaderNav.vue b/app/components/header/HeaderNav.vue
index 81f0073..f6ff51a 100644
--- a/app/components/header/HeaderNav.vue
+++ b/app/components/header/HeaderNav.vue
@@ -41,7 +41,7 @@
               <!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> -->
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
-              <!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> -->
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
             </ul>
           </li>
@@ -170,7 +170,7 @@
                 <!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> -->
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
-                <!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> -->
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
               </ul>
             </li>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3ebdd68..0d95572 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -203,38 +203,40 @@
   console.log("Bienvenue : ",config.title)
 
 
-  //--------------------
-  // DONNÉES POUR LES CONCERTS À VENIR …
-  //--------------------
+    //--------------------
+    // DONNÉES POUR LES CONCERTS À VENIR …
+    //--------------------
     const saisonsFiltre = computed(() => {
       const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
         .filter(Boolean)
 
       return [...new Set(values)]
     })
-  const { concerts, refresh } = useConcerts({
-      locale: "fr-FR",
-      populate: {
-          saison_concert: true,
-          image_illustration_concert: true,
-          representation_concert: { lieu_representation: true },
-      },
-      filters: {
-          saison_concert: {
-            nom_saison: {
-                $in: saisonsFiltre.value,
+    console.log("saisonsFiltre.value : ",saisonsFiltre.value)
+    const { concerts, refresh } = useConcerts({
+        locale: "fr-FR",
+        pageSize: 200,
+        populate: {
+            saison_concert: true,
+            image_illustration_concert: true,
+            representation_concert: { lieu_representation: true },
+        },
+        filters: {
+            saison_concert: {
+              nom_saison: {
+                  $in: saisonsFiltre.value,
+              },
             },
-          },
-      },
-      upcomingOnly: true,
-      limit: 3,
-  })
+        },
+        upcomingOnly: true,
+        limit: 3,
+    })
 
-  onMounted(() => {
-      if (!concerts.value?.length) {
-          refresh()
-      }
-  })
+    onMounted(() => {
+        if (!concerts.value?.length) {
+            refresh()
+        }
+    })
 
 
 
diff --git a/app/pages/mediation/scolaires.vue b/app/pages/mediation/scolaires.vue
index 31fc713..fa2e066 100644
--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -398,10 +398,20 @@ et de la programmation jeune public"
     }
     .ressources-pedagogiques__list {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 392px));
+      grid-template-columns: repeat(auto-fit, minmax(0, 392px));
       gap: 24px;
       justify-content: center;
     }
+    @media (min-width: 400px) and (max-width: 900px) {
+      .ressources-pedagogiques__list {
+        grid-template-columns: repeat(2, minmax(0, 392px));
+      }
+    }
+    @media (max-width: 399px) {
+      .ressources-pedagogiques__list {
+        grid-template-columns: minmax(0, 392px);
+      }
+    }
     .strapi-blocks {
       h2 {
         color: var(--c-bleu);
diff --git a/app/pages/orchestre/discographie.vue b/app/pages/orchestre/discographie.vue
index 598c04c..76db471 100644
--- a/app/pages/orchestre/discographie.vue
+++ b/app/pages/orchestre/discographie.vue
@@ -1,13 +1,267 @@
 <template>
   <div>
-    test
+    <!-- ================== -->
+    <!-- EN-tête Fond noir -->
+    <!-- ================== -->
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
+      <div>
+        <SectionContent pad="xs" class="">
+          <SectionTitle tone="invert" pad="">
+            DISCOGRAPHIE
+          </SectionTitle>
+          <DsHeading as="h3" tone="invert" class="max-w-[500px]">
+            Collection Orchestre national d’Île-de-France chez NoMadMusic
+          </DsHeading>
+        </SectionContent>
+        <SectionContent pad="xs" class="">
+          <DsText tone="invert" size="lg" align="justify" class="theme_bandeau--grid--right--text" >
+            C’est en 2016 que naît la collaboration fructueuse entre l’Orchestre national d’Île-de-France et l’innovant label NoMad Music. Depuis nombre d’enregistrements salués par la critique sont parus parmi lesquels Bel canto amore mio (2016), un album consacré à Manuel De Falla (2017), La Bien-Aimée de Darius Milhaud et L’Oiseau de feu d’Igor Stravinski (2018), Ludwig, un album consacré à Beethoven avec le pianiste Cédric Tiberghien (2018) et un autre dédié à Gustav Mahler avec le baryton Markus Werba (2019). Sont parus en janvier 2021 deux enregistrements sous la direction de Case Scaglione : la Symphonie n°3 « Eroica » de Beethoven et un disque Wagner avec la mezzo Michelle DeYoung et le ténor Simon O’Neil.
+          </DsText>
+        </SectionContent>
+        <SectionContent pad="xs" class="">
+          <DsHeading as="h3" tone="invert">
+            Collection Solo chez NoMadMusic
+          </DsHeading>
+        </SectionContent>
+        <SectionContent pad="xs" class="">
+          <DsText tone="invert" size="lg" align="justify" class="theme_bandeau--grid--right--text" >
+            Solo, la collection discographique créée par l’Orchestre national d’Île-de-France, a pour vocation de mettre en valeur la richesse des individualités artistiques qui composent l’Orchestre. Au travers de différents enregistrements, à raison d’un à deux par saison, des musiciennes et musiciens de l’Orchestre peuvent ainsi se produire en solo, en duo ou en petit effectif de musique de chambre et présenter des répertoires variés.
+          </DsText>
+        </SectionContent>
+      </div>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- Listes des Disques -->
+    <!-- ================== -->
+    <PageSection padded_size="md" content-size="default" class="pl-2 pr-2">
+      <SectionContent v-if="pending">
+        <DsText>Chargement des disques...</DsText>
+      </SectionContent>
+
+      <SectionContent v-else-if="error">
+        <DsText>Impossible de charger les disques pour le moment.</DsText>
+      </SectionContent>
+
+      <SectionContent v-else>
+        <section
+          v-for="collection in disquesParCollection"
+          :key="collection.nom"
+          class="discographie-collection"
+        >
+          <div class="flex items-center gap-4 mb-8">
+            <h3 class="text-2xl font-bold tracking-tight uppercase">{{ collection.nom }}</h3>
+            <div class="h-[2px] flex-1 bg-surface-container"></div>
+          </div>
+
+          <div class="flex justify-center">
+            <section class="flex flex-wrap gap-y-12 gap-x-6 xl:gap-8 2xl:gap-16 mb-16 w-full max-w-[88rem]">
+              <article
+                v-for="disque in collection.disques"
+                :key="disque.id"
+                class="discographie-disque w-full overflow-hidden rounded-md bg-white shadow-lg xm:max-w-[258px] sm:max-w-[278px] md:max-w-[310px] lg:max-w-[300px] xl:max-w-[345px] 2xl:max-w-[380px]"
+              >
+                <div class="relative flex aspect-[3/2] bg-surface-container-low">
+                  <div class="w-[68%] bg-surface-container-lowest">
+                    <img
+                      v-if="disque.illustration"
+                      :src="disque.illustration.url"
+                      :alt="disque.illustration.alternativeText"
+                      class="h-full w-full object-cover"
+                      loading="lazy"
+                      decoding="async"
+                    >
+                  </div>
+
+                  <div class="discographie-disque__vinyl relative flex-1 bg-[#070707]">
+                    <span
+                      v-if="disque.sortie"
+                      class="absolute right-4 top-4 rounded bg-[#fff3f3] px-2.5 py-1 text-sm font-extrabold text-[#d81938]"
+                    >
+                      {{ disque.sortie }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p-5">
+                  <h4 class="mb-1 text-2xl font-extrabold leading-tight">
+                    {{ disque.titre }}
+                  </h4>
+
+                  <div v-if="disque.distribution.length" class="discographie-disque__meta mb-4 text-base leading-relaxed">
+                    <StrapiBlocksConvert :blocks="disque.distribution" />
+                  </div>
+                  <div v-if="disque.compositeurs.length" class="discographie-disque__meta mb-5 text-base leading-relaxed">
+                    <StrapiBlocksConvert :blocks="disque.compositeurs" />
+                  </div>
+
+                  <p v-if="disque.descriptionText" class="mb-5 text-base leading-relaxed">
+                    {{ disque.descriptionText }}
+                  </p>
+
+
+
+                  <a
+                    v-if="disque.lienNomadMusic"
+                    :href="disque.lienNomadMusic"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex w-full items-center justify-center gap-3 rounded-md bg-[#E20018] px-5 py-3 text-base font-extrabold text-white transition-colors hover:bg-[#e3061391]"
+                  >
+                    <span class="grid h-4 w-4 place-items-center rounded-full border border-white/80 text-[9px] leading-none">
+                      ◉
+                    </span>
+                    <span>NoMadMusic</span>
+                  </a>
+
+                  <a
+                    v-if="disque.lienAutre"
+                    :href="disque.lienAutre"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex w-full items-center justify-center gap-3 rounded-md bg-[#E20018] px-5 py-3 text-base font-extrabold text-white transition-colors hover:bg-[#e3061391]"
+                  >
+                    <span class="grid h-4 w-4 place-items-center rounded-full border border-white/80 text-[9px] leading-none">
+                      ◉
+                    </span>
+                    <span>En savoir plus</span>
+                  </a>
+                </div>
+              </article>1
+            </section>
+          </div>
+        </section>
+      </SectionContent>
+    </PageSection>
+
   </div>
 </template>
 
 <script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
 
+  const { items: disquesItems, pending, error } = useStrapi(
+    "/api/__strapi__/disques",
+    {
+      locale: "fr-FR",
+      sort: "ordre_disque:asc",
+      fetchAll: true,
+      populate: {
+        illustration_disque: true,
+      },
+    }
+  )
+
+  const disques = computed(() => {
+    return disquesItems.value
+      .map(normalizeDisque)
+      .sort((a, b) => {
+        if (a.ordre !== b.ordre) return a.ordre - b.ordre
+        return a.titre.localeCompare(b.titre, "fr-FR")
+      })
+  })
+
+  const disquesParCollection = computed(() => {
+    const collections = new Map()
+
+    for (const disque of disques.value) {
+      const nom = disque.collection || "Autres disques"
+      if (!collections.has(nom)) {
+        collections.set(nom, {
+          nom,
+          disques: [],
+        })
+      }
+      collections.get(nom).disques.push(disque)
+    }
+
+    return Array.from(collections.values())
+  })
+
+  function normalizeDisque(item) {
+    return {
+      id: item.documentId || item.id,
+      titre: item.titre_disque || "",
+      collection: item.collection_disque || "",
+      sortie: item.sortie_disque || "",
+      distribution: normalizeBlocks(item.distribution_disque),
+      compositeurs: normalizeBlocks(item.compositeurs_disque),
+      description: normalizeBlocks(item.description_disque),
+      descriptionText: blocksToPlainText(item.description_disque),
+      lienNomadMusic: item.lien_nomadmusic || "",
+      lienAutre: item.lien_autre || "",
+      ordre: Number(item.ordre_disque ?? Number.MAX_SAFE_INTEGER),
+      illustration: normalizeStrapiMedia(item.illustration_disque),
+    }
+  }
+
+  function normalizeBlocks(blocks) {
+    return Array.isArray(blocks) ? blocks : []
+  }
+
+  function getFirstBlockLine(blocks) {
+    const text = blocksToPlainText(blocks)
+    return text.split("\n").map((line) => line.trim()).find(Boolean) || ""
+  }
+
+  function blocksToPlainText(blocks) {
+    if (!Array.isArray(blocks)) return ""
+
+    return blocks
+      .map((block) => blockToPlainText(block))
+      .filter(Boolean)
+      .join("\n")
+      .trim()
+  }
+
+  function blockToPlainText(block) {
+    if (!block || typeof block !== "object") return ""
+
+    if (Array.isArray(block.children)) {
+      return block.children.map(blockToPlainText).join("")
+    }
+
+    return typeof block.text === "string" ? block.text : ""
+  }
+
+  function normalizeStrapiMedia(media) {
+    if (!media?.url) return null
+
+    return {
+      id: media.id || media.documentId || media.url,
+      url: media.url,
+      alternativeText: media.alternativeText || media.caption || "",
+    }
+  }
 </script>
 
 <style lang="scss">
+  .discographie-disque {
+    &__vinyl::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        repeating-radial-gradient(
+          circle at -18% 50%,
+          rgba(255, 255, 255, 0.13) 0,
+          rgba(255, 255, 255, 0.13) 1px,
+          transparent 1px,
+          transparent 15px
+        );
+      opacity: 0.35;
+    }
 
-</style>
\ No newline at end of file
+    &__meta {
+      .strapi-blocks {
+        display: grid;
+        gap: 2px;
+      }
+
+      .strapi-blocks--p {
+        margin: 0;
+      }
+    }
+  }
+</style>
diff --git a/public/vinyle.svg b/public/vinyle.svg
new file mode 100644
index 0000000..30d3c0a
--- /dev/null
+++ b/public/vinyle.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Vinyle">
+  <circle cx="256" cy="256" r="230" fill="#111"/>
+  <circle cx="256" cy="256" r="205" fill="none" stroke="#222" stroke-width="2"/>
+  <circle cx="256" cy="256" r="170" fill="none" stroke="#2a2a2a" stroke-width="2"/>
+  <circle cx="256" cy="256" r="135" fill="none" stroke="#222" stroke-width="2"/>
+  <circle cx="256" cy="256" r="100" fill="none" stroke="#2a2a2a" stroke-width="2"/>
+
+  <circle cx="256" cy="256" r="72" fill="#d94b3d"/>
+  <circle cx="256" cy="256" r="48" fill="#c93f33"/>
+  <circle cx="256" cy="256" r="12" fill="#111"/>
+
+  <path d="M256 26a230 230 0 0 1 203 122"
+        fill="none"
+        stroke="#ffffff"
+        stroke-width="18"
+        stroke-linecap="round"
+        opacity="0.10"/>
+
+  <path d="M162 99a185 185 0 0 1 188-8"
+        fill="none"
+        stroke="#ffffff"
+        stroke-width="8"
+        stroke-linecap="round"
+        opacity="0.14"/>
+</svg>
\ No newline at end of file
diff --git a/server/api/__strapi__/[collection].get.js b/server/api/__strapi__/[collection].get.js
index a052c7c..a16dbbb 100644
--- a/server/api/__strapi__/[collection].get.js
+++ b/server/api/__strapi__/[collection].get.js
@@ -24,6 +24,7 @@ const COLLECTION_MAP = {
   "home-partout-pour-tous": "/api/home-partout-pour-tous",
   "home-tous-orchestre": "/api/home-tous-orchestre",
   actualites: "/api/actualites",
+  disques: "/api/disques",
   "ressources-pedagogiques": "/api/ressources-pedagogiques",
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index b99c3bf..975b99e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,9 @@ export default {
   ],
   theme: {
     extend: {
+      screens: {
+        xm: '570px',
+      },
       colors: {
         surface: '#faf8ff',
         'on-secondary-fixed-variant': '#4d5d73',