dev

README.md

@@ -56,7 +56,7 @@ git push origin main
 2. cd /var/www/wondif_vue
 3.
 git pull origin main        # récupère le dernier code
-si besoin
+si besoin (ajout de 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 reload ecosystem.config.cjs --only wondif_vue     # redémarre le process avec les nouvelles variables d'environnement de ecosystem

app/components/Breadcrumb.vue

@@ -29,6 +29,8 @@
     agenda: 'Agenda',
     saison: 'Saison',
     orchestre: "L'Orchestre",
+    mediation: "Médiation",
+    mecenat: "Mécénat",
     professionnels: "Professionnels"
   }
 
@@ -72,7 +74,7 @@
         ? props.currentLabel
         : (labelMap[part] || humanize(decodeURIComponent(part)))
 
-      const noLink = part === 'orchestre' || part === 'concerts'
+      const noLink = part === 'orchestre' || part === 'concerts' || part === 'mediation' || part === 'mecenat'
       crumbs.push({ to: resolveTo(part, index, parts, acc), label, noLink })
 
       if (part === 'concerts') {

app/components/header/HeaderNav.vue

@@ -43,7 +43,6 @@
               <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>
             </ul>
           </li>
 
@@ -52,9 +51,7 @@
             <ul class="header_nav_sub_menu">
               <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mode-emploi">Concert mode d'emploi</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/live">ONDIF LIVE !</NuxtLink></li>
             </ul>
           </li>
 
@@ -74,9 +71,9 @@
           <li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
             Nous soutenir
             <ul class="header_nav_sub_menu decalage_gauche c--noir margin_top_3">
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/valeurs">Nos valeurs</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/particuliers">Particuliers</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/mecenes">Ils nous font confiance</NuxtLink></li>
             </ul>
@@ -175,7 +172,6 @@
                 <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>
               </ul>
             </li>
 
@@ -188,9 +184,7 @@
               <ul class="header_drawer_sub_menu">
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mode-emploi">Concert mode d'emploi</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/live">ONDIF LIVE !</NuxtLink></li>
               </ul>
             </li>
 
@@ -218,9 +212,9 @@
             >
               Nous soutenir
               <ul class="header_drawer_sub_menu">
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/valeurs">Nos valeurs</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/particuliers">Particuliers</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/mecenes">Ils nous font confiance</NuxtLink></li>
               </ul>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="concert--page">
     <section v-if="pending" aria-busy="true" aria-live="polite">
       <p>en cours de chargement...</p>
     </section>
@@ -766,21 +766,6 @@
     }
   }
 
-  /* ============================ */
-  /* DESCRIPTION */
-  /* ============================ */
-  .description_wp {
-    display: flex;
-    justify-content: center;
-    padding-bottom: 40px;
-    padding-left: 10px;
-    padding-right: 10px;
-    > * {
-      max-width: 570px;
-      display: flex;
-      flex-direction: column;
-    }
-  }
   /* ============================ */
   /* GALERIES */
   /* ============================ */
@@ -876,8 +861,33 @@
   }
 
   .youtube-item iframe {
-       
     aspect-ratio: 16 / 9;
     border: 0;
   }
