dev

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

@@ -348,7 +348,6 @@
   .fiche_header_wp {
     display: grid;
     
-
     @media (min-width: 0px) and (max-width: 600px) {
       grid-template-columns: 1fr;
       grid-template-rows: auto 510px 20px 200px;
@@ -773,7 +772,7 @@
   .description_wp {
     display: flex;
     justify-content: center;
-    padding-bottom: 70px;
+    padding-bottom: 40px;
     padding-left: 10px;
     padding-right: 10px;
     > * {
@@ -792,10 +791,10 @@
 
   .img-gallery {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 520px));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 502px));
     gap: 1rem;
     justify-content: center;
-    margin-top: 1.5rem;
+    margin-top: 10px;
     width: 100%;
   }
 

app/pages/index.vue

@@ -52,7 +52,7 @@
           </SectionTitle>
           <SectionContent pad="xs" class="theme_ppt--description">
             <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.
+              Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos 95 musiciennes et musiciens. L'Orchestre donne 120 concerts par saison dans les 8 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">

app/pages/mediation/scolaires.vue

@@ -17,19 +17,19 @@
           <div class="fiche_header_titres">
             <div>
               <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
-                ACTIONS CULTURELLES POUR LES SCOLAIRES
+                {{scolaire_donnees_servies.header_titre}}
               </DsHeading>
             </div>
       
             <DsText as="p" align="justify">
