diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..02be578
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "chatgpt.openOnStartup": true
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 02ebfad..d840ce2 100644
--- a/README.md
+++ b/README.md
@@ -52,8 +52,9 @@ git push origin main
 6. clique sur **Sync Changes**
 
 ## Du Gitea vers VPS
-cd /var/www/wondif_vue
-
+1. Se connecter au VPS
+2. cd /var/www/wondif_vue
+3.
 git pull origin main        # récupère le dernier code
 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
diff --git a/app/assets/scss/base/_img.scss b/app/assets/scss/base/_img.scss
index 32e0438..287c122 100644
--- a/app/assets/scss/base/_img.scss
+++ b/app/assets/scss/base/_img.scss
@@ -19,4 +19,8 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.04);
+}
+
+.img_darkness::after {
+  background: rgba(0, 0, 0, var(--overlay-opacity, 0.4));
 }
\ No newline at end of file
diff --git a/app/assets/scss/component/_header_nav.scss b/app/assets/scss/component/_header_nav.scss
index 78210ea..111d646 100644
--- a/app/assets/scss/component/_header_nav.scss
+++ b/app/assets/scss/component/_header_nav.scss
@@ -333,6 +333,15 @@
                 margin-top: -4px;
             }
         }
+
+        .nav_focus_black {
+            background-color: var(--c-text);
+            color: var(--c-text-invert);
+            padding-left: 5px;
+            padding-top: 3px;
+            padding-bottom: 1px;
+            padding-right: 6px;
+        }
     }
 
     /* accessibilité pour que les écran est le message "ouvrir le menu" mais non visible sur l'écran en mode normal*/
@@ -523,6 +532,13 @@
                     }
                 }
         }
+        .nav_focus_invert {
+            background-color: var(--c-text-invert);
+            color: var(--c-text);
+            padding-inline: 5px;
+            padding-top: 2px;
+            padding-bottom: 1px;
+        }
     }
     
 
