ajout de dev front

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "chatgpt.openOnStartup": true
+}

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

app/assets/scss/base/_img.scss

@@ -20,3 +20,7 @@
   height: 100%;
   background: rgba(0, 0, 0, 0.04);
 }
+
+.img_darkness::after {
+  background: rgba(0, 0, 0, var(--overlay-opacity, 0.4));
+}

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

app/assets/scss/component/_orbites.scss

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

app/assets/scss/main.scss

@@ -16,4 +16,3 @@
 
 @use 'component/_header_layout';
 @use 'component/header_nav';
-@use 'component/orbites';

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>

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/chantons">Chantons avec l'Orchestre</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">Académie d'orchestre</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/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 }">
+          <li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
-            Mécénat
+            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/chantons">Chantons avec l'Orchestre</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">Académie d'orchestre</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/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>

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>

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>
@@ -30,39 +30,49 @@
     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, ensavoirplusGroup) {
+        const target = document.getElementById(ensavoirplusTarget)
+        if (!target) return
 
-    function toggleTarget(ensavoirplusTarget) {
+        const isHidden = target.classList.contains('decalage_ensavoirplus--hidden')
-        document.getElementById(ensavoirplusTarget).classList.toggle("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) {
@@ -84,7 +94,6 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
 
         /* position = arrière-plan section */
         &--right {
-            
             .decalage_inner {
                 padding-right: 20px;
                 padding-left: 50px;
@@ -94,6 +103,9 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
                     padding-left: 40px;
                 }
             }
+            .decalage_button {
+                text-align: left;
+            }
         }
 
         &--left {
@@ -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%;                
         }
@@ -150,11 +172,6 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
         }
     }
 
-    .decalage_button {
-        margin-top: 10px;
-        text-align: right;
-    }
-    
     .decalage_ensavoirplus--hidden {
         display: none;
     }

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

app/components/test.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/components/testcomponentpage.vue

@@ -10,6 +10,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/concerts/live.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/concerts/mag.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/concerts/mode-emploi.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

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>

app/pages/index copie.vue

@@ -78,7 +78,7 @@
   console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
 </script>
 
-<style>
+<style lang="scss">
 
 
 </style>

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;
 

app/pages/mecenat/entreprises.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/mecenat/mecenes.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/mecenat/particuliers.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/mecenat/projets.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/mecenat/soutenir.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/mediation/amateurs.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

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>

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>

app/pages/mediation/petite-enfance.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/mediation/ressources-pedagogiques.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

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>

app/pages/mediation/social.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

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

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

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 {

app/pages/orchestre/direction.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/orchestre/discographie.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

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,13 +460,12 @@
   }
 
   .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;
@@ -471,4 +473,14 @@
     }
   }
 
+// =======================
+// SPÉCIFIQUE À CETTE PAGE
+// =======================
+.missions--page {
+  .chiffres_wp {
+    background-color: #31ae13c2;
+    margin-bottom: 50px;
+  }
+}
+
 </style>

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>

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 {

app/pages/orchestre/partenaires.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/orchestre/soutenir.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/professionnels/candidats.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/professionnels/louer.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/professionnels/presse.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/professionnels/programmer-orchestre.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/professionnels/recrutement.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>

app/pages/professionnels/studio.vue

@@ -4,10 +4,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 
 </script>
 
-<style>
+<style lang="scss">
 
 </style>