front end

README.md

@@ -122,6 +122,12 @@ populate[liens_youtube_concert]=true
 | A| B| C|
 | A| B| C|
 
+
+API pour avoir la page Les Missions
+https://bo.orchestre-ile.com/api/mission?locale=fr-FR&populate=image_illustration_header
+https://bo.orchestre-ile.com/api/mission?locale=fr-FR&populate=*
+
+
 ## SAISIE DU CONTENU
 ### slug
 - concert

app/assets/scss/component/_header_nav.scss

@@ -48,7 +48,7 @@
         padding-right: 16px;
         padding-bottom: 5px;
         text-align: left;
-        background-color: rgba(255, 255, 255, 0.95);
+        background-color: var(--c-surface);
         border-radius: 3px;
 
         .header_nav_topbar_submenu_item {
@@ -169,6 +169,19 @@
 
         //font-family: 'brandontext_regular';
         font-family: var(--font-roboto);
+        // wght Graisse
+        // YTLC Hauteur miniscule
+        // YTUC Hauteur majuscule
+        // YTAS Hauteur des hampes ascendantes
+        // YTDE Hauteur des hampes descendantes
+        // wdth largeur horizontale des lettres
+        font-variation-settings: 
+            "wdth" 41,
+            "wght" 662,
+            "YTLC" 570,
+            "YTUC" 760,
+            "YTAS" 794,
+            "YTDE" -275;
         
         @include media_queries.media_min(tablet_600) {
             font-size: 18px;
@@ -255,13 +268,15 @@
             padding-right: 12px;
             padding-bottom: 10px;
             text-align: left;
-            background-color: rgba(255, 255, 255, 0.97);
+            background-color: var(--c-surface);
             border-radius: 3px;
 
             .header_nav_sub_menu_item {
                 list-style: circle;
                 //font-family: 'brandontext_regular';
                 font-family: var(--font-roboto);
+                font-variation-settings: 
+                    "wdth" 41, "wght" 552, "YTLC" 570, "YTUC" 760, "YTAS" 794, "YTDE" -275;
                 @media (min-width: 0px) {
                     font-size: 16px;
                 }
@@ -422,6 +437,13 @@
             margin-top: 47px;
 
             font-family: var(--font-roboto);
+            font-variation-settings: 
+                "wdth" 41,
+                "wght" 662,
+                "YTLC" 570,
+                "YTUC" 760,
+                "YTAS" 794,
+                "YTDE" -275;
             
             padding-bottom: 10px;
             padding-right: 10px;
@@ -489,6 +511,8 @@
             list-style: none;
                 //font-family: 'brandontext_regular';
                 font-family: var(--font-roboto);
+                font-variation-settings: 
+                    "wdth" 41, "wght" 552, "YTLC" 570, "YTUC" 760, "YTAS" 794, "YTDE" -275;
                 font-size: 18px;
                 padding-bottom: 4px;
                 list-style: circle;

app/components/BannierePros.vue

@@ -78,7 +78,7 @@
     }
     @media (min-width: 500px) {
         .banniere_pros_wp {
-            grid-template-columns: 150px 270px 40px 40px;
+            grid-template-columns: 150px 250px 35px 35px;
             grid-template-rows: auto;
             //justify-content: center;
             align-items: center;

app/components/Breadcrumb.vue

@@ -118,13 +118,13 @@
     position: relative;
     z-index: 1;
     @media (min-width: 0px) {
-      padding-left: 20px;  
+      padding-left: 10px;  
     }
     @media (min-width: 600px) {
-      padding-left: 20px;
+      padding-left: 0px;
     }
     @media (min-width: 700px) {
-      padding-left: 20px;
+      padding-left: 0px;
     }
   }
   .breadcrumb__list { 

app/components/header/HeaderNav.vue

@@ -57,7 +57,7 @@
           </li>
 
           <li class="header_nav_item" :class="{ 'is-active': isMediation }">
-            Éducation et médiation
+            Action culturelle
             <ul class="header_nav_sub_menu">
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
@@ -193,7 +193,7 @@
               :class="{ 'is-open': activeDrawer === 'education' }"
               @click="toggleDrawer('education')"
             >
-              Éducation et médiation
+              Action culturelle
               <ul class="header_drawer_sub_menu">
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
@@ -280,7 +280,7 @@
     route.path.startsWith('/concerts')
   )
 
-  // Éducation et médiation
+  // Action culturelle
   const isMediation = computed(() =>
     route.path.startsWith('/mediation')
   )

app/components/section/Decalage.vue

@@ -2,7 +2,7 @@
     <div class="decalage_cont"
          :class="[
             `decalage_cont--${position}`
-        ]""
+        ]"
     >
         <div class="decalage"
              :class="[
@@ -11,7 +11,7 @@
              ]"
              >
             <div class="decalage_inner">