diff --git a/app/assets/scss/component/_orbites.scss b/app/assets/scss/component/_orbites.scss
deleted file mode 100644
index 180d264..0000000
--- a/app/assets/scss/component/_orbites.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.bg-orbs {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  //transform: translateZ(0);
-  overflow: hidden;
-}
-
-.orb {
-  position: absolute;
-  border-radius: 999px;
-  //filter: blur(3px);
-  opacity: 0.5;
-  //will-change: transform;
-  //transform: translate3d(0,0,0);
-
-  //background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
-  background: red;
-}
-
-.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
-.orb--2 { width: 320px; height: 320px; top: 6%;  left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
-
-//@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
-//@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
-//@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
-//@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
-//@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
-//@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
-
-@media (prefers-reduced-motion: reduce) {
-  .orb { animation: none !important; }
-}
\ No newline at end of file
diff --git a/app/assets/scss/main.scss b/app/assets/scss/main.scss
index fe420f1..12cc1e6 100644
--- a/app/assets/scss/main.scss
+++ b/app/assets/scss/main.scss
@@ -16,4 +16,3 @@
 
 @use 'component/_header_layout';
 @use 'component/header_nav';
-@use 'component/orbites';
\ No newline at end of file
diff --git a/app/components/Chiffres.vue b/app/components/Chiffres.vue
new file mode 100644
index 0000000..53763f0
--- /dev/null
+++ b/app/components/Chiffres.vue
@@ -0,0 +1,104 @@
+<template>
+  <section class="chiffres_cont">
+      <DsHeading as="h1" tone="default" textcase="uppercase">
+        DES CHIFRES PARTOUT EN ÎLE-DE-FRANCE EN 2025
+      </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>
+      </div>
+  </section>
+</template>
+
+<script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+</script>
+
+<style lang="scss">
+
+  .chiffres_cont {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+        @media (max-width: 599px) {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+      font-family: var(--font-roboto);
+
+      margin-top: 30px;
+      margin-bottom: 50px;
+
+      .chiffres_list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        row-gap: 50px;
+        column-gap: 50px;
+        margin-top: 60px;
+
+        .chiffres_item {
+          max-width: 180px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          row-gap: 15px;
+          text-align: center;
+
+          .chiffres_nombre {
+            color: var(--c-brand_rouge);
+            font-weight: var(--fw-extrabold);
+            font-size: 50px;
+            @media (max-width: 899px) {
+              font-size: 45px;
+            }
+            @media (max-width: 599px) {
+              font-size: 40px;
+            }
+
+          }
+          .chiffres_descriptioin {
+            font-weight: var(--fw-regular);
+            font-size: 25px;
+            @media (max-width: 899px) {
+              font-size: 23px;
+            }
+            @media (max-width: 599px) {
+              font-size: 21px;
+            }
+          }
+        }
+      }
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/app/components/header/HeaderNav.vue b/app/components/header/HeaderNav.vue
index 81a394a..9e030b0 100644
--- a/app/components/header/HeaderNav.vue
+++ b/app/components/header/HeaderNav.vue
@@ -30,7 +30,9 @@
       </div>
 
       <nav class="header_nav_cont" aria-label="Primary navigation">
-        <!-- Desktop nav -->
+        <!-- ================ -->
+        <!-- 🖥️ Desktop nav -->
+        <!-- ================ -->
         <ul class="header_nav header_nav--desktop">
           <li class="header_nav_item" :class="{ 'is-active': isOrchestre }">
             L'Orchestre
@@ -59,17 +61,18 @@
           <li class="header_nav_item" :class="{ 'is-active': isMediation }">
             Action culturelle
             <ul class="header_nav_sub_menu">
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Ateliers 0-3 ans</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Champ social</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Insertion professionnelle</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Pratiques amateurs</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/chantons">Chantons avec l'Orchestre</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
             </ul>
           </li>
 
-          <li class="header_nav_item" :class="{ 'is-active': isMecenat }">
-            Mécénat
+          <li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
+            Nous soutenir
             <ul class="header_nav_sub_menu decalage_gauche">
               <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>
@@ -105,8 +108,9 @@
           </li>
 
         </ul>
-
+        <!-- ================ -->
         <!-- Mobile nav -->
+        <!-- ================ -->
          <div class="header_nav--mobile">
           <button
             class="header_burger"
@@ -121,8 +125,9 @@
             <BurgerIcon :burger-color="burgerColor" />
           </button>
          </div>
-
+        <!-- ================ -->
         <!-- Mobile icons -->
+        <!-- ================ -->
         <div class="header_nav header_nav--mobile-icons">
           <div class="header_nav_item">
             <NuxtLink to="/concerts/agenda">
@@ -148,8 +153,9 @@
             </NuxtLink>
           </div>
         </div>
-
-        <!-- Mobile drawer -->
+        <!-- ================ -->
+        <!-- 📱 Mobile drawer -->
+        <!-- ================ -->
         <div
           id="mobile-menu"
           class="header_drawer"
@@ -195,21 +201,22 @@
             >
               Action culturelle
               <ul class="header_drawer_sub_menu">
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Ateliers 0-3 ans</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Champ social</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Insertion professionnelle</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Pratiques amateurs</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/chantons">Chantons avec l'Orchestre</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
               </ul>
             </li>
 
             <li
-              class="header_drawer_link"
+              class="header_drawer_link nav_focus_invert"
               :class="{ 'is-open': activeDrawer === 'mecenat' }"
               @click="toggleDrawer('mecenat')"
             >
-              Mécénat
+              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/entreprises">Entreprises</NuxtLink></li>
diff --git a/app/components/header/HeaderWrapper.vue b/app/components/header/HeaderWrapper.vue
index 97213c7..a431380 100644
--- a/app/components/header/HeaderWrapper.vue
+++ b/app/components/header/HeaderWrapper.vue
@@ -6,14 +6,6 @@
 
 <template>
   <header>
-    <div class="bg-orbs" aria-hidden="true">
-      <!-- <span class="orb orb--1" /> -->
-      <!-- <span class="orb orb--2" /> -->
-      <!-- <span class="orb orb--3" /> -->
-      <!-- <span class="orb orb--4" /> -->
-      <!-- <span class="orb orb--5" /> -->
-      <!-- <span class="orb orb--6" /> -->
-    </div>
     <div class="header_layout"  :class="`header--${theme}`">
       <slot />
     </div>
diff --git a/app/components/section/Decalage.vue b/app/components/section/Decalage.vue
index 2a2f034..9faff41 100644
--- a/app/components/section/Decalage.vue
+++ b/app/components/section/Decalage.vue
@@ -19,7 +19,7 @@
                     <slot name="button" />
                 </div>
                 <div v-if="ensavoirplusTarget" class="decalage_button">
-                    <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
+                    <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
                 </div>
             </div>
         </div>
@@ -27,42 +27,52 @@
 </template>
 
 <script setup>
-import DsHeading from '@root/design-system/primitives/DsHeading.vue'
-import DsText from '@root/design-system/primitives/DsText.vue'
-import DsButton from '@root/design-system/primitives/DsButton.vue'
-  
+    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+    import DsText from '@root/design-system/primitives/DsText.vue'
+    import DsButton from '@root/design-system/primitives/DsButton.vue'
     defineProps({
         tone: { type: String, default: 'default' },
         titleTone: { type: String, default: 'default' },
         buttonTone: { type: String, default: 'default' },
         position: { type: String, default: 'left' },
-        ensavoirplusTarget: { type: String, default: '' }
+        ensavoirplusTarget: { type: String, default: '' },
+        ensavoirplusGroup: { type: String, default: '' }
     })
-    
-    function toggleTarget(ensavoirplusTarget) {
-        document.getElementById(ensavoirplusTarget).classList.toggle("decalage_ensavoirplus--hidden");
+    function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
+        const target = document.getElementById(ensavoirplusTarget)
+        if (!target) return
+
+        const isHidden = target.classList.contains('decalage_ensavoirplus--hidden')
+
+        if (ensavoirplusGroup) {
+            document
+                .querySelectorAll(`[data-ensavoirplus-group="${ensavoirplusGroup}"]`)
+                .forEach((element) => {
+                    if (element.id !== ensavoirplusTarget) {
+                        element.classList.add('decalage_ensavoirplus--hidden')
+                    }
+                })
+        }
+
+        target.classList.toggle('decalage_ensavoirplus--hidden', !isHidden)
     }
 </script>
 
 <style lang="scss">
-    
     .decalage_cont {
         margin-bottom: 70px;
         display: flex;
-        
         &--left {
             justify-content: flex-start;
         }
-        
         &--right {
             justify-content: flex-end;
-        }       
-        
+        }
     }
 
     .decalage {
         padding-top: 50px;
-        padding-bottom: 50px;
+        padding-bottom: 40px;
         display: flex;
         
         @media (min-width: 0px) and (max-width: 700px) {
@@ -74,17 +84,16 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
         @media (min-width: 800px) {
           width: 60vw;
         }
-        
+
         /* tons = arrière-plan section */
         &--default { background: transparent; }
         &--brand   { background: var(--c-brand_rouge);}
         &--dark    { background: var(--c-backgroud-black); }
         &--brandreverse    { background: var(--c-backgroud-brandreverse); }
         &--jaune { background: var(--c-background-jaune); }
-        
+
         /* position = arrière-plan section */
         &--right {
-            
             .decalage_inner {
                 padding-right: 20px;
                 padding-left: 50px;
@@ -94,8 +103,11 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
                     padding-left: 40px;
                 }
             }
+            .decalage_button {
+                text-align: left;
+            }
         }
-        
+
         &--left {
             justify-content: flex-end;
            
@@ -108,13 +120,23 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
                     padding-left: 15px;
                   }
             }
+            h2 {
+                text-align: right;
+            }
+            .decalage_button {
+                text-align: right;
+            }
             
         }
-
+        .decalage_button {
+            margin-top: 32px;
+        }
     }
-    
+
     .decalage_inner {
-        
+        h2 {
+            padding-bottom: 5px;
+        }
         @media (min-width: 0px) {
             width: 100%;                
         }
@@ -149,12 +171,7 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
             width: 600px;
         }
     }
-    
-    .decalage_button {
-        margin-top: 10px;
-        text-align: right;
-    }
-    
+
     .decalage_ensavoirplus--hidden {
         display: none;
     }
