From 4eeaf23d8008370f3a038bc0a9729fc5c1e0c667 Mon Sep 17 00:00:00 2001
From: Julie <contact@parisweb.art>
Date: Mon, 13 Apr 2026 13:45:39 +0200
Subject: [PATCH] dev

---
 app/components/FilteredCards.vue          |  15 +-
 app/pages/concerts/mag.vue                | 232 +++++++++++++++++++++-
 app/pages/index.vue                       |  27 +--
 app/pages/mediation/petite-enfance.vue    |   2 +-
 app/pages/orchestre/missions.vue          |   2 +-
 server/api/__strapi__/[collection].get.js |   1 +
 6 files changed, 249 insertions(+), 30 deletions(-)

diff --git a/app/components/FilteredCards.vue b/app/components/FilteredCards.vue
index ee09f09..b353a73 100644
--- a/app/components/FilteredCards.vue
+++ b/app/components/FilteredCards.vue
@@ -46,10 +46,11 @@
 
                     <!-- Content -->
                     <div class="theme_tao--cardlist--card--content">
-                    <DsHeading as="h5" tone="default">
-                        {{ card.title }}
-                    </DsHeading>
-
+                    <NuxtLink v-if="card.url" :to="card.url" class="square-card__title-link">
+                        <DsHeading as="h5" tone="default">
+                            {{ card.title }}
+                        </DsHeading>
+                    </NuxtLink>
                     <DsText as="p" tone="default" :clamp="6">
                         <span v-html="card.descriptionHtml" />
                     </DsText>
@@ -61,6 +62,7 @@
     </SectionContent>
 </template>
 
+
 <script setup>
 
     import { ref, computed, watch, nextTick } from 'vue'
@@ -98,6 +100,7 @@
                 🔴 Ile de France | Ministère de la culture<br>
                 🎨 Agence belleville.eu`,
             tags: ['famille'],
+            url: "https://ondif.shop.secutix.com/selection/event/date?productId=10229737867151"
         },
         {
             id: 'insta-2',
@@ -109,6 +112,7 @@
             Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.<br>
             Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
             tags: ['famille'],
+            url: ""
         },
         {
             id: 'insta-3',
@@ -119,6 +123,7 @@
             Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
             Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
             tags: ['rencontre'],
+            url: ""
         },
         {
             id: 'insta-4',
@@ -129,6 +134,7 @@
             Entre ateliers d’enregistrement sonore, découverte de la lutherie, répétitions commentées et musique à l’hôpital, les rencontres se sont multipliées, au plus près des publics et des territoires.<br>
             Retour en images sur ces expériences qui font vivre l’Orchestre 🎶`,
             tags: ['famille'],
+            url: ""
         },
         {
             id: 'insta-5',
@@ -138,6 +144,7 @@
             descriptionHtml: `Entre concerts symphoniques, soirées à l’opéra, et musique de chambre, nous avons eu le plaisir de partager des univers variés et de rencontrer un public toujours plus curieux et enthousiaste.<br>
             Retour en images sur ces temps forts qui font vibrer l’Ondif ! 🎶`,
             tags: ['rencontre'],
+            url: ""
         },
     ])
 
diff --git a/app/pages/concerts/mag.vue b/app/pages/concerts/mag.vue
index ba25ca3..bc08cc9 100644
--- a/app/pages/concerts/mag.vue
+++ b/app/pages/concerts/mag.vue
@@ -1,13 +1,239 @@
 <template>