-                Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. 
+                {{scolaire_donnees_servies.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 || ''"
+              v-if="scolaire_donnees_servies?.header_illustration?.[0]?.url"
+              :src="scolaire_donnees_servies.header_illustration[0].url"
+              :alt="scolaire_donnees_servies.header_illustration[0].alternativeText || ''"
               fit="cover"
               ratio="square"
             />
@@ -46,80 +46,71 @@
       <!-- CHIFFRES -->
       <!-- ================== -->
       <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
-          <Chiffres />
+          <Chiffres
+            :title= "scolaire_donnees_servies?.chiffres_scolaires?.[0]?.Titre"
+            :items="scolairesChiffres"
+          />
       </PageSection>
 
       <!-- ================== -->
-      <!-- decalage_gauche 1 -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
       <!-- ================== -->
-      <PageSection :content="false">
-        <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache" ensavoirplus-group="scolaires-details">
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="`texte_cache_${index + 3}`"
+            ensavoirplus-group="scolaires-details"
+          >
             <template #title>
-                Lycées - Tous à l'Orchestre !
+              {{ t.decalage_titre }}
             </template>
             <DsText as="p" tone="invert" align="justify">
-                Découvrir l’univers de l’orchestre, entrer dans la peau d’un professionnel du spectacle, organisez avec vos élèves un concert au sein de votre établissement, sont autant d'apprentissage que l'Orchestre amènent auprès des jeunes lycéens en devenir.
+              {{ t.decalage_texte }}
             </DsText>
           </Decalage>
-      </PageSection>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          data-ensavoirplus-group="scolaires-details"
+          tone=""
+          content-size="default"
+          padded_size="md"
+          class="decalage_ensavoirplus--hidden"
+        >
+          <SectionContent class="description_wp">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  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>
 
-      <PageSection id="texte_cache" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
-        <SectionContent class="description_wp">
-          <div class="strapi-blocks">
-            <!-- Paragraph -->
-            <!-- Heading -->
-            <h1 class="strapi-blocks__h">La programmation de l’Orchestre : richesse et diversité</h1>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">L’Orchestre explore 4 siècles de musique.</p>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Musique baroque ou contemporaine, classique ou romantique, nos musiciens, nos solistes et plusieurs chefs de renommée internationale interprètent une grande diversité de chefs-d’œuvre musicaux.</p>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Avide d’échanges et de partages, notre formation se produit aussi dans de hauts lieux de la musique et des festivals internationaux comme le festival Enescu à Bucarest, le festival Haydn à Vienne ou le festival Berlioz en Isère.</p>
-            <!-- Paragraph --><!-- Heading -->
-            <h1 class="strapi-blocks__h">Musique classique, culture et éducation</h1>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Au-delà des concerts de sa programmation, l’Orchestre national d’Île-de-France mène également de nombreuses actions éducatives et culturelles pour faire découvrir la musique classique au plus grand nombre.</p>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Rencontre avec les artistes, ateliers de pratique musicale et artistique, concerts éducatifs, spectacles musicaux, concerts participatifs, chacune de nos initiatives place le public au cœur de notre projet artistique !</p>
-          </div>
-        </SectionContent>
-      </PageSection>
-
-      <!-- ================== -->
-      <!-- decalage_droite_2 -->
-      <!-- ================== -->
-      <PageSection :content="false">
-        <Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert" ensavoirplus-target="texte_cache_2" ensavoirplus-group="scolaires-details">
-            <template #title>
-                Collège
-            </template>
-            <DsText as="p" align="justify">
-              Développer une écoute active, acquérir le vocabulaire spécifique, mettre en perspective la musique qu’ils écoutent et la musique symphonique sont des objectifs des sessions organisées pour les collégiens.
-            </DsText>
-          </Decalage>
-      </PageSection>
-
-      <PageSection id="texte_cache_2" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
-        <SectionContent class="description_wp">
-          <div class="strapi-blocks">
-            <!-- Paragraph -->
-            <!-- Heading -->
-            <h1 class="strapi-blocks__h">La programmation de l’Orchestre : richesse et diversité</h1>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">L’Orchestre explore 4 siècles de musique.</p>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Musique baroque ou contemporaine, classique ou romantique, nos musiciens, nos solistes et plusieurs chefs de renommée internationale interprètent une grande diversité de chefs-d’œuvre musicaux.</p>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Avide d’échanges et de partages, notre formation se produit aussi dans de hauts lieux de la musique et des festivals internationaux comme le festival Enescu à Bucarest, le festival Haydn à Vienne ou le festival Berlioz en Isère.</p>
-            <!-- Paragraph --><!-- Heading -->
-            <h1 class="strapi-blocks__h">Musique classique, culture et éducation</h1>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Au-delà des concerts de sa programmation, l’Orchestre national d’Île-de-France mène également de nombreuses actions éducatives et culturelles pour faire découvrir la musique classique au plus grand nombre.</p>
-            <!-- Paragraph -->
-            <p class="strapi-blocks--p">Rencontre avec les artistes, ateliers de pratique musicale et artistique, concerts éducatifs, spectacles musicaux, concerts participatifs, chacune de nos initiatives place le public au cœur de notre projet artistique !</p>
-          </div>
-        </SectionContent>
-      </PageSection>
   </div>
 </template>
 
@@ -127,6 +118,118 @@
   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'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/scolaires"
+  const populate = {
+      header_illustration: true,
+      chiffres_scolaires: {chiffres: true},
+      tiroirs_scolaires: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: scolaires, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+  console.log("scolaires:", scolaires.value)
+  watchEffect(() => {
+    console.log("client ?", import.meta.client)
+    console.log("server ?", import.meta.server)
+    console.log("pending:", pending.value)
+    console.log("error:", error.value)
+    console.log("scolaires:", scolaires.value)
+  })
+
+  watchEffect(() => {
+    if (!pending.value && scolaires.value?.length) {
+      console.log("scolaires dans le watch effect:", scolaires.value)
+      console.log("scolaires header_titre :", scolaires.value[0].header_titre)
+      console.log("scolaires illustration url :", scolaires.value[0].header_illustration[0].url)
+      
+    }
+  })
+
+  console.log("scolaires header_titre :", scolaires.value?.[0]?.header_titre)
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
+  watchEffect(() => {
+    console.log("scolaire_donnees_servies JSON:", JSON.stringify(scolaire_donnees_servies.value, null, 2))
+  })
+
+  const scolairesChiffres = computed(() =>
+    (scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
+      value: item.chiffre,
+      label: item.label,
+    }))
+  )
+
+  const tiroirs = computed(() =>
+    (scolaires.value?.[0]?.tiroirs_scolaires || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  watchEffect(() => {
+    console.log("scolairesChiffres JSON:", JSON.stringify(scolairesChiffres.value, null, 2))
+    console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
+  })
+
+
+  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
+    }
+  }
+
 </script>
 
 <style lang="scss">
@@ -140,5 +243,8 @@
     }
   }
 
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
 
 </style>

app/pages/orchestre/missions.vue

@@ -55,7 +55,10 @@
         <!-- CHIFFRES -->
         <!-- ================== -->
         <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
-            <Chiffres />
+            <Chiffres
+              title="L'ORCHESTRE PARTOUT EN ÎLE-DE-FRANCE"
+              :items="missionsChiffres"
+            />
         </PageSection>
 
 
@@ -166,6 +169,13 @@
      }
   )
   const missions = computed(() => mission.value?.[0] || null)
+  const missionsChiffres = [
+    { value: '8', label: 'Départements' },
+    { 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" }
+  ]
 
 </script>
 
@@ -478,7 +488,7 @@
 // =======================
 .missions--page {
   .chiffres_wp {
-    background-color: #31ae13c2;
+    background-color: var(--c-background-vert);
     margin-bottom: 50px;
   }
 }