-                <DsHeading v-if="$slots.title" :tone=titleTone as="h2" textcase="uppercase">
+                <DsHeading v-if="$slots.title" :tone="titleTone" as="h2" textcase="uppercase">
                   <slot name="title" />
                 </DsHeading>
                 <slot />
@@ -19,7 +19,7 @@
                     <slot name="button" />
                 </div>
                 <div v-if="ensavoirplusTarget" class="decalage_button">
-                    <DsButton :textColor=buttonTone :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
+                    <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
                 </div>
             </div>
         </div>
@@ -72,7 +72,7 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
           width: 67vw;
         }
         @media (min-width: 800px) {
-          width: 50vw;
+          width: 60vw;
         }
         
         /* tons = arrière-plan section */
@@ -86,23 +86,26 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
         &--right {
             
             .decalage_inner {
-                
+                padding-right: 20px;
-                padding-left: 50px;                
+                padding-left: 50px;
                 
                 @media (max-width: 599px) {
-                  padding-left: 40px;
+                    padding-right: 15px;
+                    padding-left: 40px;
                 }
             }
         }
         
         &--left {
-            justify-content: flex-end;            
+            justify-content: flex-end;
            
             .decalage_inner {
                 padding-right: 50px;
+                padding-left: 20px;
                 
                 @media (max-width: 599px) {
                     padding-right: 40px;
+                    padding-left: 15px;
                   }
             }
             
@@ -113,38 +116,38 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
     .decalage_inner {
         
         @media (min-width: 0px) {
-                width: 100%;                
+            width: 100%;                
-            }
+        }
-            @media (min-width: 600px) {
+        @media (min-width: 600px) {
-                width: calc(290px + 39vw);
+            width: calc(290px + 39vw);
-            }
+        }
-            @media (min-width: 700px) {
+        @media (min-width: 700px) {
-                width: calc(330px + 17vw);
+            width: calc(330px + 17vw);
-            }
+        }
-            @media (min-width: 800px) {
+        @media (min-width: 800px) {
-                width: 390px;
+            width: calc(330px + 17vw);
-            }   
+        }   
-            @media (min-width: 900px) {
+        @media (min-width: 900px) {
-                width: 430px;
+            width: 600px;
-            }
+        }
-            @media (min-width: 1000px) {
+        @media (min-width: 1000px) {
-                width: 475px;
+            width: 600px;
-            }
+        }
-            @media (min-width: 1100px) {
+        @media (min-width: 1100px) {
-                width: 510px;
+            width: 600px;
-            }
+        }
-            @media (min-width: 1200px) {
+        @media (min-width: 1200px) {
-                width: 550px;
+            width: 600px;
-            }
+        }
-            @media (min-width: 1300px) {
+        @media (min-width: 1300px) {
-                width: 600px;
+            width: 600px;
-            }
+        }
-            @media (min-width: 1400px) {
+        @media (min-width: 1400px) {
-                width: 650px;
+            width: 600px;
-            }
+        }
-            @media (min-width: 1500px) {
+        @media (min-width: 1500px) {
-                width: 700px;
+            width: 600px;
-            }
+        }
     }
     
     .decalage_button {
@@ -155,4 +158,4 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
     .decalage_ensavoirplus--hidden {
         display: none;
     }
-</style>
+</style>

app/components/section/PageSection.vue

@@ -27,8 +27,6 @@
 </template>
 
 <script setup>
-    import { computed } from 'vue'
-
     const props = defineProps({
         tone: { type: String, default: 'default' },        // default / brand / muted / dark…
         padded_size: { type: String, default: '' }, // none | sm | md | lg
@@ -39,7 +37,6 @@
         position : { type: String, default: '' },
         overflow : { type: String, default: '' }
     })
-
 </script>
 
 <style lang="scss">
@@ -57,6 +54,9 @@
         &--dark    { background: var(--c-backgroud-black); }
         &--brandreverse    { background: var(--c-backgroud-brandreverse); }
         &--jaune { background: var(--c-background-jaune); }
+        &--bleu { background: var(--c-background-bleu); }
+        &--rouge45 { background: var(--c-brand_rouge45); }
+        &--rouge-weak { background: var(--c-brand_rouge-weak); }
 
         // padding en haut et en bas
         &--padded {
@@ -69,7 +69,6 @@
                 padding-bottom: 120px;
             }
         }