+
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  /* ============================ */
+  /* DESCRIPTION */
+  /* ============================ */
+  .concert--page {
+    .description_wp {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 40px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 570px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
+
+
+
+
 </style>

app/pages/concerts/live.vue

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

app/pages/concerts/mode-emploi.vue

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

app/pages/mecenat/projets.vue

@@ -1,13 +1,294 @@
 <template>
+  <div class="projets--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_wp">
+        <div class="fiche_header_wp_gauche"></div>
+
+        <div class="fiche_header_inner">
+          <div class="fiche_header_titres">
             <div>
+              <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
+                {{projets_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{projets_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="projets_donnees_servies?.header_illustration?.url"
+              :src="projets_donnees_servies.header_illustration.url"
+              :alt="projets_donnees_servies.header_illustration.alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- CHIFFRES -->
+      <!-- ================== -->
+      <PageSection
+        v-if="hasProjetsChiffres"
+        tone=""
+        content-size="default"
+        padded_size="md"
+        class="chiffres_wp"
+      >
+          <Chiffres
+            :title="projets_donnees_servies?.chiffres_projets?.Titre"
+            :items="projetsChiffres"
+          />
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <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="projets-details"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" align="justify">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          data-ensavoirplus-group="projets-details"
+          tone=""
+          content-size="default"
+          padded_size="md"
+          class="decalage_ensavoirplus--hidden"
+        >
+          <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>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <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>
+
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Contacter le service des actions culturelles"
+            nom="Vanessa Gasztowtt"
+            poste="Responsable de l’action éducative et culturelle
+et de la programmation jeune public"
+            numero="01 41 79 03 43"
+            mail="vanessa.gasztowtt@orchestre-ile.com"
+          />
+      </PageSection>
 
   </div>
 </template>
 
 <script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/projet"
+  const populate = {
+      header_illustration: true,
+      chiffres_projets: {chiffres: true},
+      tiroirs_projets: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: projets, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+  console.log("projets:", projets.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("projets:", projets.value)
+  })
+
+  watchEffect(() => {
+    if (!pending.value && projets.value?.length) {
+      console.log("projets dans le watch effect:", projets.value)
+      console.log("projets header_titre :", projets.value[0].header_titre)
+      console.log("projets illustration url :", projets.value[0].header_illustration?.url)
+      
+    }
+  })
+
+  console.log("projets header_titre :", projets.value?.[0]?.header_titre)
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const projets_donnees_servies = computed(() => projets.value?.[0] || {})
+  watchEffect(() => {
+    console.log("projets_donnees_servies JSON:", JSON.stringify(projets_donnees_servies.value, null, 2))
+  })
+
+  const projetsChiffres = computed(() =>
+    (projets.value?.[0]?.chiffres_projets?.chiffres || []).map((item) => ({
+      value: item.chiffre,
+      label: item.label,
+    }))
+  )
+
+  const hasProjetsChiffres = computed(() => (
+    Boolean(projets_donnees_servies.value?.chiffres_projets?.Titre)
+    || projetsChiffres.value.length > 0
+  ))
+
+  const tiroirs = computed(() =>
+    (projets.value?.[0]?.tiroirs_projets || []).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("projetsChiffres JSON:", JSON.stringify(projetsChiffres.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">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .projets--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-top: 10px;
+      padding-bottom: 70px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-bottom: 20px;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
 
 </style>

app/pages/mecenat/soutenir.vue

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

app/pages/mecenat/valeurs.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="valeurs--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_wp">
+        <div class="fiche_header_wp_gauche"></div>
+
+        <div class="fiche_header_inner">
+          <div class="fiche_header_titres">
+            <div>
+              <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
+                {{valeurs_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{valeurs_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="valeurs_donnees_servies?.header_illustration?.[0]?.url"
+              :src="valeurs_donnees_servies.header_illustration[0].url"
+              :alt="valeurs_donnees_servies.header_illustration[0].alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- CHIFFRES -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
+          <Chiffres
+            :title="valeurs_donnees_servies?.chiffres_valeurs?.Titre"
+            :items="valeursChiffres"
+          />
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <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="valeurs-details"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" align="justify">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          data-ensavoirplus-group="valeurs-details"
+          tone=""
+          content-size="default"
+          padded_size="md"
+          class="decalage_ensavoirplus--hidden"
+        >
+          <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>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <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>
+
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Contacter le service des actions culturelles"
+            nom="Vanessa Gasztowtt"
+            poste="Responsable de l’action éducative et culturelle
+et de la programmation jeune public"
+            numero="01 41 79 03 43"
+            mail="vanessa.gasztowtt@orchestre-ile.com"
+          />
+      </PageSection>
+
+  </div>
+</template>
+
+<script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/valeurs"
+  const populate = {
+      header_illustration: true,
+      chiffres_valeurs: {chiffres: true},
+      tiroirs_valeurs: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: valeurs, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+  console.log("valeurs:", valeurs.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("valeurs:", valeurs.value)
+  })
+
+  watchEffect(() => {
+    if (!pending.value && valeurs.value?.length) {
+      console.log("valeurs dans le watch effect:", valeurs.value)
+      console.log("valeurs header_titre :", valeurs.value[0].header_titre)
+      console.log("valeurs illustration url :", valeurs.value[0].header_illustration[0].url)
+      
+    }
+  })
+
+  console.log("valeurs header_titre :", valeurs.value?.[0]?.header_titre)
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const valeurs_donnees_servies = computed(() => valeurs.value?.[0] || {})
+  watchEffect(() => {
+    console.log("valeurs_donnees_servies JSON:", JSON.stringify(valeurs_donnees_servies.value, null, 2))
+  })
+
+  const valeursChiffres = computed(() =>
+    (valeurs.value?.[0]?.chiffres_valeurs?.chiffres || []).map((item) => ({
+      value: item.chiffre,
+      label: item.label,
+    }))
+  )
+
+  const tiroirs = computed(() =>
+    (valeurs.value?.[0]?.tiroirs_valeurs || []).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("valeursChiffres JSON:", JSON.stringify(valeursChiffres.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">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .valeurs--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-top: 10px;
+      padding-bottom: 70px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-bottom: 20px;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+</style>

app/pages/mediation/scolaires.vue

@@ -91,7 +91,7 @@
               />
             </div>
           </section>
-          <SectionContent class="description_wp">
+          <SectionContent class="description_wp fiche_description">
             <StrapiBlocksConvert :blocks="t.tiroir_description" />
           </SectionContent>
           <section v-if="t.tiroir_videos.length" class="youtube_wp">
@@ -257,6 +257,19 @@ et de la programmation jeune public"
       background-color: var(--c-background-jaune);
       margin-bottom: 50px;
     }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-top: 10px;
+      padding-bottom: 70px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
     .contact_spe_wp {
       background-color: var(--c-background-jaune-clair);
       margin-bottom: 20px;

app/pages/orchestre/missions.vue

@@ -145,7 +145,13 @@
       </PageSection>
       
       <PageSection tone="" content-size="default" padded_size="" class="fiche_description">
-          <div id="texte_cache" class="decalage_ensavoirplus--hidden"><StrapiBlocksConvert :blocks="missions.partie_ouvrable_4" /></div>
+          <div
+            v-if="missions?.partie_ouvrable_4"
+            id="texte_cache"
+            class="decalage_ensavoirplus--hidden"
+          >
+            <StrapiBlocksConvert :blocks="missions.partie_ouvrable_4 || []" />
+          </div>
       </PageSection>
 
       <!-- ================== -->

design-system/tokens/_colors.scss

@@ -16,7 +16,7 @@
     --c-background-blanc-casse: #FCFCFC;
     --c-background-jaune: #fac020;
     --c-background-jaune-clair: #fac0201f;
-    --c-background-vert: #51d43d;
+    --c-background-vert: #c8ffda;
 
     /* États */
     --c-success: green;

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

@@ -8,6 +8,8 @@ const COLLECTION_MAP = {
   missions: "/api/mission",
   mission: "/api/mission",
   scolaires: "/api/scolaire",
+  valeurs: "/api/valeurs",
+  projet: "/api/projet",
 }
 
 export default defineEventHandler(async (event) => {