From e320feb2d7752165f8196ad3ab899f7acf8f844f Mon Sep 17 00:00:00 2001
From: Julie <contact@parisweb.art>
Date: Tue, 7 Apr 2026 22:02:43 +0200
Subject: [PATCH] dev

---
 README.md                                     |  41 +--
 app/assets/scss/base/_colors.scss             |   4 +-
 app/assets/scss/base/_spaces.scss             |   3 +
 app/assets/scss/component/_header_nav.scss    |   1 +
 app/components/Chiffres.vue                   |  51 ++--
 app/components/concert/ConcertCardList.vue    |   3 +
 app/components/header/HeaderNav.vue           |   2 +-
 app/components/section/PageSection.vue        |   1 -
 .../strapiconvert/StrapiBlocksConvert.vue     |  20 +-
 app/composables/useStrapi.js                  |   7 -
 app/pages/concerts/concert-[id].vue           |   7 +-
 app/pages/index.vue                           |   2 +-
 app/pages/mediation/scolaires.vue             | 244 +++++++++++++-----
 app/pages/orchestre/missions.vue              |  14 +-
 design-system/tokens/_colors.scss             |   2 +-
 design-system/tokens/_typography.scss         |   4 +
 server/api/__strapi__/[collection].get.js     |   1 +
 17 files changed, 268 insertions(+), 139 deletions(-)

diff --git a/README.md b/README.md
index d840ce2..ec2f637 100644
--- a/README.md
+++ b/README.md
@@ -106,29 +106,36 @@ populate[programme_concert]=true&
 populate[representation_concert][populate]=lieu_representation&
 populate[liens_youtube_concert]=true
 
-| Niveau 1 | Niveau 2 | Niveau 3 |
-|----------|----------|----------|
-| saison_concert| | |
-| genre_concert| | |
-| type_audience_concert| | |
-| direction_ondif_concert| postes_artiste_ondif| |
-| direction_invite_concert|postes_artiste_invite| |
-| artistes_ondif_concert| postes_artiste_ondif| |
-| artistes_invite_concert| postes_artiste_invite| |
-| A| B| C|
-| A| B| C|
-| A| B| C|
-| A| B| C|
-| A| B| C|
-| 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=*
 
 
+### Afficher les données récupérées ou les erreurs dans la console
+  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)
+    }
+  })
+
 ## SAISIE DU CONTENU
 ### slug
 - concert
diff --git a/app/assets/scss/base/_colors.scss b/app/assets/scss/base/_colors.scss
index 84612fb..cdec8a0 100644
--- a/app/assets/scss/base/_colors.scss
+++ b/app/assets/scss/base/_colors.scss
@@ -12,6 +12,8 @@ $vert: green;
 $bleu_fonce: #0056b3;
 $bleu_clair: #007bff;
 
-
+.c--noir {
+    color: $noir;
+}
 
 
diff --git a/app/assets/scss/base/_spaces.scss b/app/assets/scss/base/_spaces.scss
index 391f875..50e61b8 100644
--- a/app/assets/scss/base/_spaces.scss
+++ b/app/assets/scss/base/_spaces.scss
@@ -20,6 +20,9 @@
     height: 33px;
 }
 
+.margin_top_3 {
+    margin-top: 3px;
+}
 .margin_left_-20 {
     margin-left: -20px;
 }
diff --git a/app/assets/scss/component/_header_nav.scss b/app/assets/scss/component/_header_nav.scss
index 111d646..9a1dfaa 100644
--- a/app/assets/scss/component/_header_nav.scss
+++ b/app/assets/scss/component/_header_nav.scss
@@ -341,6 +341,7 @@
             padding-top: 3px;
             padding-bottom: 1px;
             padding-right: 6px;
+            margin-top: -6px;
         }
     }
 
diff --git a/app/components/Chiffres.vue b/app/components/Chiffres.vue
index 53763f0..f865465 100644
--- a/app/components/Chiffres.vue
+++ b/app/components/Chiffres.vue
@@ -1,36 +1,16 @@
 <template>
   <section class="chiffres_cont">
       <DsHeading as="h1" tone="default" textcase="uppercase">
-        DES CHIFRES PARTOUT EN ÎLE-DE-FRANCE EN 2025
+        {{ title }}
       </DsHeading>
       <div class="chiffres_list">
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">14</div>
-          <div class="chiffres_descriptioin">Concerts dans le Val-de-Marne</div>
-        </div>
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">6 831</div>
-          <div class="chiffres_descriptioin">Spectateurs dans les Yvelines</div>
-        </div>
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">9</div>
-          <div class="chiffres_descriptioin">Villes en Seine-et-Marne</div>
-        </div>
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">10</div>
-          <div class="chiffres_descriptioin">Concerts en Hauts-de-Seine</div>
-        </div>
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">2 456</div>
-          <div class="chiffres_descriptioin">Spectateurs en Seine-Saint-Denis</div>
-        </div>
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">7 419</div>
-          <div class="chiffres_descriptioin">Spectateurs dans l'Essonne</div>
-        </div>
-        <div class="chiffres_item">
-          <div class="chiffres_nombre">6</div>
-          <div class="chiffres_descriptioin">Concerts en Vald'Oise</div>
+        <div
+          v-for="(item, index) in items"
+          :key="`${item.value}-${index}`"
+          class="chiffres_item"
+        >
+          <div class="chiffres_nombre">{{ item.value }}</div>
+          <div class="chiffres_descriptioin">{{ item.label }}</div>
         </div>
       </div>
   </section>
@@ -38,6 +18,17 @@
 
 <script setup>
   import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+
+  defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    }
+  })
 </script>
 
 <style lang="scss">