-
     }
 
 </style>

app/components/section/PageSectionInner.vue

@@ -43,7 +43,6 @@
 
             @media (min-width: 0px) {
                 max-width: 100%;
-                
             }
             @media (min-width: 600px) {
                 max-width: 580px;

app/components/strapiconvert/StrapiBlocksConvert.vue

@@ -102,16 +102,17 @@
     font-family: var(--font-roboto);
 
     &--p {
-      
       font-weight: var(--fw-light);
       font-size: 17px;
       line-height: 22px;
       margin-bottom: 5px;
+      text-align: justify;
     }
     h1 {
       padding-bottom: 10px;
       font-weight: var(--fw-bold);
       font-size: 30px;
+      text-transform: uppercase;
     }
     h2 {
       padding-bottom: 7px;

app/composables/useStrapi.js

@@ -0,0 +1,101 @@
+export function useStrapi(endpoint, 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(
+    () => `${endpoint}?${queryString.value}`,
+    {
+      server: true,
+      key: () => `${endpoint}:${queryString.value}`,
+      watch: [queryString],
+    }
+  )
+
+  const items = computed(() => {
+    const raw = data.value?.data
+    let list = []
+    if (Array.isArray(raw)) {
+      list = raw.map(normalizeStrapiItem)
+    } else if (raw && typeof raw === "object") {
+      list = [normalizeStrapiItem(raw)]
+    }
+
+    const limit = unref(options.limit)
+    if (typeof limit === "number") {
+      list = list.slice(0, Math.max(0, limit))
+    }
+
+    return list
+  })
+
+  return {
+    items,
+    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 normalizeStrapiItem(item) {
+  const a = item.attributes || item || {}
+
+  return {
+    id: item.id,
+    ...a,
+  }
+}

app/pages/concerts/agenda.vue

@@ -6,7 +6,7 @@
             LES CONCERTS À VENIR
           </SectionTitle>
         </PageSection>
-        <PageSection padded_size="md" content-size="default" class="">
+        <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
           <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
             <ConcertCard
                 v-for="c in concerts"

app/pages/concerts/jeune-public.vue

@@ -6,7 +6,7 @@
             LA SAISON 2025/2026 POUR LES JEUNES
           </SectionTitle>
         </PageSection>
-        <PageSection padded_size="md" content-size="default" class="">
+        <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
           <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
             <ConcertCard
                 v-for="c in concerts"

app/pages/concerts/saison.vue

@@ -6,7 +6,7 @@
             SAISON 2025/2026
           </SectionTitle>
         </PageSection>
-        <PageSection padded_size="md" content-size="default" class="">
+        <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
           <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
             <ConcertCard
                 v-for="c in concerts"

app/pages/index.vue

@@ -2,17 +2,17 @@
   <div>
 
     <!-- ================== -->
-    <!-- Fond noir -->
+    <!-- PROCHAIN CONCERTS -->
      <!-- ================== -->
+
+    <!-- Fond noir -->
     <PageSection tone="dark" content-size="default">
       <SectionTitle tone="invert" pad="md">
         CONCERTS À VENIR …
       </SectionTitle>
     </PageSection>
 
-    <!-- ================== -->
     <!-- Listes des prochains conncerts -->
-     <!-- ================== -->
     <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
       <ConcertCardList>
         <ConcertCard
@@ -31,13 +31,38 @@
       </ConcertCardList>
     </PageSection>
 
+
+    <PageSection tone="dark" padded_size="md" content-size="default" padb="xs" class="theme_tao photo_orchestre_wp remonter_bloc_dessous">
+      <SectionContent>
+          <SectionTitle tone="invert" pad="xs">
+            L’ORCHESTRE NATIONAL D'ÎLE-DE-FRANCE
+          </SectionTitle>
+          
+          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="photo_orchestre_img"/>
+
+      </SectionContent>
+
+      <SectionContent pad="xs" class="photo_orchestre_cta">
+        <DsButtonArrow to="/" variant="invert">
+            Découvrir les musiciens
+        </DsButtonArrow>
+      </SectionContent>
+
+    </PageSection>
+
     <!-- ================== -->
-    <!-- Carte Île-De-France Partout et pour tous -->
+    <!-- PARTOUT ET POUR TOUS -->
     <!-- ================== -->
     <PageSection padded_size="md" class="theme_ppt_wp">
       <SectionContent class="theme_ppt">
+        <!-- PHOTO DE L'ORCHETSRE -->
+        <!-- <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/> -->
+        <!-- PHOTO DE LA CARTE IDF -->
         <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/>
+        <!-- Avec couleur rouge par dessus -->
         <SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content">
+        <!-- Sans couleur rouge par dessus -->
+        <!-- <SectionContent tone="" pad="" class="theme_ppt--content"> -->
           <SectionTitle tone="invert" pad="xs">
             PARTOUT ET POUR TOUS
           </SectionTitle>
@@ -45,6 +70,7 @@
             <DsText tone="invert" size="lg" class="theme_ppt--txt" >
               Les 95 musiciennes et musiciens proposent chaque saison plus de 120 concerts dans des salles et théâtres, des lieux culturels et des espaces atypiques de la région francilienne. Porté par une forte mission territoriale, l’orchestre s’engage à rendre la musique symphonique accessible à toutes et tous, en la faisant vivre au plus près des habitants grâce notamment à des actions culturelles, pédagogiques et participatives au cœur du territoire.
             </DsText>
+            <!-- UN CTA / LIEN SUR L'IMAGE -->
             <DsButtonArrow to="/" variant="invert">
                 Carte des événements
             </DsButtonArrow>
@@ -52,6 +78,15 @@
         </SectionContent>
       </SectionContent>
     </PageSection>
+
+    <!-- CARTES PARTOUT ET POUR TOUS -->
+    <PageSection padded_size="md" class="theme_ppt_wp">
+      <SectionContent class="theme_ppt">
+      <SquareCardBlocTextList >
+
+      </SquareCardBlocTextList>
+      </SectionContent>
+    </PageSection>
     
     <!-- ================== -->
     <!-- Tous à l'Orchestre -->
@@ -78,11 +113,11 @@
     <PageSection padded_size="md">
       <SectionContent>
           <SectionTitle tone="" pad="xs">
-            LES DERNIÈRES ACTUALITÉS
+            ACTUALITÉS
           </SectionTitle>
       </SectionContent>
-      <SquareCardList >
+      <SquareCardBlocTextList >
-        <SquareCard
+        <SquareCardBlocText
           v-for="actuscard in actuscards"
           :key="actuscard.id"
           :id="actuscard.id"
@@ -91,8 +126,8 @@
           :title="actuscard.title"
           :description="actuscard.description"
           :url="actuscard.url"
-        ></SquareCard>
+        ></SquareCardBlocText>
-      </SquareCardList>
+      </SquareCardBlocTextList>
     </PageSection>
 
     <!-- ================== -->
@@ -155,6 +190,7 @@
   import DsMedia from '@root/design-system/primitives/DsMedia.vue'
   import DsButton from '@root/design-system/primitives/DsButton.vue'
   import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
+  import orchestre_img from '@/assets/img/illustrations/orchestre_1.jpg'
   import ppt_img from '@/assets/img/illustrations/map_idf.jpg'
   import DsCard from '@root/design-system/components/DsCard.vue'
 
@@ -269,11 +305,35 @@
   .remonter_concert_list {
     transform: translateY(-170px);
   }
+  .remonter_bloc_dessous {
+    // 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: -170px;
+  }
+
+  .photo_orchestre_wp {
+    
+    .photo_orchestre_img {
+      .page-section--inner--default {
+        max-width: calc(+500px)
+      }
+      img {
+        border-radius: 50px;
+        max-height: 660px;
+      }
+    }
+    .photo_orchestre_cta {
+      padding-top: 20px;
+    }
+  }
+
+
+  //========================
+  // PARTOUT ET POUR TOUS
+  //========================
 
   .theme_ppt_wp {
     margin-bottom: 50px;
-    // 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: -170px;
   }
   .theme_ppt {
     display: grid;
@@ -281,6 +341,7 @@
     &--img {
       grid-row: 1;
       grid-column: 1;
+      max-height: 400px;
     }
     &--content {
       grid-row: 1;
@@ -299,6 +360,9 @@
     }
   }
 
+  //========================
+  // TOUS A L'ORCHESTRE
+  //========================
   .theme_tao {
     margin-bottom: 50px;
 
@@ -379,14 +443,13 @@
           width: clamp(360px, 28vw, 560px);
         }
       }
-
-
-
-
     }
-    
+
   }
 
+  //========================
+  // MAGAZINE
+  //========================
   .theme_mag {
 
     

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

@@ -89,7 +89,7 @@
               </div>
             </div>
           </section>
-        </PageSection>
+      </PageSection>
     </template>
   </div>
 </template>
@@ -101,26 +101,28 @@
   const route = useRoute()
 
   //////////////////////////////////////////////////////////////
-  // RÉCUPÉRATION DU CONTENU
+  // RÉCUPÉRATION DU CONTENU STRAPI
   //////////////////////////////////////////////////////////////
   const artisteSlug = computed(() => String(route.params.id || ''))
   const populate = {
       image_illustration_artiste_ondif: true,
       postes_artiste_ondif: true,
   }
-
   const filters = computed(() => ({
     slug_artiste_ondif: {
       $eq: artisteSlug.value,
     },
   }))
 
-  const { artistes, pending, error } = useArtistes({
+  const { items: artistes, pending, error } = useStrapi(
-    locale: 'fr-FR',
+    "/api/__strapi__/artistes",
-    populate,
+    {
-    filters,
+      locale: "fr-FR",
-    limit: 1,
+      populate,
-  })
+      filters,
+      limit: 1,
+    }
+  )
 
   const artiste = computed(() => artistes.value?.[0] || {})
 

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

@@ -115,12 +115,15 @@
     },
   }))
 
