dev

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

app/assets/scss/base/_colors.scss

@@ -12,6 +12,8 @@ $vert: green;
 $bleu_fonce: #0056b3;
 $bleu_clair: #007bff;
 
-
+.c--noir {
+    color: $noir;
+}
 
 

app/assets/scss/base/_spaces.scss

@@ -20,6 +20,9 @@
     height: 33px;
 }
 
+.margin_top_3 {
+    margin-top: 3px;
+}
 .margin_left_-20 {
     margin-left: -20px;
 }

app/assets/scss/component/_header_nav.scss

@@ -341,6 +341,7 @@
             padding-top: 3px;
             padding-bottom: 1px;
             padding-right: 6px;
+            margin-top: -6px;
         }
     }
 

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
-          <div class="chiffres_nombre">14</div>
+          v-for="(item, index) in items"
-          <div class="chiffres_descriptioin">Concerts dans le Val-de-Marne</div>
+          :key="`${item.value}-${index}`"
-        </div>
+          class="chiffres_item"
-        <div class="chiffres_item">
+        >
-          <div class="chiffres_nombre">6 831</div>
+          <div class="chiffres_nombre">{{ item.value }}</div>
-          <div class="chiffres_descriptioin">Spectateurs dans les Yvelines</div>
+          <div class="chiffres_descriptioin">{{ item.label }}</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>
       </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;

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;
     }
   }
 

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>

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); }
 

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,
+    ul + &__h,
-    &--ol + &__h,
+    ol + &__h,
-    &--quote + &__h {
+    blockquote + &__h {
       margin-top: 13px;
     }
+
   }
 </style>

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]`)
     }
   })

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"
+              v-if="scolaire_donnees_servies?.header_illustration?.[0]?.url"
-              :src="missions.image_illustration_header.url"
+              :src="scolaire_donnees_servies.header_illustration[0].url"
-              :alt="missions.image_illustration_header.alternativeText || ''"
+              :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 -->
       <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
         <PageSection :content="false">
-        <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache" ensavoirplus-group="scolaires-details">
+          <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" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
+          :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">
-          <div class="strapi-blocks">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
-            <!-- 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>
+          <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>
-
-      <!-- ================== -->
-      <!-- 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;
   }
 }

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;

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;

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) => {