liste artistes

README.md

@@ -40,7 +40,7 @@ git push origin main
 cd /var/www/wondif_vue
 
 git pull origin main        # récupère le dernier code
-npm ci                      # installe / met à jour les dépendances
+npm ci                      # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
 npm run build               # rebuild Nuxt
 pm2 restart wondif_vue     # redémarre le process
 
@@ -163,6 +163,22 @@ Array.from(document.querySelectorAll('body > *')).forEach(el => {
     }
   }
 
+01_siick_smol_girlfriend_5m50.mp3
+02_siick_lunar_blast 213_5m13.wav
+03_siick_crystal_cavern_5m24.wav
+
+
+01_leon_romanens_8m49_stereo.wav
+02_marie_pierre_8m57_stereo.wav
+03_siick_7m23_stereo.wav
+04_celine_espuna_4m34_stereo.wav
+06_walid_nouh_6m44_stereo.wav
+08_codimp_7m43_stereo.wav
+05_adrien_bourmault_7m53_stereo.wav
+07_rafael_muniz_3m15_stereo.wav
+
+
+
 debian@vps-48ebe2d9:~$ history
     1  sudo nano ~/.bashrc
     2  exit

app/assets/scss/base/_img.scss

@@ -14,3 +14,9 @@
   object-fit: cover;
   //filter: contrast(0.8);
 }
+
+.img_placeholder {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.04);
+}

app/components/header/HeaderNav.vue

@@ -38,7 +38,7 @@
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
               <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">Les musiciens</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistes-invitees">Les artistes invités</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/partenaires">Nos partenaires</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
@@ -166,7 +166,7 @@
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
                 <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">Les musiciens</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistes-invitees">Les artistes invités</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/partenaires">Nos partenaires</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>

app/components/section/PageSection.vue

@@ -56,6 +56,7 @@
         &--brand   { background: var(--c-brand_rouge);}
         &--dark    { background: var(--c-backgroud-black); }
         &--brandreverse    { background: var(--c-backgroud-brandreverse); }