-  const { artistesinvitees, pending, error } = useArtistesInvitees({
+  const { items: artistesinvitees, pending, error } = useStrapi(
-    locale: 'fr-FR',
+    "/api/__strapi__/artistesinvitees",
-    populate,
+    {
-    filters,
+      locale: "fr-FR",
-    limit: 1,
+      populate,
-  })
+      filters,
+      limit: 1,
+    }
+  )
 
   const artiste = computed(() => artistesinvitees.value?.[0] || {})
 

app/pages/orchestre/artistesinvitees.vue

@@ -145,16 +145,19 @@
   //--------------------
   // DONNÉES POUR LES ARTISTES
   //--------------------
-  const { artistesinvitees, pending, error } = useArtistesInvitees({
+  const { items: artistesinvitees, pending, error } = useStrapi(
-      locale: "fr-FR",
+      "/api/__strapi__/artistesinvitees",
-      sort: "nom_artiste_invite:asc",
+      {
-      populate: {
+        locale: "fr-FR",
-          saisons_artiste_invite: true,
+        sort: "nom_artiste_invite:asc",
-          image_illustration_artiste_invite: true,
+        populate: {
-          postes_artiste_invite: true,
+            saisons_artiste_invite: true,
-      },
+            image_illustration_artiste_invite: true,
-      filters: artistesFilters,
+            postes_artiste_invite: true,
-  })
+        },
+        filters: artistesFilters,
+      }
+  )
 
   const artistesDisplay = computed(() => {
     return (artistesinvitees.value || []).map((artiste) => ({

app/pages/orchestre/missions.vue

@@ -1,51 +1,474 @@
 <template>
-  <div>
+    <div>
-    <PageSection>
+        <!-- ================== -->
-        <DsHeading as="h2" tone="invert" textcase="uppercase" class="programme_titre">
+        <!-- FILS D'ARIANE -->
-          PROGRAMME
+        <!-- ================== -->
-        </DsHeading>
+        <PageSection tone="" content-size="default" class="breadcrum_wp">
-        <DsText as="p">
+          <Breadcrumb/>
-            Créé en 1974, l’Orchestre national d’Île-de-France se compose de 95 musiciens engagés et passionnés. Notre formation symphonique propose de nombreux concerts, spectacles et ateliers musicaux sur l’ensemble du territoire francilien. Notre devise : porter la musique classique partout et pour tous ! Programmation, actions éducatives, initiatives culturelles, toute l’activité de l’Orchestre exprime ses valeurs et les missions qui l’animent.
+        </PageSection>
-        </DsText>
+
-    </Pagesection>
+        <!-- ================== -->
-      
+        <!-- EN-TêTE -->
-      <PageSection :content=false>
+        <!-- ================== -->
-        <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache">
+        <section class="fiche_header_wp">
-          <template #title>
+          <div class="fiche_header_wp_gauche"></div>
-              La Région Île-de-France, le territoire de l’Orchestre
+
-          </template>
+          <div class="fiche_header_inner">
-                <DsText as="p" tone="invert" >
+            <div class="fiche_header_titres">
-                    L’Orchestre national d’Île-de-France se déploie sur les 8 départements de la région parisienne, pour amener la musique classique auprès de publics variés. Il se produit dans les salles de spectacle et les théâtres d’Île-de-France comme dans les lieux dépourvus d’offre culturelle. C’est ainsi que ses musiciens investissent régulièrement certains endroits atypiques tels que les hôpitaux, les usines ou les centres pénitentiaires.
+              <div>
-                </DsText>s
+                <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
-        </Decalage>
+                  {{ missions?.header_titre }}
-    </Pagesection>
+                </DsHeading>
+              </div>
+        
+              <DsText as="p" align="justify">
+                  {{ missions?.header_text }}
+              </DsText>
+            </div>
+            <div class="fiche_header_img">
+              <DsMedia
+                v-if="missions?.image_illustration_header?.url"
+                :src="missions.image_illustration_header.url"
+                :alt="missions.image_illustration_header.alternativeText || ''"
+                fit="contain"
+                ratio="square"
+              />
+
+              <div v-else class="img_placeholder" aria-hidden="true" />
+            </div>
+            
+          </div>
+          <div class="fiche_header_wp_droite"></div>
+
+        </section>
+        
+        <!-- ================== -->
+        <!-- PARTIE 1 -->
+        <!-- ================== -->
+        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
+          <SectionContent v-if="missions?.partie_1" class="description_wp">
+            <StrapiBlocksConvert :blocks="missions.partie_1" />
+          </SectionContent>
+        </PageSection>
+
+        <!-- ================== -->
+        <!-- decalage_gauche 1 -->
+        <!-- ================== -->
+        <PageSection :content="false">
+          <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert">
+              <template #title>
+                  {{ missions?.decalage_gauche_1?.decalage_titre }}
+              </template>
+              <DsText as="p" tone="invert" align="justify">
+                  {{ missions?.decalage_gauche_1?.decalage_texte }}
+              </DsText>
+            </Decalage>
+        </PageSection>
+
+        <!-- ================== -->
+        <!-- PARTIE 2 -->
+        <!-- ================== -->
+        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
+          <SectionContent v-if="missions?.partie_2" class="description_wp">
+            <StrapiBlocksConvert :blocks="missions.partie_2" />
+          </SectionContent>
+        </PageSection>
+
+        <!-- ================== -->
+        <!-- decalage_droite_2 -->
+        <!-- ================== -->
+        <PageSection :content="false">
+          <Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert">
+              <template #title>
+                  {{ missions?.decalage_droite_2?.decalage_titre }}
+              </template>
+              <DsText as="p" align="justify">
+                  {{ missions?.decalage_droite_2?.decalage_texte }}
+              </DsText>
+            </Decalage>
+        </PageSection>
+
+        <!-- ================== -->
+        <!-- PARTIE 3 -->
+        <!-- ================== -->
+        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
+          <SectionContent v-if="missions?.partie_3" class="description_wp">
+            <StrapiBlocksConvert :blocks="missions.partie_3" />
+          </SectionContent>
+        </PageSection>
+
+
+
+      <!-- ================== -->
+      <!-- decalage_droite_clic_4 -->
+      <!-- ================== -->
+      <PageSection :content="false">
+        <Decalage tone="brand" title-tone="invert" position="right" button-tone="invert" ensavoirplus-target="texte_cache">
+            <template #title>
+                {{ missions?.decalage_droite_clic_4?.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" align="justify">
+                {{ missions?.decalage_droite_clic_4?.decalage_texte }}
+            </DsText>
+          </Decalage>
+      </PageSection>
       
       <PageSection>
-      <div id="texte_cache" class="decalage_ensavoirplus--hidden">Texte caché</div>
+          <div id="texte_cache" class="decalage_ensavoirplus--hidden">Texte caché</div>
-      </Pagesection>
+      </PageSection>
-      
+
-      <PageSection :content=false>
+      <!-- ================== -->
-        <Decalage tone="brandreverse" " title-tone="invert" position="right">
+      <!-- L'ORCHESTRE POUR LES PROS -->
-            <template #title>
+      <!-- ================== -->
-                  Studio d’enregistrement et location d’instruments
+      <PageSection padded_size="lg">
-            </template>
+        <SectionContent>
-                <DsText as="p">
+            <SectionTitle tone="" pad="xs">
-L’Orchestre national d’Île-de-France accompagne les professionnels et les amateurs dans leurs activités musicales.
+              L'ORCHESTRE POUR LES PROS
-Aux portes de Paris, nous mettons à leur disposition un studio d’enregistrement high-tech et plusieurs espaces de répétition. Nous leur proposons également plus de 3000 instruments à la location à travers un parc instrumental ouvert sur le monde et ses traditions musicales les plus inattendues !
+            </SectionTitle>
-                </DsText>
+        </SectionContent>
-            
+
-        </Decalage>
+        <SectionContent>
-    </Pagesection>
+          <BannierePros />
-  </div>
+        </SectionContent>
+      </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 DsButton from '@root/design-system/primitives/DsButton.vue'
 
+  //--------------------
+  // RÉCUPÉRATION DES DONNÉES STRAPI
+  //--------------------
+  const { items: mission, pending, error, refresh } = useStrapi(
+    "/api/__strapi__/missions",
+    { locale: "fr-FR",
+      populate: {
+        decalage_gauche_1: true,
+        decalage_droite_2: true,
+        decalage_gauche_3: true,
+        decalage_droite_clic_4: true,
+        image_illustration_header: true,
+      },
+     }
+  )
+  const missions = computed(() => mission.value?.[0] || null)
+
 </script>
 
-<style>
+<style lang="scss">
 
-</style>
+
+  .breadcrum_wp {
+    padding-top: 30px;
+  }
+
+  .fiche_header_wp {
+    display: grid;
+    justify-content: center;
+    padding-bottom: 100px;
+    
+
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 510px;
+      padding-top: 40px;
+    }
+    @media (min-width: 600px) {
+      grid-template-columns: minmax(10px, 10px) 580px 0px;
+      grid-template-rows: 40px 380px;
+    }
+    @media (min-width: 700px) {
+      grid-template-columns: minmax(10px, 10px) 660px 0px;
+      grid-template-rows: 40px 380px;
+    }
+    @media (min-width: 800px) {
+      grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
+      grid-template-rows: 40px 340px;
+    }   
+    @media (min-width: 900px) {
+      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1000px) {
+      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1100px) {
+      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1200px) {
+      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1300px) {
+      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1400px) {
+      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1500px) {
+      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+      grid-template-rows: 40px 400px;
+    }
+  }
+  .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;
+    }
+  }
+  .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/3;
+    }
+    @media (min-width: 600px) {
+      grid-column: 2;
+      grid-row: 1/3;
+    }
+    display: grid;
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 510px; 
+    }
+    @media (min-width: 600px) {
+      width: 575px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 380px;
+    }
+    @media (min-width: 700px) {
+      width: 675px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 380px;
+    }
+    @media (min-width: 800px) {
+      width: 780px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 340px;
+    }   
+    @media (min-width: 900px) {
+      width: 860px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1000px) {
+      width: 950px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1100px) {
+      width: 1020px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1200px) {
+      width: 1100px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1300px) {
+      width: 1200px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1400px) {
+      width: 1300px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1500px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1600px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1700px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1800px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 3.5fr;
+      grid-template-rows: 40px 400px;
+    }
+  }
+
+  .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;
+    max-width: 475px;
+
+    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 / 3;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    @media (min-width: 600px) {
+      grid-column: 3 / 5;
+      grid-row: 1 / 3;
+    }
+    overflow: hidden;
+    .ds-media {
+      @media (min-width: 600px) {
+        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);
+  }
+
+  .fiche_description > * {
+    max-width: 570px;
+    display: flex;
+    flex-direction: column;
+  }
+  .fiche_description {
+    .page-section--inner {
+
+      @media (max-width: 599px) {
+          padding-left: 10px;
+          padding-right: 10px;
+      }
+    }
+  }
+
+</style>

app/pages/orchestre/musiciens.vue

@@ -3,7 +3,7 @@
     <!-- ================== -->
     <!-- Fond noir -->
     <!-- ================== -->
-    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
+    <PageSection tone="bleu" content-size="default" class="theme_bandeau--grid">
       <SectionContent pad="xs" class="theme_bandeau--grid--left">
         <SectionTitle tone="invert" pad="">
           LES MUSICIENS
@@ -145,16 +145,19 @@
   //--------------------
   // DONNÉES POUR LES ARTISTES
   //--------------------
-  const { artistes, pending, error } = useArtistes({
+  const { items: artistes, pending, error } = useStrapi(
-      locale: "fr-FR",
+      "/api/__strapi__/artistes",
-      sort: "ordre_artiste_ondif:asc",
+      {
-      populate: {
+        locale: "fr-FR",
-          saisons_artiste_ondif: true,
+        sort: "ordre_artiste_ondif:asc",
-          image_illustration_artiste_ondif: true,
+        populate: {
-          postes_artiste_ondif: true,
+            saisons_artiste_ondif: true,
-      },
+            image_illustration_artiste_ondif: true,
-      filters: artistesFilters,
+            postes_artiste_ondif: true,
-  })
+        },
+        filters: artistesFilters,
+      }
+  )
 
   const artistesDisplay = computed(() => {
     return (artistes.value || []).map((artiste) => ({

design-system/primitives/DsMedia.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="ds-media" :class="`ds-media--${ratio}`">
+  <div class="ds-media" :class="[`ds-media--${ratio}`]">
     <img
       class="ds-media__img"
+      :class="[`ds-media__img--${fit}`]"
       :src="src"
       :alt="alt"
       loading="lazy"
@@ -14,25 +15,29 @@
   defineProps({
     src: { type: String, required: true },
     alt: { type: String, default: '' },
+    fit: { type: String, default: 'cover' },
     ratio: { type: String, default: '' }, // 16-9 / 4-3 / square
   })
 </script>
 
 <style lang="scss">
-.ds-media {
+  .ds-media {
-  width: 100%;
-  background: rgba(0,0,0,0.04);
-  overflow: hidden;
-  &--16-9 { aspect-ratio: 16 / 9; }
-  &--4-3 { aspect-ratio: 4 / 3; }
-  &--3-4 { aspect-ratio: 3 / 4; }
-  &--square { aspect-ratio: 1 / 1; }
-
-  .ds-media__img {
     width: 100%;
-    height: 100%;
+    background: rgba(0,0,0,0.04);
-    object-fit: cover;
+    overflow: hidden;
-    display: block;
+    &--16-9 { aspect-ratio: 16 / 9; }
+    &--4-3 { aspect-ratio: 4 / 3; }
+    &--3-4 { aspect-ratio: 3 / 4; }
+    &--square { aspect-ratio: 1 / 1; }
+
+    .ds-media__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+        &--cover { object-fit:cover; }
+        &--contain { object-fit:contain; }
+    }
   }
-}
+
-</style>
+</style>

design-system/primitives/DsText.vue

@@ -8,6 +8,7 @@
       `ds-text--${props.weight || resolvedWeight}`, //si la classe weight n'est pas donné dans la classe on prend la mapping par défaut
       `ds-text--${props.spacing || resolvedspacing}`,
       `ds-text--${props.tone}`,
+      `ds-text--${props.align}`,
       props.clamp ? `ds-text--clamp_${props.clamp}` : '',
     ]"
   >
@@ -25,6 +26,7 @@
     spacing: { type: String, default: '' },
     tone: { type: String, default: 'default' },         // default/muted/invert
     weight: { type: String, default: 'regular' },       // regular/medium
+    align: { type: String, default: '' },
     clamp: { type: Number, default: undefined },                // nombre de lignes du contenu
   })
 
@@ -113,6 +115,10 @@
     &--bleu_fonce { color: var(--c-bleu_fonce); }
     &--bleu_clair { color: var(--c-bleu_clair); }
 
+    &--justify {
+      text-align: justify;
+    }
+
     // clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
     // Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
     &--clamp_3 {

design-system/tokens/_colors.scss

@@ -9,12 +9,13 @@
     /* Marque / accent (ex: rouge ONDIF) */
     //--c-brand_rouge: #E30613;
     --c-brand_rouge: #E20018;
-    --c-brand_rouge45: rgba(226, 0, 24, 0.45);
+    --c-brand_rouge45: #e2001873;
     --c-brand_rouge-weak: #e3061391;
     --c-backgroud-black: #111;
     --c-backgroud-brandreverse: #ACCFCF;
     --c-background-blanc-casse: #FCFCFC;
     --c-background-jaune: #fac020;
+    --c-background-bleu: #002b95;
 
     /* États */
     --c-success: green;

server/api/__strapi__/[collection].get.js

@@ -0,0 +1,24 @@
+import { createError, getRouterParam } from "h3"
+import { createStrapiProxyHandler } from "~~/server/utils/strapiEndpoint"
+
+const COLLECTION_MAP = {
+  artistes: "/api/artistes-ondifs",
+  artistesinvitees: "/api/artistes-invites",
+  concerts: "/api/concerts",
+  missions: "/api/mission",
+  mission: "/api/mission",
+}
+
+export default defineEventHandler(async (event) => {
+  const collection = getRouterParam(event, "collection")
+  const strapiPath = COLLECTION_MAP[collection]
+
+  if (!strapiPath) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Unknown Strapi collection",
+    })
+  }
+
+  return createStrapiProxyHandler({ strapiPath })(event)
+})