@@ -67,7 +58,7 @@
         margin-top: 60px;
 
         .chiffres_item {
-          max-width: 180px;
+          max-width: 200px;
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -101,4 +92,4 @@
   }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/app/components/concert/ConcertCardList.vue b/app/components/concert/ConcertCardList.vue
index a4b5911..075a0ae 100644
--- a/app/components/concert/ConcertCardList.vue
+++ b/app/components/concert/ConcertCardList.vue
@@ -94,6 +94,7 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 340px;
+      min-width: 500px;
     }
   }
 
@@ -104,6 +105,7 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 380px;
+      min-width: 500px;
     }
   }
 
@@ -124,6 +126,7 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 440px;
+      min-width: 500px;
     }
   }
 
diff --git a/app/components/header/HeaderNav.vue b/app/components/header/HeaderNav.vue
index 9e030b0..87f938e 100644
--- a/app/components/header/HeaderNav.vue
+++ b/app/components/header/HeaderNav.vue
@@ -73,7 +73,7 @@
 
           <li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
             Nous soutenir
-            <ul class="header_nav_sub_menu decalage_gauche">
+            <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/entreprises">Entreprises</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
diff --git a/app/components/section/PageSection.vue b/app/components/section/PageSection.vue
index 5c3bb80..309bf9d 100644
--- a/app/components/section/PageSection.vue
+++ b/app/components/section/PageSection.vue
@@ -54,7 +54,6 @@
         &--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); }
 
diff --git a/app/components/strapiconvert/StrapiBlocksConvert.vue b/app/components/strapiconvert/StrapiBlocksConvert.vue
index 4d58806..0c5980a 100644
--- a/app/components/strapiconvert/StrapiBlocksConvert.vue
+++ b/app/components/strapiconvert/StrapiBlocksConvert.vue
@@ -121,7 +121,7 @@
       color: var(--c-brand_rouge);
     }
     h3 {
-      padding-bottom: 5px;
+      padding-bottom: 10px;
       font-weight: var(--fw-semibold);
       font-size: 26px;
     }
@@ -141,6 +141,14 @@
       font-size: 22px;
     }
 
+    em {
+      font-style: var(--fi-hight);
+    }
+
+    strong {
+      font-weight: var(--fw-semibold);
+    }
+
     a {
       text-decoration: underline;
       color: var(--c-brand_rouge-weak);
@@ -151,6 +159,7 @@
     ol {
       list-style: none;
       margin: 0 0 5px;
+      padding-top: 5px;
       padding-left: 0;
     }
 
@@ -158,7 +167,7 @@
       position: relative;
       margin: 0;
       padding-left: 23px;
-      margin-bottom: 5px;
+      margin-bottom: 10px;
 
     }
 
@@ -214,10 +223,11 @@
 
     // Espace uniquement avant un titre s'il suit un bloc de contenu
     &--p + &__h,
-    &--ul + &__h,
-    &--ol + &__h,
-    &--quote + &__h {
+    ul + &__h,
+    ol + &__h,
+    blockquote + &__h {
       margin-top: 13px;
     }
+
   }
 </style>
diff --git a/app/composables/useStrapi.js b/app/composables/useStrapi.js
index f1df3e1..344a78a 100644
--- a/app/composables/useStrapi.js
+++ b/app/composables/useStrapi.js
@@ -61,13 +61,6 @@ function appendPopulate(query, populate, prefix = "populate") {
       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]`)
     }
   })
diff --git a/app/pages/concerts/concert-[id].vue b/app/pages/concerts/concert-[id].vue
index 3f8fccd..aa50696 100644
--- a/app/pages/concerts/concert-[id].vue
+++ b/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%;
   }
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e50183b..834e1ae 100644
--- a/app/pages/index.vue
+++ b/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">
diff --git a/app/pages/mediation/scolaires.vue b/app/pages/mediation/scolaires.vue
index b28f830..62395ad 100644
--- a/app/pages/mediation/scolaires.vue
+++ b/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>
diff --git a/app/pages/orchestre/missions.vue b/app/pages/orchestre/missions.vue
index 60cdafc..208b60d 100644
--- a/app/pages/orchestre/missions.vue
+++ b/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;
   }
 }
diff --git a/design-system/tokens/_colors.scss b/design-system/tokens/_colors.scss
index 1742386..fa0e0a3 100644
--- a/design-system/tokens/_colors.scss
+++ b/design-system/tokens/_colors.scss
@@ -15,7 +15,7 @@
     --c-backgroud-brandreverse: #ACCFCF;
     --c-background-blanc-casse: #FCFCFC;
     --c-background-jaune: #fac020;
-    --c-background-bleu: #002b95;
+    --c-background-vert: #51d43d;
 
     /* États */
     --c-success: green;
diff --git a/design-system/tokens/_typography.scss b/design-system/tokens/_typography.scss
index 39f4c52..f1d3107 100644
--- a/design-system/tokens/_typography.scss
+++ b/design-system/tokens/_typography.scss
@@ -26,6 +26,10 @@
     --fw-extrabold: 800;
     --fw-black: 900;
 
+    /* Font italique */
+    --fi-normal: oblique 5deg;
+    --fi-hight: oblique 10deg;
+
     /* Optical size (opsz) : utile avec Roboto Flex */
     --opsz-body: 14;
     --opsz-title: 28;
diff --git a/server/api/__strapi__/[collection].get.js b/server/api/__strapi__/[collection].get.js
index ea54e0d..5e6f7f9 100644
--- a/server/api/__strapi__/[collection].get.js
+++ b/server/api/__strapi__/[collection].get.js
@@ -7,6 +7,7 @@ const COLLECTION_MAP = {
   concerts: "/api/concerts",
   missions: "/api/mission",
   mission: "/api/mission",
+  scolaires: "/api/scolaire",
 }
 
 export default defineEventHandler(async (event) => {