+        &--jaune { background: var(--c-background-jaune); }
 
         // padding en haut et en bas
         &--padded {

app/composables/useArtistesInvitees.js

@@ -0,0 +1,96 @@
+export function useArtistesInvitees(options = {}) {
+    const queryString = computed(() => {
+        const locale = unref(options.locale) ?? "fr-FR"
+        const sort = unref(options.sort) ?? null
+        const populate = unref(options.populate) ?? null
+        const filters = unref(options.filters) ?? null
+
+        const query = new URLSearchParams()
+        query.set("locale", locale)
+        if (sort) {
+            query.set("sort[0]", sort)
+        }
+        if (populate && typeof populate === "object") {
+            appendPopulate(query, populate)
+        }
+        if (filters && typeof filters === "object") {
+            appendFilters(query, filters)
+        }
+
+        return query.toString()
+    })
+
+    const { data, pending, error, refresh } = useFetch(
+        () => `/api/__strapi__/artistesinvitees?${queryString.value}`,
+        {
+            server: true,
+            key: () => `artistesinvitees:${queryString.value}`,
+            watch: [queryString],
+        }
+    )
+
+    const artistesinvitees = computed(() => {
+        let list = (data.value?.data || []).map(normalizeArtiste)
+
+        const limit = unref(options.limit)
+        if (typeof limit === "number") {
+            list = list.slice(0, Math.max(0, limit))
+        }
+
+        return list
+    })
+
+    return {
+        artistesinvitees,
+        concerts: artistesinvitees,
+        pending,
+        error,
+        refresh,
+    }
+}
+
+function appendPopulate(query, populate, prefix = "populate") {
+    Object.entries(populate).forEach(([key, value]) => {
+        if (value === true) {
+            query.set(`${prefix}[${key}]`, "true")
+            return
+        }
+        if (value && typeof value === "object") {
+            const entries = Object.entries(value)
+            const allTrue = entries.length > 0 && entries.every(([, v]) => v === true)
+            if (allTrue) {
+                const list = entries.map(([k]) => k).join(",")
+                query.set(`${prefix}[${key}][populate]`, list)
+                return
+            }
+            appendPopulate(query, value, `${prefix}[${key}][populate]`)
+        }
+    })
+}
+
+function appendFilters(query, filters, prefix = "filters") {
+    Object.entries(filters).forEach(([key, value]) => {
+        if (value === null || value === undefined) return
+        if (typeof value !== "object") {
+            query.set(`${prefix}[${key}]`, String(value))
+            return
+        }
+        Object.entries(value).forEach(([k, v]) => {
+            if (v === null || v === undefined) return
+            if (typeof v !== "object") {
+                query.set(`${prefix}[${key}][${k}]`, String(v))
+                return
+            }
+            appendFilters(query, v, `${prefix}[${key}][${k}]`)
+        })
+    })
+}
+
+function normalizeArtiste(item) {
+    const a = item.attributes || item || {}
+
+    return {
+        id: item.id,
+        ...a,
+    }
+}

app/pages/concerts/agenda.vue

@@ -32,6 +32,7 @@
 <script setup>
 
     import { onMounted } from "vue"
+    const runtimeConfig = useRuntimeConfig()
     import { formatDateLong } from "@/utils/dateFormat.js"
 
     const { concerts, refresh } = useConcerts({
@@ -55,7 +56,7 @@
         filters: {
             saison_concert: {
                 nom_saison: {
-                    $eq: "2025/2026",
+                    $eq: String(runtimeConfig.public.saison),
             },
             },
         },

app/pages/concerts/concert-[id].vue

@@ -34,6 +34,7 @@
                 :alt="illustration.alternativeText || concert?.titre_concert || ''"
                 ratio="3-4"
               />
+              <div v-else class="img_placeholder" aria-hidden="true" />
             </div>
             <div class="fiche_header_bandeau"></div>
             <div class="fiche_header_infos">

app/pages/concerts/jeune-public.vue

@@ -1,13 +1,94 @@
 <template>
-  <div>
 
+    <div>
+        <PageSection tone="jaune" content-size="default">
+          <SectionTitle tone="invert" pad="md">
+            LA SAISON 2025/2026 POUR LES JEUNES
+          </SectionTitle>
+        </PageSection>
+        <PageSection padded_size="md" content-size="default" class="">
+          <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
+            <ConcertCard
+                v-for="c in concerts"
+                :key="c.id"
+                :id="c.slug_concert"
+                :title="c.titre_concert"
+                :dateISO="c.representation_concert?.[0]?.date_debut_representation"
+                :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
+                :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
+                :adresse_lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
+                :description="c.resume_concert"
+                :imageUrl="c.image_illustration_concert?.url"
+                :imageAlt="c.image_illustration_concert?.alternativeText"
+                :href="`concert-${c.slug_concert}`"
+            />
+          </ConcertCardList>
+        </PageSection>
     </div>
 </template>
 
-<script lang="ts" setup>
+
+
+<script setup>
+
+    import { onMounted } from "vue"
+    import { formatDateLong } from "@/utils/dateFormat.js"
+    const runtimeConfig = useRuntimeConfig()
+
+    const { concerts, refresh } = useConcerts({
+        locale: "fr-FR",
+        populate: {
+            saison_concert: true,
+            genre_concert: true,
+            type_audience_concert: true,
+            direction_ondif_concert: { postes_artiste_ondif: true },
+            direction_invite_concert: { postes_artiste_invite: true },
+            artistes_ondif_concert: { postes_artiste_ondif: true },
+            artistes_invite_concert: { postes_artiste_invite: true },
+            image_illustration_concert: true,
+            images_concert: true,
+            videos_concert: true,
+            audios_concert: true,
+            programme_concert: true,
+            representation_concert: { lieu_representation: true },
+            liens_youtube_concert: true,
+        },
+        filters: {
+            $and: [
+                {
+                    saison_concert: {
+                        nom_saison: {
+                            $eq: String(runtimeConfig.public.saison),
+                        },
+                    },
+                },
+                {
+                    $or: [
+                        {
+                            genre_concert: {
+                                nom_genre: {
+                                    $eq: "Jeune public",
+                                },
+                            },
+                        },
+                        {
+                            type_audience_concert: {
+                                nom_audience: {
+                                    $eq: "Jeune public",
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        upcomingOnly: false,
+    })
+
+    onMounted(() => {
+        if (!concerts.value?.length) {
+            refresh()
+        }
+    })
 
 </script>
-
-<style>
-
-</style>

app/pages/concerts/saison.vue

@@ -32,6 +32,7 @@
 <script setup>
 
     import { onMounted } from "vue"
+    const runtimeConfig = useRuntimeConfig()
     import { formatDateLong } from "@/utils/dateFormat.js"
 
     const { concerts, refresh } = useConcerts({
@@ -55,7 +56,7 @@
         filters: {
             saison_concert: {
                 nom_saison: {
-                    $eq: "2025/2026",
+                    $eq: String(runtimeConfig.public.saison),
             },
             },
         },

app/pages/index.vue

@@ -145,7 +145,7 @@
 
 <script setup>
   import { onMounted, computed } from 'vue'
-  const env_var = useRuntimeConfig()
+  const runtimeConfig = useRuntimeConfig()
   const config = useAppConfig()
   import { clientLog } from '~/utils/clientLog'
   import { formatDateLong } from "@/utils/dateFormat.js"
@@ -160,7 +160,6 @@
 
   // Layout utilisé
   definePageMeta({ layout: 'default' })
-  const runtimeConfig = useRuntimeConfig()
 
   const STRAPI_URL = runtimeConfig.public.strapiUrl
   
@@ -187,7 +186,7 @@
       filters: {
           saison_concert: {
             nom_saison: {
-                $eq: "2025/2026",
+                $eq: String(runtimeConfig.public.saison),
             },
           },
       },

app/pages/orchestre/artiste-[id].vue

@@ -34,6 +34,7 @@
                 :alt="illustration.alternativeText || artiste?.nom_artiste_ondif || ''"
                 ratio="3-4"
               />
+              <div v-else class="img_placeholder" aria-hidden="true" />
             </div>
             <div class="fiche_header_bandeau"></div>
             <div class="fiche_header_infos">
@@ -57,7 +58,7 @@
       </section>
 
 
-      <PageSection tone="" content-size="default">
+      <PageSection tone="" content-size="default" class="fiche_description">
 
           <section v-if="descriptionBlocks" class="description_wp">
             <StrapiBlocksConvert :blocks="descriptionBlocks" />
@@ -303,8 +304,6 @@
   }
 
   .fiche_header_inner {
-    
-    
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1;
       grid-row: 1/5;
@@ -644,9 +643,10 @@
   /* ============================ */
   /* DESCRIPTION */
   /* ============================ */
-  .description_wp {
+  .fiche_description {
     display: flex;
     justify-content: center;
+    padding-top: 70px;
     padding-bottom: 70px;
     padding-left: 10px;
     padding-right: 10px;

app/pages/orchestre/artisteinvitee-[id].vue

@@ -0,0 +1,755 @@
+<template>
+  <div>
+    <section v-if="pending" aria-busy="true" aria-live="polite">
+      <p>en cours de chargement...</p>
+    </section>
+    <section v-else-if="error" aria-live="polite">
+      <p>Impossible de charger la fiche artiste.</p>
+    </section>
+
+    <template v-else>
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb :current-label="artiste?.nom_artiste_invite || ''" />
+      </PageSection>
+
+
+      <section class="fiche_header_wp">
+        <div class="fiche_header_wp_gauche"></div>
+        <div class="fiche_header_wp_gauche_carre"></div>
+        <div class="fiche_header_inner">
+            <div class="fiche_header_titres">
+              <div>
+                <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
+                  {{ artiste.nom_artiste_invite }}
+                </DsHeading>
+              </div>
+        
+              <div>
+              </div>
+            </div>
+            <div class="fiche_header_img">
+              <DsMedia
+                v-if="illustration?.url"
+                :src="illustration.url"
+                :alt="illustration.alternativeText || artiste?.nom_artiste_invite || ''"
+                ratio="3-4"
+              />
+              <div v-else class="img_placeholder" aria-hidden="true" />
+            </div>
+            <div class="fiche_header_bandeau"></div>
+            <div class="fiche_header_infos">
+              <div>
+                <DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="postesLabel">
+                  {{ postesLabel }}
+                </DsHeading>
+              </div>
+              <div v-if="artiste.url_artiste_invite">
+                <DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
+                  <a :href="artiste.url_artiste_invite" target="_blank" rel="noopener noreferrer">Site internet</a>
+                </DsText>
+
+              </div>
+              <div>
+
+              </div>
+            </div>
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+      </section>
+
+
+      <PageSection tone="" content-size="default" class="fiche_description">
+
+          <section v-if="descriptionBlocks" class="description_wp">
+            <StrapiBlocksConvert :blocks="descriptionBlocks" />
+          </section>
+
+          <section v-if="imagesArtiste.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in imagesArtiste"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText || artiste?.nom_artiste_invite || ''"
+              />
+            </div>
+          </section>
+          
+          <section v-if="youtubeEmbeds.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in youtubeEmbeds" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.src"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+    </template>
+  </div>
+</template>
+
+<script setup>
+  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'
+  const route = useRoute()
+
+  //////////////////////////////////////////////////////////////
+  // RÉCUPÉRATION DU CONTENU
+  //////////////////////////////////////////////////////////////
+  const artisteSlug = computed(() => String(route.params.id || ''))
+  const populate = {
+      image_illustration_artiste_invite: true,
+      postes_artiste_invite: true,
+  }
+
+  const filters = computed(() => ({
+    slug_artiste_invite: {
+      $eq: artisteSlug.value,
+    },
+  }))
+
+  const { artistesinvitees, pending, error } = useArtistesInvitees({
+    locale: 'fr-FR',
+    populate,
+    filters,
+    limit: 1,
+  })
+
+  const artiste = computed(() => artistesinvitees.value?.[0] || {})
+
+  useSeoMeta({
+    title: () => artiste.value?.nom_artiste_invite || 'Artiste',
+  })
+
+  const postesLabel = computed(() =>
+    extractStrapiList(artiste.value?.postes_artiste_invite)
+      .map((p) => p?.nom_poste)
+      .filter(Boolean)
+      .join(', ')
+  )
+
+  const illustration = computed(() => {
+    const m = artiste.value?.image_illustration_artiste_invite
+    if (!m) return null
+    if (m?.data?.attributes) return { id: m.data.id, ...m.data.attributes }
+    if (m.url) return m
+    return null
+  })
+
+  const imagesArtiste = computed(() => {
+    const value = artiste.value?.images_artiste_invite
+    return extractStrapiList(value).filter((img) => Boolean(img?.url))
+  })
+
+  const descriptionBlocks = computed(() =>
+    artiste.value?.description_artiste_invite || artiste.value?.description_concert || null
+  )
+
+  const youtube = computed(() => {
+    const value = artiste.value?.liens_youtube_artiste_invite
+    if (!value) return []
+    return extractStrapiList(value)
+  })
+  function getYoutubeId(url = '') {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes('youtu.be')) return u.pathname.slice(1)
+      if (u.pathname.startsWith('/shorts/')) return u.pathname.split('/')[2]
+      if (u.pathname.startsWith('/embed/')) return u.pathname.split('/')[2]
+      return u.searchParams.get('v')
+    } catch {
+      return null
+    }
+  }
+
+  const youtubeEmbeds = computed(() =>
+    youtube.value
+      .map((item) => {
+        const id = getYoutubeId(item?.lien_youtube)
+        if (!id) return null
+        return {
+          id: item.id || id,
+          src: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+        }
+      })
+      .filter(Boolean)
+  )
+
+  function extractStrapiList(value) {
+    if (!value) return []
+    if (Array.isArray(value)) return value.map(normalizeStrapiItem).filter(Boolean)
+    if (value?.data) {
+      const rows = Array.isArray(value.data) ? value.data : [value.data]
+      return rows.map(normalizeStrapiItem).filter(Boolean)
+    }
+    if (typeof value === 'object') return [normalizeStrapiItem(value)].filter(Boolean)
+    return []
+  }
+
+  function normalizeStrapiItem(item) {
+    if (!item || typeof item !== 'object') return null
+    if (item.attributes && typeof item.attributes === 'object') {
+      return { id: item.id, ...item.attributes }
+    }
+    return item
+  }
+
+  function appendPopulate(query, populateObj, prefix = "populate") {
+    Object.entries(populateObj).forEach(([key, value]) => {
+      if (value === true) {
+        query.set(`${prefix}[${key}]`, "true")
+        return
+      }
+      if (value && typeof value === "object") {
+        appendPopulate(query, value, `${prefix}[${key}][populate]`)
+      }
+    })
+  }
+</script>
+
+<style lang="scss">
+
+  .breadcrum_wp {
+    padding-top: 30px;
+  }
+
+  .fiche_header_wp {
+    display: grid;
+    
+
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 510px 20px 200px;
+      padding-top: 40px;
+    }
+    @media (min-width: 600px) {
+      grid-template-columns: minmax(10px, 10px) 580px 0px;
+      grid-template-rows: 40px 280px 20px 230px;
+    }
+    @media (min-width: 700px) {
+      grid-template-columns: minmax(10px, 10px) 660px 0px;
+      grid-template-rows: 70px 250px 90px 300px;
+    }
+    @media (min-width: 800px) {
+      grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
+      grid-template-rows: 60px 280px 70px 300px;
+    }   
+    @media (min-width: 900px) {
+      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+      grid-template-rows: 90px 340px 100px 250px;
+    }
+    @media (min-width: 1000px) {
+      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+      grid-template-rows: 90px 340px 120px 270px;
+    }
+    @media (min-width: 1100px) {
+      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+      grid-template-rows: 90px 340px 140px 290px;
+    }
+    @media (min-width: 1200px) {
+      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1300px) {
+      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1400px) {
+      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1500px) {
+      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+  }
+  .fiche_header_wp_gauche {
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      display: none;
+    }
+    @media (min-width: 600px) {
+      grid-column: 1;
+    }
+  }
+  .fiche_header_wp_gauche_carre {
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      display: none;
+    }
+    @media (min-width: 600px) {
+      grid-column: 1;
+      grid-row: 4;
+    }
+    background-color: var(--c-backgroud-black);
+  }
+  .fiche_header_wp_droite {
+
+    @media (min-width: 0px) and (max-width: 600px) {
+      display: none;
+    }
+    @media (min-width: 600px) {
+      grid-column: 3;
+    }
+  }
+
+  .fiche_header_inner {
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-column: 1;
+      grid-row: 1/5;
+    }
+    @media (min-width: 600px) {
+      grid-column: 2;
+      grid-row: 1/5;
+    }
+    display: grid;
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 4fr 1fr 0.5fr;
+      grid-template-rows: auto 510px 20px 200px; 
+    }
+    @media (min-width: 600px) {
+      width: 575px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 40px 280px 20px 230px;
+    }
+    @media (min-width: 700px) {
+      width: 675px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 70px 250px 90px 300px;
+    }
+    @media (min-width: 800px) {
+      width: 780px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 60px 280px 70px 300px;
+    }   
+    @media (min-width: 900px) {
+      width: 860px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 100px 250px;
+    }
+    @media (min-width: 1000px) {
+      width: 950px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 120px 270px;
+    }
+    @media (min-width: 1100px) {
+      width: 1020px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 140px 290px;
+    }
+    @media (min-width: 1200px) {
+      width: 1100px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1300px) {
+      width: 1200px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1400px) {
+      width: 1300px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1500px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1600px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1700px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1800px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+  }
+
+  .fiche_header_titres {
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-column: 1;
+      grid-row: 1;
+      padding-bottom: 20px;
+      padding-left: 10px;
+    }
+    @media (min-width: 600px) {
+      grid-column: 1;
+      grid-row: 2;
+    }
+    display: grid;
+    align-content: start;
+    gap: 0.75rem;
+    h1 {
+      font-size: 55px;
+      @media (min-width: 0px) and (max-width: 600px) {
+        font-size: 25px;  
+      }
+      @media (min-width: 600px) {
+        font-size: 25px;
+      }
+      @media (min-width: 700px) {
+        font-size: 30px;
+      }
+      @media (min-width: 800px) {
+        font-size: 30px;
+      }   
+      @media (min-width: 900px) {
+        font-size: 40px;
+      }
+      @media (min-width: 1000px) {
+        font-size: 40px;
+      }
+      @media (min-width: 1100px) {
+        font-size: 40px;
+      }
+      @media (min-width: 1200px) {
+        font-size: 50px;
+      }
+      @media (min-width: 1300px) {
+        font-size: 55px;
+      }
+      @media (min-width: 1400px) {
+        font-size: 55px;
+      }
+      @media (min-width: 1500px) {
+        font-size: 55px;
+      }
+      @media (min-width: 1600px) {
+        font-size: 55px;
+      }
+      @media (min-width: 1700px) {
+        font-size: 55px;
+      }
+      @media (min-width: 1800px) {
+        font-size: 55px;
+      }
+    }
+  }
+
+  .fiche_header_img {
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-column: 1 / 4;
+      grid-row: 2 / 4; 
+    }
+    @media (min-width: 600px) {
+      grid-column: 3 / 5;
+      grid-row: 1 / 5;
+    }
+    overflow: hidden;
+    .ds-media {
+      height: 100%;
+    }
+  }
+
+  .fiche_header_infos {
+
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-column: 1 / 2;
+      grid-row: 4;
+      margin-top: -30px;
+    }
+    @media (min-width: 600px) {
+      grid-column: 1;
+      grid-row: 4;
+    }
+    display: grid;
+    align-content: center;
+    justify-content: end;
+    
+    @media (min-width: 0px) and (max-width: 700px) {
+      gap: 7px;  
+    }
+    @media (min-width: 700px) {
+      gap: 20px;
+    }
+
+    text-align: right;
+    .fiche_header_infos_genre {
+      font-weight: 900;
+      
+    }
+  }
+  .fiche_header_bandeau {
+
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-column: 1 / 3;
+      grid-row: 4;
+      margin-top: -30px;
+    }
+    @media (min-width: 600px) {
+      grid-column: 1 / 4;
+      grid-row: 4;
+    }
+    background-color: var(--c-backgroud-black);
+  }
+
+  /* ============================ */
+  /* DISTRIBUTION / PROGRAMME */
+  /* ============================ */
+  .fiche_details_wp {
+    .distribution_wp {
+      padding-top: 50px;
+      padding-bottom: 50px;
+      padding-left: 20px;
+      .distribution_item {
+        display: flex;
+        .distribution_item_poste {
+          padding-right: 10px;
+          font-weight: 200;
+        }
+        .direction {
+          font-weight: 400;
+        }
+      }
+    }
+    .programme_wp {
+
+      background-color: var(--c-backgroud-brandreverse);
+      margin-bottom: 70px;
+      padding-top: 50px;
+      padding-right: 30px;
+      padding-left: 40px;
+      padding-bottom: 50px;
+
+      /* DÉCALAGE DU BLOC VERS LA DROITE */
+      position: relative;
+      
+      @media (min-width: 0px) and (max-width: 700px) {
+        width: 89vw;
+        left: 5%;
+      }
+      @media (min-width: 700px) {
+        width: 67vw;
+        left: 30%;
+      }
+      @media (min-width: 800px) {
+        width: 50vw;
+        left: 49%;
+      }
+      transform: translateX(0px);
+      margin-left: 0px;
+      margin-right: 0px;
+      box-sizing: border-box;
+      display: block;
+      justify-content: initial;
+      align-items: initial;
+
+      .programme_titre {
+        padding-bottom: 20px;
+      }
+      .programme_list {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 20px;
+        row-gap: 20px;
+
+      }
+      .programme_item {
+        flex: 1 0 200px;
+
+        background-color: var(--c-surface);
+        padding-top: 14px;
+        padding-right: 20px;
+        padding-left: 18px;
+        padding-bottom: 10px;
+      }
+
+    }
+  }
+
+  /* ============================ */
+  /* REPRÉSENTATIONS */
+  /* ============================ */
+  .representation_wp {
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: center; */
+    column-gap: 30px;
+    row-gap: 30px;
+    padding-bottom: 70px;
+    @media (min-width: 0px) and (max-width: 600px) {
+      padding-left: 20px;
+      padding-right: 5px;
+    }
+    
+    .representation_item {
+      
+      @media (min-width: 0px) and (max-width: 500px) {
+        width: 100%;
+      }
+      @media (min-width: 500px) {
+        max-width: 215px;
+      }
+      @media (min-width: 600px) {
+        max-width: 262px;
+      }
+      @media (min-width: 700px) {
+        max-width: 300px;
+      }
+      flex: 1 1 300px;
+      display: grid;
+      border: 2px var(--c-brand_rouge) solid;
+      padding-top: 20px;
+      > * {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+      .representation_item_comment_wp {
+        padding-top: 5px;
+      }
+      .representation_item_comment {
+        background-color: lightgray;
+        padding: 5px;
+      }
+
+    }
+    .representation_cta {
+      color: var(--c-surface);
+      background-color: var(--c-brand_rouge);
+      margin-top: 15px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      text-align: center;
+      a {
+        font-family: var(--font-roboto);
+        font-weight: 600;
+        font-size: 18px;
+      }
+    }
+  }
+
+  /* ============================ */
+  /* DESCRIPTION */
+  /* ============================ */
+  .fiche_description {
+    display: flex;
+    justify-content: center;
+    padding-top: 70px;
+    padding-bottom: 70px;
+    padding-left: 10px;
+    padding-right: 10px;
+    > * {
+      max-width: 570px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+  .img-gallery_wp {
+      padding-bottom: 50px;
+  }
+
+  .img-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 520px));
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 1.5rem;
+    width: 100%;
+  }
+
+  .img-gallery > * {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 5px;
+  }
+
+  .img-gallery :deep(.ds-media) {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: transparent;
+  }
+
+  .img-gallery :deep(.ds-media__img) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .img-gallery :deep(.ds-media__img:hover) {
+    transform: scale(1.02);
+  }
+
+  @media (max-width: 1100px) {
+    .img-gallery {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+  }
+
+  @media (max-width: 820px) {
+    .img-gallery {
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 0.75rem;
+    }
+  }
+
+  @media (max-width: 520px) {
+    .img-gallery {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .youtube_wp {
+    margin-bottom: 70px;
+  }
+  .youtube-list {
+    display: grid;
+    justify-content: center;
+    /* flex-wrap: wrap; */
+    gap: 20px;
+  }
+  .youtube-item {
+    @media (min-width: 0px) and (max-width: 300px) {
+      min-width: 290px;
+    }
+
+    @media (min-width: 300px) {
+      min-width: 298px;
+    }
+
+    @media (min-width: 400px) {
+      min-width: 398px;
+    }
+    @media (min-width: 500px) {
+      min-width: 480px;
+    }
+    @media (min-width: 600px) {
+      min-width: 580px;
+    }
+    @media (min-width: 700px) {
+      min-width: 670px;
+    }
+  }
+
+  .youtube-item iframe {
+       
+            aspect-ratio: 16 / 9;
+    border: 0;
+  }
+</style>

app/pages/orchestre/artistes-invitees.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style>
-
-</style>

app/pages/orchestre/artistesinvitees.vue

@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <!-- ================== -->
+    <!-- Fond noir -->
+    <!-- ================== -->
+    <PageSection tone="brandreverse" content-size="default" class="theme_bandeau--grid">
+      <SectionContent pad="xs" class="theme_bandeau--grid--left">
+        <SectionTitle tone="invert" pad="">
+          LES ARTISTES INVITÉS
+        </SectionTitle>
+        <DsHeading as="h3" tone="invert">
+          La patte de l’Orchestre national d’Île-de-France, c’est aussi la richesse de ses collaborations artistiques
+        </DsHeading>
+      </SectionContent>
+
+
+      <SectionContent pad="xs" class="theme_bandeau--grid--right">
+        <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
+          Chefs, solistes, comédiens, chaque saison, de nombreux talents viennent enrichir la programmation de l’Orchestre : découvrez ici tous les artistes de la saison !
+        </DsText>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- Listes des musiciens -->
+    <!-- ================== -->
+
+    <!-- ================== -->
+    <!-- DIRECTION -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section remonter_artistes_list">
+
+
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des artistes...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
+      </section>
+
+      <section v-else-if="artistesDirection.length" class="musiciens_list">
+        <article v-for="a in artistesDirection" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_invite || ''"
+            ratio="square"
+          />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
+
+          <DsHeading as="h4" tone="default" class="musicien_card_nom">
+            <NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}`">
+              {{ a.nom_artiste_invite }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun artiste pour la direction.</DsText>
+      </section>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- MUSICIENS -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section musiciens_list_wp">
+
+
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des artistes...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
+      </section>
+
+      <section v-else-if="artistesAutres.length" class="musiciens_list">
+        <article v-for="a in artistesAutres" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_invite || ''"
+            ratio="square"
+          />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
+
+          <DsHeading as="h4" tone="default" class="musicien_card_nom">
+            <NuxtLink :to="`/orchestre/artistesinvitees-${a.slug_artiste_invite}`">
+              {{ a.nom_artiste_invite }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun autre artiste trouvé.</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'
+  const runtimeConfig = useRuntimeConfig()
+  const saisonFiltre = computed(() => String(runtimeConfig.public.saison || '').trim())
+  const artistesFilters = computed(() => {
+    if (!saisonFiltre.value) return null
+    return {
+      saisons_artiste_invite: {
+        nom_saison: {
+          $eq: saisonFiltre.value,
+        },
+      },
+    }
+  })
+
+  //--------------------
+  // DONNÉES POUR LES ARTISTES
+  //--------------------
+  const { artistesinvitees, pending, error } = useArtistesInvitees({
+      locale: "fr-FR",
+      sort: "nom_artiste_invite:asc",
+      populate: {
+          saisons_artiste_invite: true,
+          image_illustration_artiste_invite: true,
+          postes_artiste_invite: true,
+      },
+      filters: artistesFilters,
+  })
+
+  const artistesDisplay = computed(() => {
+    return (artistesinvitees.value || []).map((artiste) => ({
+      ...artiste,
+      image: getArtisteImage(artiste),
+      postesLabel: getPostesLabel(artiste),
+    }))
+  })
+
+  const postesDirection = [
+    "direction",
+    "cheffe assistante",
+    "chef assistante",
+  ]
+
+  const artistesDirection = computed(() =>
+    artistesDisplay.value.filter((a) => isDirectionArtist(a))
+  )
+
+  const artistesAutres = computed(() =>
+    artistesDisplay.value.filter((a) => !isDirectionArtist(a))
+  )
+
+  function getArtisteImage(artiste) {
+    const media = artiste?.image_illustration_artiste_invite
+    const rows = extractStrapiList(media)
+    if (rows.length) return rows[0]
+    if (media && typeof media === "object" && media.url) return media
+    return null
+  }
+
+  function getPostesLabel(artiste) {
+    const postes = extractStrapiList(artiste?.postes_artiste_invite)
+    return postes
+      .map((p) => p?.nom_poste)
+      .filter(Boolean)
+      .join(", ")
+  }
+
+  function isDirectionArtist(artiste) {
+    const postes = extractStrapiList(artiste?.postes_artiste_invite)
+      .map((p) => String(p?.nom_poste || "").trim().toLowerCase())
+      .filter(Boolean)
+
+    return postes.some((poste) => postesDirection.includes(poste))
+  }
+
+  function extractStrapiList(value) {
+    if (!value) return []
+    if (Array.isArray(value)) return value.map(normalizeStrapiItem).filter(Boolean)
+    if (value?.data) {
+      const rows = Array.isArray(value.data) ? value.data : [value.data]
+      return rows.map(normalizeStrapiItem).filter(Boolean)
+    }
+    if (typeof value === "object") return [normalizeStrapiItem(value)].filter(Boolean)
+    return []
+  }
+
+  function normalizeStrapiItem(item) {
+    if (!item || typeof item !== "object") return null
+    if (item.attributes && typeof item.attributes === "object") {
+      return { id: item.id, ...item.attributes }
+    }
+    return item
+  }
+
+
+</script>
+
+<style lang="scss">
+
+
+  .remonter_artistes_list {
+    transform: translateY(-90px);
+  }
+
+  .theme_bandeau--grid {
+    > .page-section--inner {
+      padding-top: 70px;
+      padding-bottom: 150px;
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 120px;
+      row-gap: 30px;
+    }
+    &--left {
+      max-width: 40%;
+      h1 {
+        padding-bottom: 20px;
+      }
+    }
+    &--right {
+      max-width: 60%;
+      &--text {
+        max-width: 500px;
+      }
+    }
+  }
+
+  .musiciens_list_wp {
+    // parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
+    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 {
+    margin-left: 5px;
+    text-transform: lowercase;
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+
+
+  @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>

app/pages/orchestre/direction.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 

app/pages/orchestre/discographie.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    
+    test
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 

app/pages/orchestre/missions.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 

app/pages/orchestre/musiciens.vue

@@ -48,6 +48,7 @@
             :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
             ratio="square"
           />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
 
           <DsHeading as="h4" tone="default" class="musicien_card_nom">
             <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
@@ -95,6 +96,7 @@
             :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
             ratio="square"
           />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
 
           <DsHeading as="h4" tone="default" class="musicien_card_nom">
             <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
@@ -268,6 +270,12 @@
     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;

app/pages/orchestre/partenaires.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 

app/pages/orchestre/soutenir.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 

design-system/tokens/_colors.scss

@@ -14,6 +14,7 @@
     --c-backgroud-black: #111;
     --c-backgroud-brandreverse: #ACCFCF;
     --c-background-blanc-casse: #FCFCFC;
+    --c-background-jaune: #fac020;
 
     /* États */
     --c-success: green;

env.txt

@@ -1,15 +0,0 @@
-ENV=developpement
-
-# Nuxt
-NUXT_PUBLIC_SITE_URL=http://localhost:3000
-NUXT_PUBLIC_API_URL=http://localhost:3000
-NUXT_I18N_DEFAULT_LOCALE=fr
-NUXT_I18N_LOCALES=fr,en
-
-# Strapi
-NUXT_PUBLIC_STRAPI_URL=https://bo.orchestre-ile.com/
-NUXT_PUBLICSTRAPI_ADMIN_EMAIL=contact@parisweb.art
-NUXT_STRAPI_TOKEN=
-
-# Métier
-SAISON=2025/2026

server/api/__strapi__/artistesinvitees.get.js

@@ -0,0 +1,7 @@
+import { createStrapiProxyHandler } from "~~/server/utils/strapiEndpoint"
+
+export default defineEventHandler(
+  createStrapiProxyHandler({
+    strapiPath: "/api/artistes-invites",
+  })
+)