diff --git a/app/components/section/PageSection.vue b/app/components/section/PageSection.vue
index e1c2dae..5c3bb80 100644
--- a/app/components/section/PageSection.vue
+++ b/app/components/section/PageSection.vue
@@ -28,7 +28,7 @@
 
 <script setup>
     const props = defineProps({
-        tone: { type: String, default: 'default' },        // default / brand / muted / dark…
+        tone: { type: String, default: 'default' },        // Background 
         padded_size: { type: String, default: '' }, // none | sm | md | lg
         contentSize: { type: String, default: 'default'}, // narrow/default/wide
         content: { type: Boolean, default: true },       // contenu contraint ou full
diff --git a/app/components/test.vue b/app/components/test.vue
index c255f26..e41e417 100644
--- a/app/components/test.vue
+++ b/app/components/test.vue
@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/components/testcomponentpage.vue b/app/components/testcomponentpage.vue
index dc8e32e..235e2f0 100644
--- a/app/components/testcomponentpage.vue
+++ b/app/components/testcomponentpage.vue
@@ -10,6 +10,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/concerts/live.vue b/app/pages/concerts/live.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/concerts/live.vue
+++ b/app/pages/concerts/live.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/concerts/mag.vue b/app/pages/concerts/mag.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/concerts/mag.vue
+++ b/app/pages/concerts/mag.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/concerts/mode-emploi.vue b/app/pages/concerts/mode-emploi.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/concerts/mode-emploi.vue
+++ b/app/pages/concerts/mode-emploi.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/index copie 2.vue b/app/pages/index copie 2.vue
new file mode 100644
index 0000000..0a6f99b
--- /dev/null
+++ b/app/pages/index copie 2.vue	
@@ -0,0 +1,510 @@
+<template>
+  <div>
+
+    <!-- ================== -->
+    <!-- PROCHAIN CONCERTS -->
+     <!-- ================== -->
+
+    <!-- Fond noir -->
+    <PageSection tone="dark" content-size="default">
+      <SectionTitle tone="invert" pad="md">
+        CONCERTS À VENIR …
+      </SectionTitle>
+    </PageSection>
+
+    <!-- Listes des prochains conncerts -->
+    <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
+      <ConcertCardList>
+        <ConcertCard
+          v-for="c in concerts"
+          :key="c.id"
+          :id="c.slug_concert"
+          :title="c.titre_concert"
+          :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
+          :dateISO="c.representation_concert?.[0]?.date_debut_representation"
+          :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
+          :description="c.resume_concert"
+          :imageUrl="c.image_illustration_concert?.url"
+          :imageAlt="c.image_illustration_concert?.alternativeText"
+          :href="`/concerts/concert-${c.slug_concert}?from=agenda`"
+        />
+      </ConcertCardList>
+    </PageSection>
+
+
+    <PageSection tone="dark" padded_size="md" content-size="default" padb="xs" class="theme_tao photo_orchestre_wp remonter_bloc_dessous">
+      <SectionContent>
+          <SectionTitle tone="invert" pad="xs">
+            L’ORCHESTRE NATIONAL D'ÎLE-DE-FRANCE
+          </SectionTitle>
+          
+          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="photo_orchestre_img"/>
+
+      </SectionContent>
+
+      <SectionContent pad="xs" class="photo_orchestre_cta">
+        <DsButtonArrow to="/" variant="invert">
+            Découvrir les musiciens
+        </DsButtonArrow>
+      </SectionContent>
+
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- PARTOUT ET POUR TOUS -->
+    <!-- ================== -->
+    <PageSection padded_size="md" class="theme_ppt_wp">
+      <SectionContent class="theme_ppt">
+        <!-- PHOTO DE L'ORCHETSRE -->
+        <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/>
+        <!-- PHOTO DE LA CARTE IDF -->
+        <!-- <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/> -->
+        <!-- Avec couleur rouge par dessus -->
+        <!-- <SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content"> -->
+        <!-- Sans couleur rouge par dessus -->
+        <SectionContent tone="" pad="" class="theme_ppt--content">
+          <SectionTitle tone="invert" pad="xs">
+            PARTOUT ET POUR TOUS
+          </SectionTitle>
+          <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.
+            </DsText>
+            <!-- UN CTA / LIEN SUR L'IMAGE -->
+            <DsButtonArrow to="/" variant="invert">
+                Carte des événements
+            </DsButtonArrow>
+          </SectionContent>
+        </SectionContent>
+      </SectionContent>
+    </PageSection>
+
+    <!-- CARTES PARTOUT ET POUR TOUS -->
+    <PageSection padded_size="md" class="theme_ppt_wp">
+      <SectionContent class="theme_ppt">
+      <SquareCardBlocTextList >
+
+      </SquareCardBlocTextList>
+      </SectionContent>
+    </PageSection>
+    
+    <!-- ================== -->
+    <!-- Tous à l'Orchestre -->
+    <!-- ================== -->
+    <PageSection tone="brandreverse" padded_size="md" content-size="default" padb="xs" class="theme_tao">
+      <SectionContent>
+          <SectionTitle tone="invert" pad="xs">
+            TOUS À L’ORCHESTRE
+          </SectionTitle>
+          <SectionContent pad="xs" class="theme_tao--description">
+            <DsText tone="invert" size="lg" class="theme_tao--txt" >
+              Phrase d’accroche / explicative de cette rubrique par tous et pour tous
+            </DsText>
+          </SectionContent>
+      </SectionContent>
+
+      <!-- LES CARTES -->
+      <FilteredCards />
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- ACTUALITÉS -->
+    <!-- ================== -->
+    <PageSection padded_size="md">
+      <SectionContent>
+          <SectionTitle tone="" pad="xs">
+            ACTUALITÉS
+          </SectionTitle>
+      </SectionContent>
+      <SquareCardBlocTextList >
+        <SquareCardBlocText
+          v-for="actuscard in actuscards"
+          :key="actuscard.id"
+          :id="actuscard.id"
+          :imgSrc="actuscard.imgSrc"
+          :imgAlt="actuscard.imgAlt"
+          :title="actuscard.title"
+          :description="actuscard.description"
+          :url="actuscard.url"
+        ></SquareCardBlocText>
+      </SquareCardBlocTextList>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- ONDIF MAG -->
+    <!-- ================== -->
+    <PageSection padded_size="md" position="relative" overflow="hidden" class="theme_mag">
+      <div class="decoration--mag"><img src="/img/decoration/ellipse_mag.svg" alt=""></div>
+      <SectionContent>
+          <SectionTitle tone="" pad="xs">
+            ONDIF MAG
+          </SectionTitle>
+          <SectionContent pad="xs" class="theme_tao--description">
+            <DsText tone="" size="lg" class="theme_tao--txt" >
+              Le magazine en ligne de l’Orchestre national d’Île-de-France vous invite à découvrir l’actualité des concerts de l’orchestre, des interprètes, des chefs et cheffes, de la création contemporaine et des projets de l’ONDIF sur le territoire francilien et au-delà. Portraits de musiciens, de compositeurs, d’artistes invités, décryptages d’œuvres, partez à la découverte de l’actualité musicale !
+            </DsText>
+          </SectionContent>
+      </SectionContent>
+
+      <SectionContent pad="xs">
+        <TextCardLeftList >
+          <TextCardLeft
+            v-for="magcard in magcards"
+            :key="magcard.id"
+            :id="magcard.id"
+            :title="magcard.title"
+            :description="magcard.description"
+            :url="magcard.url"
+          ></TextCardLeft>
+        </TextCardLeftList>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- L'ORCHESTRE POUR LES PROS -->
+    <!-- ================== -->
+    <PageSection padded_size="lg">
+      <SectionContent>
+          <SectionTitle tone="" pad="xs">
+            L'ORCHESTRE POUR LES PROS
+          </SectionTitle>
+      </SectionContent>
+
+      <SectionContent>
+        <BannierePros />
+      </SectionContent>
+    </PageSection>
+  </div>
+
+</template>
+
+<script setup>
+  import { onMounted, computed } from 'vue'
+  const runtimeConfig = useRuntimeConfig()
+  const config = useAppConfig()
+  import { clientLog } from '~/utils/clientLog'
+  import { formatDateLong } from "@/utils/dateFormat.js"
+  import SectionContent from '../components/section/SectionContent.vue'
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import DsButton from '@root/design-system/primitives/DsButton.vue'
+  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
+  import orchestre_img from '@/assets/img/illustrations/orchestre_1.jpg'
+  import ppt_img from '@/assets/img/illustrations/map_idf.jpg'
+  import DsCard from '@root/design-system/components/DsCard.vue'
+
+  // Layout utilisé
+  definePageMeta({ layout: 'default' })
+
+  const STRAPI_URL = runtimeConfig.public.strapiUrl
+  
+  // Config app (pour SEO)
+
+  useSeoMeta({
+    title: config.title
+  })
+
+
+  console.log("Bienvenue : ",config.title)
+
+
+  //--------------------
+  // DONNÉES POUR LES CONCERTS À VENIR …
+  //--------------------
+  const { concerts, refresh } = useConcerts({
+      locale: "fr-FR",
+      populate: {
+          saison_concert: true,
+          image_illustration_concert: true,
+          representation_concert: { lieu_representation: true },
+      },
+      filters: {
+          saison_concert: {
+            nom_saison: {
+                $eq: String(runtimeConfig.public.saison),
+            },
+          },
+      },
+      upcomingOnly: true,
+      limit: 3,
+  })
+
+  onMounted(() => {
+      if (!concerts.value?.length) {
+          refresh()
+      }
+  })
+
+  //--------------------
+  // DONNÉES POUR LES ACTUS
+  //--------------------
+  const actuscards = ref([
+        {
+          id: '1',
+          imgSrc: '/contenus/actu1_1.jpg',
+          imgAlt: 'Les prochains concours',
+          title: "Les prochains concours",
+          description: `Inscrivez-vous aux auditions de l'Orchestre national d'Île-de-France.
+          Un nombre maximum de caractère sera défini pour le texte qui figure dans la description de l’actu sur la page d’accueil.`,
+          url:"#",
+        },
+        {
+          id: '2',
+          imgSrc: '/contenus/actu1_1.jpg',
+          imgAlt: 'Du sur-mesure pour les petites oreilles',
+          title: "Du sur-mesure pour les petites oreilles",
+          description: `Les ateliers 0-3 ans sont de retour !`,
+          url:"#",
+        },
+        {
+          id: '3',
+          imgSrc: '/contenus/actu1_1.jpg',
+          imgAlt: "Académie d'Orchestre 2026",
+          title: "Académie d'Orchestre 2026",
+          description: `Les ateliers 0-3 ans sont de retour !`,
+          url:"#",
+        },
+        {
+          id: '4',
+          imgSrc: '/contenus/actu1_1.jpg',
+          imgAlt: "Pablo González, nouveau directeur musical pour la saison 27.28",
+          title: "Pablo González, nouveau directeur musical pour la saison 27.28",
+          description: ``,
+          url:"#",
+        },
+  ])
+
+  //--------------------
+  // DONNÉES POUR ONDIF MAG
+  //--------------------
+  const magcards = ref([
+        {
+          id: '1',
+          title: "LA FANTASTIQUE DE BERLIOZ",
+          description: `L’auteur suppose qu’un jeune musicien, affecté de cette maladie morale qu’un écrivain célèbre appelle le vague des passions, voit pour la première fois une femme qui réunit tous les charmes de l’être idéal que rêvait son imagination...`,
+          url:"#",
+        },
+        {
+          id: '2',
+          title: "L’ITALIE BAROQUE, BERCEAU DU CONCERTO",
+          description: `C’est dans l’Italie baroque du début du XVIIe siècle que naît le Stile Concertato (style concertant), et plus précisément à Venise, autour des grands maîtres qui ont œuvré à la basilique Saint-Marc, comme les Gabrieli.`,
+          url:"#",
+        },
+        {
+          id: '3',
+          title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-D’OEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE",
+          description: `Avant la première exécution publique de l’œuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait d’abord été créée dans le palais du prince Lobkowitz en mars 1807.`,
+          url:"#",
+        },
+  ])
+
+</script>
+
+<style lang="scss">
+  .remonter_concert_list {
+    transform: translateY(-170px);
+  }
+  .remonter_bloc_dessous {
+    // parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
+    margin-top: -170px;
+  }
+
+  .photo_orchestre_wp {
+    
+    .photo_orchestre_img {
+      .page-section--inner--default {
+        max-width: calc(+500px)
+      }
+      img {
+        border-radius: 50px;
+        max-height: 660px;
+      }
+    }
+    .photo_orchestre_cta {
+      padding-top: 20px;
+    }
+  }
+
+
+  //========================
+  // PARTOUT ET POUR TOUS
+  //========================
+
+  .theme_ppt_wp {
+    margin-bottom: 50px;
+    
+  }
+  .theme_ppt {
+    display: grid;
+
+    &--img {
+      grid-row: 1;
+      grid-column: 1;
+      max-height: 400px;
+    }
+    &--content {
+      grid-row: 1;
+      grid-column: 1;
+      display: grid;
+      align-items: center;
+
+    }
+    &--description {
+      max-width: 800px;
+      align-self: self-start;
+      // margin-top: 35px;
+    }
+    &--txt {
+      margin-bottom: 35px;
+    }
+  }
+
+  //========================
+  // TOUS A L'ORCHESTRE
+  //========================
+  .theme_tao {
+    margin-bottom: 50px;
+
+    &--description {
+      max-width: 800px;
+
+    }
+    &--txt {
+      margin-bottom: 35px;
+    }
+    &--filters {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 10px;
+      row-gap: 14px;
+
+    }
+    &--cardlist {
+      margin-top: 20px;
+      
+      &--card {
+        background-color: var(--c-surface);
+        border-radius: 10px;
+        //padding: 50px;
+        padding: clamp(18px, 2.4vw, 32px);
+        
+        &--wp {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        &--img {
+          max-width: 280px;
+          overflow: hidden;
+          img {
+            max-height: 280px;
+          }
+          @media (min-width: 400px) {
+            img {
+              max-height: 350px;
+            }
+          }
+
+        }
+        &--content {
+          max-width: 320px;
+          padding-top: 20px;
+        }
+      }
+
+
+      &--card {
+        /* base: mobile-first */
+        width: clamp(260px, 81vw, 360px);
+      }
+      @media (min-width: 400px) {
+        &--card {
+          width: clamp(260px, 80vw, 360px);
+        }
+      }
+      @media (min-width: 500px) {
+        &--card {
+          width: clamp(280px, 63vw, 460px);
+        }
+      }
+      @media (min-width: 700px) {
+        &--card {
+          width: clamp(280px, 60vw, 460px);
+        }
+      }
+      @media (min-width: 1024px) {
+        &--card {
+          width: clamp(320px, 33vw, 520px);
+        }
+      }
+      @media (min-width: 1440px) {
+        &--card {
+          width: clamp(360px, 28vw, 560px);
+        }
+      }
+    }
+
+  }
+
+  //========================
+  // MAGAZINE
+  //========================
+  .theme_mag {
+
+    
+    @media (max-width: 499px) {
+      min-height: 650px;
+    }
+    @media (min-width: 500px) {
+      min-height: 650px;
+    }
+    @media (min-width: 700px) {
+      min-height: 650px;
+    }
+    @media (min-width: 900px) {
+      min-height: 650px;
+    }
+    @media (min-width: 1100px) {
+      min-height: 650px;
+    }
+    @media (min-width: 1300px) {
+      min-height: 650px;
+    }
+    @media (min-width: 1500px) {
+      min-height: 650px;
+    }
+
+    .decoration--mag {
+      position: absolute;
+      top: -20px;
+      
+      @media (max-width: 499px) {
+        right: -150px;
+      }
+      @media (min-width: 500px) {
+        right: -120px;
+      }
+      @media (min-width: 700px) {
+        right: -100px;
+      }
+      @media (min-width: 900px) {
+        right: -100px;
+      }
+      @media (min-width: 1100px) {
+        right: -140px;
+      }
+      @media (min-width: 1300px) {
+        right: -100px;
+      }
+      @media (min-width: 1500px) {
+        right: -50px;
+      }
+      img {
+        height: 600px;
+      }
+    }
+  }
+
+
+</style>
diff --git a/app/pages/index copie.vue b/app/pages/index copie.vue
index 4077e49..0f93607 100644
--- a/app/pages/index copie.vue	
+++ b/app/pages/index copie.vue	
@@ -78,7 +78,7 @@
   console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
 </script>
 
-<style>
+<style lang="scss">
 
 
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e14efa3..e50183b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -32,39 +32,23 @@
     </PageSection>
 
 
-    <PageSection tone="dark" padded_size="md" content-size="default" padb="xs" class="theme_tao photo_orchestre_wp remonter_bloc_dessous">
-      <SectionContent>
-          <SectionTitle tone="invert" pad="xs">
-            L’ORCHESTRE NATIONAL D'ÎLE-DE-FRANCE
-          </SectionTitle>
-          
-          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="photo_orchestre_img"/>
 
-      </SectionContent>
-
-      <SectionContent pad="xs" class="photo_orchestre_cta">
-        <DsButtonArrow to="/" variant="invert">
-            Découvrir les musiciens
-        </DsButtonArrow>
-      </SectionContent>
-
-    </PageSection>
 
     <!-- ================== -->
     <!-- PARTOUT ET POUR TOUS -->
     <!-- ================== -->
-    <PageSection padded_size="md" class="theme_ppt_wp">
+    <PageSection padded_size="md" class="theme_ppt_wp remonter_bloc_dessous">
       <SectionContent class="theme_ppt">
         <!-- PHOTO DE L'ORCHETSRE -->
-        <!-- <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/> -->
+          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/>
         <!-- PHOTO DE LA CARTE IDF -->
-        <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/>
+        <!-- <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/> -->
         <!-- Avec couleur rouge par dessus -->
-        <SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content">
+        <!-- <SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content"> -->
         <!-- Sans couleur rouge par dessus -->
-        <!-- <SectionContent tone="" pad="" class="theme_ppt--content"> -->
+        <SectionContent tone="" pad="" class="theme_ppt--content">
           <SectionTitle tone="invert" pad="xs">
-            PARTOUT ET POUR TOUS
+            LA MUSIQUE PARTOUT ET POUR TOUS
           </SectionTitle>
           <SectionContent pad="xs" class="theme_ppt--description">
             <DsText tone="invert" size="lg" class="theme_ppt--txt" >
@@ -342,10 +326,18 @@
       grid-row: 1;
       grid-column: 1;
       max-height: 400px;
+      position: relative;
+      z-index: 1;
+
+      img {
+        filter: brightness(0.7);
+      }
     }
     &--content {
       grid-row: 1;
       grid-column: 1;
+      position: relative;
+      z-index: 2;
       display: grid;
       align-items: center;
 
diff --git a/app/pages/mecenat/entreprises.vue b/app/pages/mecenat/entreprises.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mecenat/entreprises.vue
+++ b/app/pages/mecenat/entreprises.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mecenat/mecenes.vue b/app/pages/mecenat/mecenes.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mecenat/mecenes.vue
+++ b/app/pages/mecenat/mecenes.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mecenat/particuliers.vue b/app/pages/mecenat/particuliers.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mecenat/particuliers.vue
+++ b/app/pages/mecenat/particuliers.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mecenat/projets.vue b/app/pages/mecenat/projets.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mecenat/projets.vue
+++ b/app/pages/mecenat/projets.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mecenat/soutenir.vue b/app/pages/mecenat/soutenir.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mecenat/soutenir.vue
+++ b/app/pages/mecenat/soutenir.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mediation/amateurs.vue b/app/pages/mediation/amateurs.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mediation/amateurs.vue
+++ b/app/pages/mediation/amateurs.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mediation/chantons.vue b/app/pages/mediation/chantons.vue
new file mode 100644
index 0000000..7282741
--- /dev/null
+++ b/app/pages/mediation/chantons.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Chantons avec l'Orchestre : En cours de construction
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/app/pages/mediation/insertion-pro.vue b/app/pages/mediation/insertion-pro.vue
index b9b4da4..dd7c2d1 100644
--- a/app/pages/mediation/insertion-pro.vue
+++ b/app/pages/mediation/insertion-pro.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    
+    Partenariat Grandes Écoles : En cours de construction
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mediation/petite-enfance.vue b/app/pages/mediation/petite-enfance.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mediation/petite-enfance.vue
+++ b/app/pages/mediation/petite-enfance.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mediation/ressources-pedagogiques.vue b/app/pages/mediation/ressources-pedagogiques.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mediation/ressources-pedagogiques.vue
+++ b/app/pages/mediation/ressources-pedagogiques.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/mediation/scolaires.vue b/app/pages/mediation/scolaires.vue
index b9b4da4..b28f830 100644
--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -1,13 +1,144 @@
 <template>
-  <div>
-    
+  <div class="scolaire--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_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">
+                ACTIONS CULTURELLES POUR LES SCOLAIRES
+              </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. 
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="missions?.image_illustration_header?.url"
+              :src="missions.image_illustration_header.url"
+              :alt="missions.image_illustration_header.alternativeText || ''"
+              fit="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 />
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- decalage_gauche 1 -->
+      <!-- ================== -->
+      <PageSection :content="false">
+        <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache" ensavoirplus-group="scolaires-details">
+            <template #title>
+                Lycées - Tous à l'Orchestre !
+            </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.
+            </DsText>
+          </Decalage>
+      </PageSection>
+
+      <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>
 
-<script lang="ts" setup>
-
+<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'
 </script>
 
-<style>
+<style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .scolaire--page {
+    .chiffres_wp {
+      background-color: var(--c-background-jaune);
+      margin-bottom: 50px;
+    }
+  }
 
-</style>
\ No newline at end of file
+
+</style>
diff --git a/app/pages/mediation/social.vue b/app/pages/mediation/social.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/mediation/social.vue
+++ b/app/pages/mediation/social.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/orchestre/artiste-[id].vue b/app/pages/orchestre/artiste-[id].vue
index d3b3236..9a87768 100644
--- a/app/pages/orchestre/artiste-[id].vue
+++ b/app/pages/orchestre/artiste-[id].vue
@@ -653,7 +653,7 @@
     padding-left: 10px;
     padding-right: 10px;
     > * {
-      max-width: 570px;
+      max-width: 640px;
       display: flex;
       flex-direction: column;
     }
diff --git a/app/pages/orchestre/artisteinvitee-[id].vue b/app/pages/orchestre/artisteinvitee-[id].vue
index 8937403..266ea52 100644
--- a/app/pages/orchestre/artisteinvitee-[id].vue
+++ b/app/pages/orchestre/artisteinvitee-[id].vue
@@ -651,7 +651,7 @@
     padding-left: 10px;
     padding-right: 10px;
     > * {
-      max-width: 570px;
+      max-width: 640px;
       display: flex;
       flex-direction: column;
     }
diff --git a/app/pages/orchestre/artistesinvitees.vue b/app/pages/orchestre/artistesinvitees.vue
index c7df873..dc0b787 100644
--- a/app/pages/orchestre/artistesinvitees.vue
+++ b/app/pages/orchestre/artistesinvitees.vue
@@ -9,7 +9,6 @@
           LES ARTISTES INVITÉS
         </SectionTitle>
         <DsHeading as="h3" tone="invert">
-          La patte de l’Orchestre national d’Île-de-France, c’est aussi la richesse de ses collaborations artistiques
         </DsHeading>
       </SectionContent>
 
@@ -237,16 +236,16 @@
   .theme_bandeau--grid {
     > .page-section--inner {
       padding-top: 70px;
-      padding-bottom: 150px;
+      padding-bottom: 90px;
       display: flex;
       flex-wrap: wrap;
       column-gap: 120px;
-      row-gap: 30px;
+      row-gap: 0px;
     }
     &--left {
       max-width: 40%;
       h1 {
-        padding-bottom: 20px;
+        padding-bottom: 0px;
       }
     }
     &--right {
diff --git a/app/pages/orchestre/direction.vue b/app/pages/orchestre/direction.vue
index 2db8d5c..8accc8f 100644
--- a/app/pages/orchestre/direction.vue
+++ b/app/pages/orchestre/direction.vue
@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/orchestre/discographie.vue b/app/pages/orchestre/discographie.vue
index dc90619..598c04c 100644
--- a/app/pages/orchestre/discographie.vue
+++ b/app/pages/orchestre/discographie.vue
@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/orchestre/missions.vue b/app/pages/orchestre/missions.vue
index ec12e36..60cdafc 100644
--- a/app/pages/orchestre/missions.vue
+++ b/app/pages/orchestre/missions.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="missions--page">
         <!-- ================== -->
         <!-- FILS D'ARIANE -->
         <!-- ================== -->
@@ -30,7 +30,7 @@
                 v-if="missions?.image_illustration_header?.url"
                 :src="missions.image_illustration_header.url"
                 :alt="missions.image_illustration_header.alternativeText || ''"
-                fit="contain"
+                fit="cover"
                 ratio="square"
               />
 
@@ -51,6 +51,15 @@
           </SectionContent>
         </PageSection>
 
+        <!-- ================== -->
+        <!-- CHIFFRES -->
+        <!-- ================== -->
+        <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
+            <Chiffres />
+        </PageSection>
+
+
+
         <!-- ================== -->
         <!-- decalage_gauche 1 -->
         <!-- ================== -->
@@ -229,7 +238,6 @@
     }
   }
   .fiche_header_wp_gauche_carre {
-    
     @media (min-width: 0px) and (max-width: 600px) {
       display: none;
     }
@@ -239,7 +247,6 @@
     }
   }
   .fiche_header_wp_droite {
-
     @media (min-width: 0px) and (max-width: 600px) {
       display: none;
     }
@@ -331,7 +338,6 @@
   }
 
   .fiche_header_titres {
-    
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1;
       grid-row: 1;
@@ -395,7 +401,6 @@
   }
 
   .fiche_header_img {
-    
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1 / 4;
       grid-row: 2 / 3;
@@ -415,7 +420,6 @@
   }
 
   .fiche_header_infos {
-
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1 / 2;
       grid-row: 4;
@@ -443,7 +447,6 @@
     }
   }
   .fiche_header_bandeau {
-
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1 / 3;
       grid-row: 4;
@@ -457,18 +460,27 @@
   }
 
   .fiche_description > * {
-    max-width: 570px;
+    max-width: 640px;
     display: flex;
     flex-direction: column;
   }
   .fiche_description {
     .page-section--inner {
-
       @media (max-width: 599px) {
-          padding-left: 10px;
-          padding-right: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
       }
     }
   }
 
+// =======================
+// SPÉCIFIQUE À CETTE PAGE
+// =======================
+.missions--page {
+  .chiffres_wp {
+    background-color: #31ae13c2;
+    margin-bottom: 50px;
+  }
+}
+
 </style>
diff --git a/app/pages/orchestre/musiciens copie hierarchisé.vue b/app/pages/orchestre/musiciens copie hierarchisé.vue
new file mode 100644
index 0000000..c03d844
--- /dev/null
+++ b/app/pages/orchestre/musiciens copie hierarchisé.vue	
@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <!-- ================== -->
+    <!-- Fond noir -->
+    <!-- ================== -->
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
+      <SectionContent pad="xs" class="theme_bandeau--grid--left">
+        <SectionTitle tone="invert" pad="">
+          LES MUSICIENS
+        </SectionTitle>
+        <DsHeading as="h3" tone="invert">
+          
+        </DsHeading>
+      </SectionContent>
+
+
+      <SectionContent pad="xs" class="theme_bandeau--grid--right">
+        <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
+          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.
+        </DsText>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- Listes des musiciens -->
+    <!-- ================== -->
+
+    <!-- ================== -->
+    <!-- DIRECTION -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section remonter_artistes_list">
+
+
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des artistes...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
+      </section>
+
+      <section v-else-if="artistesDirection.length" class="musiciens_list">
+        <article v-for="a in artistesDirection" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
+            ratio="square"
+          />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
+
+          <DsHeading as="h4" tone="default" class="musicien_card_nom">
+            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
+              {{ a.nom_artiste_ondif }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun artiste pour la direction.</DsText>
+      </section>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- MUSICIENS -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section musiciens_list_wp">
+
+
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des artistes...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
+      </section>
+
+      <section v-else-if="artistesAutres.length" class="musiciens_list">
+        <article v-for="a in artistesAutres" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
+            ratio="square"
+          />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
+
+          <DsHeading as="h4" tone="default" class="musicien_card_nom">
+            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
+              {{ a.nom_artiste_ondif }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun autre artiste trouvé.</DsText>
+      </section>
+    </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'
+  const runtimeConfig = useRuntimeConfig()
+  const saisonFiltre = computed(() => String(runtimeConfig.public.saison || '').trim())
+  const artistesFilters = computed(() => {
+    if (!saisonFiltre.value) return null
+    return {
+      saisons_artiste_ondif: {
+        nom_saison: {
+          $eq: saisonFiltre.value,
+        },
+      },
+    }
+  })
+
+  //--------------------
+  // DONNÉES POUR LES ARTISTES
+  //--------------------
+  const { items: artistes, pending, error } = useStrapi(
+      "/api/__strapi__/artistes",
+      {
+        locale: "fr-FR",
+        sort: "ordre_artiste_ondif:asc",
+        populate: {
+            saisons_artiste_ondif: true,
+            image_illustration_artiste_ondif: true,
+            postes_artiste_ondif: true,
+        },
+        filters: artistesFilters,
+      }
+  )
+
+  const artistesDisplay = computed(() => {
+    return (artistes.value || []).map((artiste) => ({
+      ...artiste,
+      image: getArtisteImage(artiste),
+      postesLabel: getPostesLabel(artiste),
+    }))
+  })
+
+  const postesDirection = [
+    "direction",
+    "cheffe assistante",
+    "chef assistante",
+  ]
+
+  const artistesDirection = computed(() =>
+    artistesDisplay.value.filter((a) => isDirectionArtist(a))
+  )
+
+  const artistesAutres = computed(() =>
+    artistesDisplay.value.filter((a) => !isDirectionArtist(a))
+  )
+
+  function getArtisteImage(artiste) {
+    const media = artiste?.image_illustration_artiste_ondif
+    const rows = extractStrapiList(media)
+    if (rows.length) return rows[0]
+    if (media && typeof media === "object" && media.url) return media
+    return null
+  }
+
+  function getPostesLabel(artiste) {
+    const postes = extractStrapiList(artiste?.postes_artiste_ondif)
+    return postes
+      .map((p) => p?.nom_poste)
+      .filter(Boolean)
+      .join(", ")
+  }
+
+  function isDirectionArtist(artiste) {
+    const postes = extractStrapiList(artiste?.postes_artiste_ondif)
+      .map((p) => String(p?.nom_poste || "").trim().toLowerCase())
+      .filter(Boolean)
+
+    return postes.some((poste) => postesDirection.includes(poste))
+  }
+
+  function extractStrapiList(value) {
+    if (!value) return []
+    if (Array.isArray(value)) return value.map(normalizeStrapiItem).filter(Boolean)
+    if (value?.data) {
+      const rows = Array.isArray(value.data) ? value.data : [value.data]
+      return rows.map(normalizeStrapiItem).filter(Boolean)
+    }
+    if (typeof value === "object") return [normalizeStrapiItem(value)].filter(Boolean)
+    return []
+  }
+
+  function normalizeStrapiItem(item) {
+    if (!item || typeof item !== "object") return null
+    if (item.attributes && typeof item.attributes === "object") {
+      return { id: item.id, ...item.attributes }
+    }
+    return item
+  }
+
+
+</script>
+
+<style lang="scss">
+
+
+  .remonter_artistes_list {
+    transform: translateY(-90px);
+  }
+
+  .theme_bandeau--grid {
+    > .page-section--inner {
+      padding-top: 70px;
+      padding-bottom: 90px;
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 120px;
+      row-gap: 30px;
+    }
+    &--left {
+      max-width: 40%;
+      h1 {
+        padding-bottom: 20px;
+      }
+    }
+    &--right {
+      max-width: 60%;
+      &--text {
+        max-width: 500px;
+      }
+    }
+  }
+
+  .musiciens_list_wp {
+    // parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
+    margin-top: -120px;
+  }
+  .musiciens_list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 28px;
+  }
+
+  .musicien_card {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .musicien_card_media-placeholder {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .musicien_card_nom {
+    margin-top: 8px;
+    margin-left: 5px;
+    &:hover {
+      color: var(--c-brand_rouge);
+    }
+  }
+  .musicien_card_postes {
+    margin-left: 5px;
+    text-transform: lowercase;
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+
+
+  @media (max-width: 980px) {
+    .musiciens_list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 400px) {
+    .musiciens_list {
+      grid-template-columns: 1fr;
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .musiciens_list {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+
+</style>
diff --git a/app/pages/orchestre/musiciens.vue b/app/pages/orchestre/musiciens.vue
index 9177df1..62c8e21 100644
--- a/app/pages/orchestre/musiciens.vue
+++ b/app/pages/orchestre/musiciens.vue
@@ -3,20 +3,20 @@
     <!-- ================== -->
     <!-- Fond noir -->
     <!-- ================== -->
-    <PageSection tone="bleu" content-size="default" class="theme_bandeau--grid">
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
       <SectionContent pad="xs" class="theme_bandeau--grid--left">
         <SectionTitle tone="invert" pad="">
           LES MUSICIENS
         </SectionTitle>
         <DsHeading as="h3" tone="invert">
-          95 musiciens engagés Partout et pour tous en Île-de-France !
+          
         </DsHeading>
       </SectionContent>
 
 
       <SectionContent pad="xs" class="theme_bandeau--grid--right">
         <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
-          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.
+          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.
         </DsText>
       </SectionContent>
     </PageSection>
@@ -66,6 +66,33 @@
             {{ a.postesLabel }}
           </DsText>
         </article>
+
+        <!-- ICI ON MET À LA SUITE LES MUSICIENS DE L'ORCHESTRE -->
+        <article v-for="a in artistesAutres" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
+            ratio="square"
+          />
+          <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
+
+          <DsHeading as="h4" tone="default" class="musicien_card_nom">
+            <NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
+              {{ a.nom_artiste_ondif }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
       </section>
 
       <section v-else>
@@ -237,16 +264,16 @@
   .theme_bandeau--grid {
     > .page-section--inner {
       padding-top: 70px;
-      padding-bottom: 150px;
+      padding-bottom: 90px;
       display: flex;
       flex-wrap: wrap;
       column-gap: 120px;
-      row-gap: 30px;
+      row-gap: 0px;
     }
     &--left {
       max-width: 40%;
       h1 {
-        padding-bottom: 20px;
+        padding-bottom: 0px;
       }
     }
     &--right {
diff --git a/app/pages/orchestre/partenaires.vue b/app/pages/orchestre/partenaires.vue
index 61fd1c7..ba25ca3 100644
--- a/app/pages/orchestre/partenaires.vue
+++ b/app/pages/orchestre/partenaires.vue
@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/orchestre/soutenir.vue b/app/pages/orchestre/soutenir.vue
index 61fd1c7..ba25ca3 100644
--- a/app/pages/orchestre/soutenir.vue
+++ b/app/pages/orchestre/soutenir.vue
@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/professionnels/candidats.vue b/app/pages/professionnels/candidats.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/professionnels/candidats.vue
+++ b/app/pages/professionnels/candidats.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/professionnels/louer.vue b/app/pages/professionnels/louer.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/professionnels/louer.vue
+++ b/app/pages/professionnels/louer.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/professionnels/presse.vue b/app/pages/professionnels/presse.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/professionnels/presse.vue
+++ b/app/pages/professionnels/presse.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/professionnels/programmer-orchestre.vue b/app/pages/professionnels/programmer-orchestre.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/professionnels/programmer-orchestre.vue
+++ b/app/pages/professionnels/programmer-orchestre.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/professionnels/recrutement.vue b/app/pages/professionnels/recrutement.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/professionnels/recrutement.vue
+++ b/app/pages/professionnels/recrutement.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file
diff --git a/app/pages/professionnels/studio.vue b/app/pages/professionnels/studio.vue
index b9b4da4..ba25ca3 100644
--- a/app/pages/professionnels/studio.vue
+++ b/app/pages/professionnels/studio.vue
@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
\ No newline at end of file