-  <div>
-    
+  <div class="maglist--page">
+    <!-- ================== -->
+    <!-- Fond noir -->
+    <!-- ================== -->
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
+      <SectionContent pad="xs" class="theme_bandeau--grid--left">
+        <SectionTitle tone="invert" pad="">
+          ONDIF MAG
+        </SectionTitle>
+        <DsHeading as="h3" tone="invert">
+          
+        </DsHeading>
+      </SectionContent>
+
+
+      <SectionContent pad="xs" class="theme_bandeau--grid--right">
+        <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
+          Le magazine en ligne de l’Orchestre national d’Île-de-France vous invite à découvrir l’actualité des concerts de l’orchestre, des interprètes, des chefs et cheffes, de la création contemporaine et des projets de l’ONDIF sur le territoire francilien et au-delà. Portraits de musiciens, de compositeurs, d’artistes invités, décryptages d’œuvres, partez à la découverte de l’actualité musicale !
+        </DsText>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- Listes des articles -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section remonter_articles_list">
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des articles...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les articles.</DsText>
+      </section>
+
+      <section v-else-if="articlesList.length" class="musiciens_list">
+        <article v-for="a in articlesList" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.titre || ''"
+            ratio="square"
+          />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
+
+          <DsHeading as="h4" tone="default" class="musicien_card_nom">
+            <NuxtLink :to="`/concerts/mag/${a.slug}`">
+              {{ a.titre }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.categorie"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.categorie }}
+          </DsText>
+
+          <DsText
+            v-if="a.resume"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_resume"
+          >
+            {{ a.resume }}
+          </DsText>
+
+          <DsText
+            v-if="a.focusAccueil"
+            as="p"
+            tone="default"
+            size="sm"
+            class="musicien_card_focus"
+          >
+            En page d'accueil
+          </DsText>
+        </article>
+
+
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun article à afficher.</DsText>
+      </section>
+    </PageSection>
+
+
+
+
   </div>
 </template>
 
 <script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import { computed } from 'vue'
+
+
+  //--------------------
+  // DONNÉES POUR LES ARTICLES DU MAG
+  //--------------------
+  const { items: articles, pending, error } = useStrapi(
+      "/api/__strapi__/articles_mag",
+      {
+        locale: "fr-FR",
+        sort: "ordre_article:asc",
+        pageSize: 200,
+        populate: {
+            illustration_vignette: true,
+            galerie_img: true,
+            galerie_video: true,
+        },
+      }
+  )
+
+  const articlesList = computed(() =>
+    articles.value.map((article) => ({
+      id: article.id,
+      titre: article.titre_article,
+      slug: article.slug_article,
+      focusAccueil: Boolean(article.focus_page_accueil),
+      categorie: article.categorie_article,
+      resume: article.resume_article,
+      image: article.illustration_vignette?.url ? article.illustration_vignette : null,
+    }))
+  )
+
+
+
 
 </script>
 
 <style lang="scss">
 
-</style>
\ No newline at end of file
+  .maglist--page {
+    .remonter_articles_list {
+      transform: translateY(-90px);
+    }
+
+    .theme_bandeau--grid {
+      > .page-section--inner {
+        padding-top: 70px;
+        padding-bottom: 90px;
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 120px;
+        row-gap: 0px;
+      }
+      &--left {
+        max-width: 40%;
+        h1 {
+          padding-bottom: 0px;
+        }
+      }
+      &--right {
+        max-width: 60%;
+        &--text {
+          max-width: 500px;
+        }
+      }
+    }
+
+    .musiciens_list_wp {
+      margin-top: -120px;
+    }
+    .musiciens_list {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 28px;
+    }
+
+    .musicien_card {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .musicien_card_media-placeholder {
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    .musicien_card_nom {
+      margin-top: 8px;
+      margin-left: 5px;
+      &:hover {
+        color: var(--c-brand_rouge);
+      }
+    }
+    .musicien_card_postes {
+      background-color: lightgray;
+      padding: 5px;
+      margin-left: 5px;
+      text-transform: lowercase;
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+    .musicien_card_resume {
+      margin-left: 5px;
+      max-width: 100%;
+    }
+    .musicien_card_focus {
+      margin-left: 5px;
+      text-transform: uppercase;
+      color: var(--c-brand_rouge);
+    }
+
+
+
+    @media (max-width: 980px) {
+      .musiciens_list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 400px) {
+      .musiciens_list {
+        grid-template-columns: 1fr;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .musiciens_list {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+  }
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6d82ddc..a7cbc6d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -8,7 +8,7 @@
     <!-- Fond noir -->
     <PageSection tone="dark" content-size="default">
       <SectionTitle tone="invert" pad="md">
-        CONCERTS À VENIR …
+        CONCERTS À VENIR
       </SectionTitle>
     </PageSection>
 
@@ -55,9 +55,9 @@
               Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos <span class="gros_chiffres">95</span> musiciennes et musiciens. L'Orchestre donne <span class="gros_chiffres">120</span> concerts par saison dans les <span class="gros_chiffres">8</span> départements d'Île-de-France, dans des salles tradionnelles aux lieux les plus divers.
             </DsText>
             <!-- UN CTA / LIEN SUR L'IMAGE -->
-            <DsButtonArrow to="/" variant="invert">
-                Carte des événements
-            </DsButtonArrow>
+            <!-- <DsButtonArrow to="/" variant="invert"> -->
+                <!-- Carte des événements -->
+            <!-- </DsButtonArrow> -->
           </SectionContent>
         </SectionContent>
       </SectionContent>
@@ -94,7 +94,7 @@
           </SectionTitle>
           <SectionContent pad="xs" class="theme_tao--description">
             <DsText tone="invert" size="lg" class="theme_tao--txt" >
-              Phrase d’accroche / explicative de cette rubrique par tous et pour tous
+              <!-- Phrase d’accroche / explicative de cette rubrique par tous et pour tous -->
             </DsText>
           </SectionContent>
       </SectionContent>
@@ -253,22 +253,7 @@
       description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
       url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
     },
-    {
-      id: '2',
-      imgSrc: '/contenus/actu1_1.jpg',
-      imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
-      title: "Le nouvelle saison arrive !",
-      description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
-      url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
-    },
-    {
-      id: '3',
-      imgSrc: '/contenus/actu1_1.jpg',
-      imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
-      title: "Le nouvelle saison arrive !",
-      description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
-      url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
-    },
+
   ])
 
 
diff --git a/app/pages/mediation/petite-enfance.vue b/app/pages/mediation/petite-enfance.vue
index d94d4a5..7fa538d 100644
--- a/app/pages/mediation/petite-enfance.vue
+++ b/app/pages/mediation/petite-enfance.vue
@@ -108,7 +108,7 @@
 
       <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
           <ContactSpecifique
-            titre="Pour développer un atelier dans votre crèche"
+            titre="Pour nous contacter"
             nom="Vanessa Gasztowtt"
             poste="Responsable de l’action éducative et culturelle
 et de la programmation jeune public"
diff --git a/app/pages/orchestre/missions.vue b/app/pages/orchestre/missions.vue
index dc2ebd5..a5f408a 100644
--- a/app/pages/orchestre/missions.vue
+++ b/app/pages/orchestre/missions.vue
@@ -199,7 +199,7 @@
     { value: '+ de 60', label: 'Villes' },
     { value: '+ de 120', label: 'concerts' },
     { value: '100 000', label: 'Spectateurs et spectatrices' },
-    { value: '22 000', label: "Bénéficiares de l'action culturelle" }
+    { value: '22 000', label: "Bénéficiaires de l'action culturelle" }
   ]
 
 </script>
diff --git a/server/api/__strapi__/[collection].get.js b/server/api/__strapi__/[collection].get.js
index 4702069..eccefaf 100644
--- a/server/api/__strapi__/[collection].get.js
+++ b/server/api/__strapi__/[collection].get.js
@@ -17,6 +17,7 @@ const COLLECTION_MAP = {
   academie: "/api/academie",
   insertion: "/api/grandes-ecoles",
   hopital: "/api/hopital",
+  articles_mag: "/api/mags",
 }
 
 export default defineEventHandler(async (event) => {