From 913ae480ce3497c0593b6d24693d214fd215d15a Mon Sep 17 00:00:00 2001
From: Julie <contact@parisweb.art>
Date: Wed, 8 Apr 2026 02:56:59 +0200
Subject: [PATCH] dev

---
 README.md                                     |   3 +-
 .../scss/component/_header_page_simple.scss   | 296 +++++++++++++++++
 app/assets/scss/main.scss                     |   1 +
 app/components/ContactSpecifique.vue          |  88 ++++++
 app/components/concert/ConcertCard.vue        |   3 +-
 app/components/concert/ConcertCardList.vue    |   5 +-
 app/pages/concerts/agenda.vue                 |   9 +-
 app/pages/concerts/saison.vue                 | 150 ++++++++-
 app/pages/index.vue                           |   8 +-
 app/pages/mediation/scolaires.vue             |  22 +-
 app/pages/orchestre/artistesinvitees.vue      |  11 +-
 app/pages/orchestre/missions.vue              | 297 +-----------------
 design-system/tokens/_colors.scss             |   1 +
 ecosystem.config.cjs                          |   2 +-
 14 files changed, 576 insertions(+), 320 deletions(-)
 create mode 100644 app/assets/scss/component/_header_page_simple.scss
 create mode 100644 app/components/ContactSpecifique.vue

diff --git a/README.md b/README.md
index ec2f637..43c0c3b 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,8 @@ git push origin main
 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)
+si besoin
+    npm ci                      # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
 npm run build               # rebuild Nuxt
 pm2 reload ecosystem.config.cjs --only wondif_vue     # redémarre le process avec les nouvelles variables d'environnement de ecosystem
 
diff --git a/app/assets/scss/component/_header_page_simple.scss b/app/assets/scss/component/_header_page_simple.scss
new file mode 100644
index 0000000..94fc9c0
--- /dev/null
+++ b/app/assets/scss/component/_header_page_simple.scss
@@ -0,0 +1,296 @@
+.fiche_header_simple_wp {
+    display: grid;
+    justify-content: center;
+    padding-bottom: 100px;
+
+
+    @media (min-width: 0px) and (max-width: 600px) {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 510px;
+        padding-top: 40px;
+    }
+    @media (min-width: 600px) {
+        grid-template-columns: minmax(10px, 10px) 580px 0px;
+        grid-template-rows: 40px 380px;
+    }
+    @media (min-width: 700px) {
+        grid-template-columns: minmax(10px, 10px) 660px 0px;
+        grid-template-rows: 40px 380px;
+    }
+    @media (min-width: 800px) {
+        grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
+        grid-template-rows: 40px 340px;
+    }   
+    @media (min-width: 900px) {
+        grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+        grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1000px) {
+        grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+        grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1100px) {
+        grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+        grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1200px) {
+        grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+        grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1300px) {
+        grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+        grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1400px) {
+        grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+        grid-template-rows: 40px 400px;
+    }
+    @media (min-width: 1500px) {
+        grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+        grid-template-rows: 40px 400px;
+    }
+    .fiche_header_wp_gauche {
+        
+        @media (min-width: 0px) and (max-width: 600px) {
+        display: none;
+        }
+        @media (min-width: 600px) {
+        grid-column: 1;
+        }
+    }
+    .fiche_header_wp_gauche_carre {
+        @media (min-width: 0px) and (max-width: 600px) {
+        display: none;
+        }
+        @media (min-width: 600px) {
+        grid-column: 1;
+        grid-row: 4;
+        }
+    }
+    .fiche_header_wp_droite {
+        @media (min-width: 0px) and (max-width: 600px) {
+        display: none;
+        }
+        @media (min-width: 600px) {
+        grid-column: 3;
+        }
+    }
+
+    .fiche_header_inner {
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-column: 1;
+        grid-row: 1/3;
+        }
+        @media (min-width: 600px) {
+        grid-column: 2;
+        grid-row: 1/3;
+        }
+        display: grid;
+        
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 510px; 
+        }
+        @media (min-width: 600px) {
+        width: 575px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 380px;
+        }
+        @media (min-width: 700px) {
+        width: 675px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 380px;
+        }
+        @media (min-width: 800px) {
+        width: 780px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 340px;
+        }   
+        @media (min-width: 900px) {
+        width: 860px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1000px) {
+        width: 950px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1100px) {
+        width: 1020px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1200px) {
+        width: 1100px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1300px) {
+        width: 1200px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1400px) {
+        width: 1300px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1500px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1600px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1700px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+        @media (min-width: 1800px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 3.5fr;
+        grid-template-rows: 40px 400px;
+        }
+    }
+
+    .fiche_header_titres {
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-column: 1;
+        grid-row: 1;
+        padding-bottom: 20px;
+        padding-left: 10px;
+        }
+        @media (min-width: 600px) {
+        grid-column: 1;
+        grid-row: 2;
+        }
+        display: grid;
+        align-content: start;
+        gap: 0.75rem;
+        max-width: 475px;
+
+            h1 {
+            font-size: 55px;
+            @media (min-width: 0px) and (max-width: 600px) {
+                font-size: 25px;  
+            }
+            @media (min-width: 600px) {
+                font-size: 25px;
+            }
+            @media (min-width: 700px) {
+                font-size: 30px;
+            }
+            @media (min-width: 800px) {
+                font-size: 30px;
+            }   
+            @media (min-width: 900px) {
+                font-size: 40px;
+            }
+            @media (min-width: 1000px) {
+                font-size: 40px;
+            }
+            @media (min-width: 1100px) {
+                font-size: 40px;
+            }
+            @media (min-width: 1200px) {
+                font-size: 50px;
+            }
+            @media (min-width: 1300px) {
+                font-size: 55px;
+            }
+            @media (min-width: 1400px) {
+                font-size: 55px;
+            }
+            @media (min-width: 1500px) {
+                font-size: 55px;
+            }
+            @media (min-width: 1600px) {
+                font-size: 55px;
+            }
+            @media (min-width: 1700px) {
+                font-size: 55px;
+            }
+            @media (min-width: 1800px) {
+                font-size: 55px;
+            }
+            }
+        }
+
+    .fiche_header_img {
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-column: 1 / 4;
+        grid-row: 2 / 3;
+        padding-left: 10px;
+        padding-right: 10px;
+        }
+        @media (min-width: 600px) {
+        grid-column: 3 / 5;
+        grid-row: 1 / 3;
+        }
+        overflow: hidden;
+        .ds-media {
+        @media (min-width: 600px) {
+            height: 100%;
+        }
+        }
+    }
+
+    .fiche_header_infos {
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-column: 1 / 2;
+        grid-row: 4;
+        margin-top: -30px;
+        }
+        @media (min-width: 600px) {
+        grid-column: 1;
+        grid-row: 4;
+        }
+        display: grid;
+        align-content: center;
+        justify-content: end;
+        
+        @media (min-width: 0px) and (max-width: 700px) {
+        gap: 7px;  
+        }
+        @media (min-width: 700px) {
+        gap: 20px;
+        }
+
+        text-align: right;
+        .fiche_header_infos_genre {
+        font-weight: 900;
+        
+        }
+    }
+    .fiche_header_bandeau {
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-column: 1 / 3;
+        grid-row: 4;
+        margin-top: -30px;
+        }
+        @media (min-width: 600px) {
+        grid-column: 1 / 4;
+        grid-row: 4;
+        }
+        background-color: var(--c-backgroud-black);
+    }
+
+    .fiche_description > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+    }
+    .fiche_description {
+        .page-section--inner {
+        @media (max-width: 599px) {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+        }
+    }
+}
diff --git a/app/assets/scss/main.scss b/app/assets/scss/main.scss
index 12cc1e6..db932dc 100644
--- a/app/assets/scss/main.scss
+++ b/app/assets/scss/main.scss
@@ -16,3 +16,4 @@
 
 @use 'component/_header_layout';
 @use 'component/header_nav';
+@use 'component/header_page_simple';
\ No newline at end of file
diff --git a/app/components/ContactSpecifique.vue b/app/components/ContactSpecifique.vue
new file mode 100644
index 0000000..ecac4e3
--- /dev/null
+++ b/app/components/ContactSpecifique.vue
@@ -0,0 +1,88 @@
+<template>
+  <section class="contact_spe_cont">
+      <DsHeading as="h1" tone="default" textcase="uppercase">
+        {{titre}}
+      </DsHeading>
+      <div class="confetti"></div>
+      <div class="contact_spe_descripion">
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--nom">{{ nom }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--poste">{{ poste }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ numero }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ mail }}</div>
+      </div>
+  </section>
+</template>
+
+<script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+
+  defineProps({
+    titre: {
+      type: String,
+      required: true
+    },    
+    nom: {
+      type: String,
+      required: true
+    },
+    poste: {
+      type: String,
+      required: true
+    },
+    numero: {
+      type: String,
+      required: true
+    },
+    mail: {
+      type: String,
+      required: true
+    }
+  })
+</script>
+
+<style lang="scss">
+
+  .contact_spe_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;
+
+      h1 {
+        text-align: center;
+      }
+
+      .contact_spe_descripion {
+        max-width: 370px;
+        .contact_spe_descripion_item {
+          padding-bottom: 10px;
+          &--nom {
+            font-weight: var(--fw-semibold);
+          }
+          &--poste {
+            font-weight: var(--fw-light);
+          }
+        }
+      }
+
+
+  }
+  .confetti {
+    height: 20px;
+    width: 50px;
+    margin-top: 15px;
+    margin-bottom: 30px;
+    background-color: var(--c-brand_rouge);
+    transform: rotate(20deg);
+  }
+
+
+</style>
diff --git a/app/components/concert/ConcertCard.vue b/app/components/concert/ConcertCard.vue
index 12eb4bf..c193758 100644
--- a/app/components/concert/ConcertCard.vue
+++ b/app/components/concert/ConcertCard.vue
@@ -3,7 +3,8 @@
     <div class="concert-card__grid">
       <!-- Image -->
       <div class="concert-card__media">
-        <DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
+        <DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
+        <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
       </div>
 
       <!-- Content -->
diff --git a/app/components/concert/ConcertCardList.vue b/app/components/concert/ConcertCardList.vue
index 075a0ae..43f2f2c 100644
--- a/app/components/concert/ConcertCardList.vue
+++ b/app/components/concert/ConcertCardList.vue
@@ -94,7 +94,6 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 340px;
-      min-width: 500px;
     }
   }
 
@@ -105,7 +104,6 @@
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 380px;
-      min-width: 500px;
     }
   }
 
@@ -125,8 +123,7 @@
     }
 
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
-      flex: 2 1 440px;
-      min-width: 500px;
+      flex: 2 1 370px;
     }
   }
 
diff --git a/app/pages/concerts/agenda.vue b/app/pages/concerts/agenda.vue
index f808e77..f5f9645 100644
--- a/app/pages/concerts/agenda.vue
+++ b/app/pages/concerts/agenda.vue
@@ -35,6 +35,13 @@
     const runtimeConfig = useRuntimeConfig()
     import { formatDateLong } from "@/utils/dateFormat.js"
 
+    const saisonsFiltre = computed(() => {
+        const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
+        .filter(Boolean)
+
+        return [...new Set(values)]
+    })
+
     const { concerts, refresh } = useConcerts({
         locale: "fr-FR",
         populate: {
@@ -56,7 +63,7 @@
         filters: {
             saison_concert: {
                 nom_saison: {
-                    $eq: String(runtimeConfig.public.saison),
+                    $in: saisonsFiltre.value,
             },
             },
         },
diff --git a/app/pages/concerts/saison.vue b/app/pages/concerts/saison.vue
index 3eb2cdb..94e35f5 100644
--- a/app/pages/concerts/saison.vue
+++ b/app/pages/concerts/saison.vue
@@ -2,9 +2,22 @@
 
     <div>
         <PageSection tone="dark" content-size="default">
-          <SectionTitle tone="invert" pad="md">
-            SAISON 2025/2026
-          </SectionTitle>
+            <SectionTitle tone="invert" pad="md">
+                SAISON
+                <div class="saison-select-wrap">
+                    <select
+                        id="saison-select"
+                        v-model="selectedSeason"
+                        class="saison-select"
+                        @change="hasUserSelectedSeason = true"
+                    >
+                        <option v-for="season in seasonOptions" :key="season" :value="season">
+                            {{ season }}
+                        </option>
+                    </select>
+                </div>
+            </SectionTitle>
+
         </PageSection>
         <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
           <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
@@ -31,10 +44,60 @@
 
 <script setup>
 
-    import { onMounted } from "vue"
+    import { computed, onMounted, ref, watch, watchEffect } from "vue"
     const runtimeConfig = useRuntimeConfig()
+    const route = useRoute()
+    const router = useRouter()
     import { formatDateLong } from "@/utils/dateFormat.js"
 
+    const defaultSeason = computed(() => String(runtimeConfig.public.saison || "").trim())
+    const selectedSeason = ref(String(route.query.saison || defaultSeason.value || "").trim())
+    const hasUserSelectedSeason = ref(false)
+
+    const seasonFilters = computed(() => {
+        if (!selectedSeason.value) return null
+        return {
+            saison_concert: {
+                nom_saison: {
+                    $eq: selectedSeason.value,
+                },
+            },
+        }
+    })
+
+    const { items: seasonSource } = useStrapi("/api/__strapi__/concerts", {
+        locale: "fr-FR",
+        populate: {
+            saison_concert: true,
+        },
+    })
+
+    const seasonOptions = computed(() => {
+        const seasons = new Set()
+        ;(seasonSource.value || []).forEach((concert) => {
+            const season = concert?.saison_concert?.nom_saison
+            if (season) seasons.add(String(season).trim())
+        })
+
+        const values = Array.from(seasons).sort((a, b) => b.localeCompare(a, "fr"))
+        if (selectedSeason.value && !values.includes(selectedSeason.value)) {
+            values.unshift(selectedSeason.value)
+        }
+        if (!values.length && defaultSeason.value) {
+            values.push(defaultSeason.value)
+        }
+        return values
+    })
+
+    watchEffect(() => {
+        if (route.query.saison) return
+        if (hasUserSelectedSeason.value) return
+        if (!defaultSeason.value) return
+        if (selectedSeason.value !== defaultSeason.value) {
+            selectedSeason.value = defaultSeason.value
+        }
+    })
+
     const { concerts, refresh } = useConcerts({
         locale: "fr-FR",
         populate: {
@@ -53,13 +116,7 @@
             representation_concert: { lieu_representation: true },
             liens_youtube_concert: true,
         },
-        filters: {
-            saison_concert: {
-                nom_saison: {
-                    $eq: String(runtimeConfig.public.saison),
-                },
-            },
-        },
+        filters: seasonFilters,
         upcomingOnly: false,
     })
 
@@ -69,4 +126,75 @@
         }
     })
 
+    watch(
+        selectedSeason,
+        (value) => {
+            const saison = String(value || "").trim()
+            router.replace({
+                query: {
+                    ...route.query,
+                    ...(saison ? { saison } : {}),
+                },
+            })
+        },
+        { immediate: true }
+    )
+
+
 </script>
+
+<style lang="scss">
+    .saison-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: var(--sp-16) 0;
+    }
+
+    .saison-select-label {
+        color: var(--c-text-invert);
+        font-family: var(--font-barlow-condensed);
+        font-size: 1.75rem;
+        line-height: 1;
+        text-transform: uppercase;
+    }
+
+    .saison-select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        min-width: 220px;
+        padding: 10px 42px 10px 14px;
+        border: 1px solid var(--c-text);
+        border-radius: 0;
+        background: transparent;
+        color: var(--c-text-invert);
+        font-family: var(--font-roboto);
+        font-weight: var(--fw-extrabold);
+        font-size: 40px;
+        line-height: 1;
+        text-transform: uppercase;
+    }
+
+    .saison-select-wrap {
+        position: relative;
+        display: inline-block;
+    }
+
+    .saison-select-wrap::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        width: 12px;
+        height: 12px;
+        border-right: 4px solid var(--c-text-invert);
+        border-bottom: 4px solid var(--c-text-invert);
+        transform: translateY(-65%) rotate(45deg);
+        pointer-events: none;
+    }
+
+    .saison-select option {
+        color: var(--c-text);
+    }
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 834e1ae..899a12f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -196,6 +196,12 @@
   //--------------------
   // DONNÉES POUR LES CONCERTS À VENIR …
   //--------------------
+    const saisonsFiltre = computed(() => {
+      const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
+        .filter(Boolean)
+
+      return [...new Set(values)]
+    })
   const { concerts, refresh } = useConcerts({
       locale: "fr-FR",
       populate: {
@@ -206,7 +212,7 @@
       filters: {
           saison_concert: {
             nom_saison: {
-                $eq: String(runtimeConfig.public.saison),
+                $in: saisonsFiltre.value,
             },
           },
       },
diff --git a/app/pages/mediation/scolaires.vue b/app/pages/mediation/scolaires.vue
index 62395ad..a54e5b5 100644
--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -10,7 +10,7 @@
       <!-- ================== -->
       <!-- EN-TêTE -->
       <!-- ================== -->
-      <section class="fiche_header_wp">
+      <section class="fiche_header_simple_wp">
         <div class="fiche_header_wp_gauche"></div>
 
         <div class="fiche_header_inner">
@@ -111,6 +111,22 @@
         </PageSection>
       </template>
 
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Contacter le service des actions culturelles"
+            nom="Vanessa Gasztowtt"
+            poste="Responsable de l’action éducative et culturelle
+et de la programmation jeune public"
+            numero="01 41 79 03 43"
+            mail="vanessa.gasztowtt@orchestre-ile.com"
+          />
+      </PageSection>
+
   </div>
 </template>
 
@@ -241,6 +257,10 @@
       background-color: var(--c-background-jaune);
       margin-bottom: 50px;
     }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-bottom: 20px;
+    }
   }
 
   /* ============================ */
diff --git a/app/pages/orchestre/artistesinvitees.vue b/app/pages/orchestre/artistesinvitees.vue
index dc0b787..5954c7e 100644
--- a/app/pages/orchestre/artistesinvitees.vue
+++ b/app/pages/orchestre/artistesinvitees.vue
@@ -129,13 +129,18 @@
   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 saisonsFiltre = computed(() => {
+    const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
+      .filter(Boolean)
+
+    return [...new Set(values)]
+  })
   const artistesFilters = computed(() => {
-    if (!saisonFiltre.value) return null
+    if (!saisonsFiltre.value) return null
     return {
       saisons_artiste_invite: {
         nom_saison: {
-          $eq: saisonFiltre.value,
+          $in: saisonsFiltre.value,
         },
       },
     }
diff --git a/app/pages/orchestre/missions.vue b/app/pages/orchestre/missions.vue
index 208b60d..5054b73 100644
--- a/app/pages/orchestre/missions.vue
+++ b/app/pages/orchestre/missions.vue
@@ -10,7 +10,7 @@
         <!-- ================== -->
         <!-- EN-TêTE -->
         <!-- ================== -->
-        <section class="fiche_header_wp">
+        <section class="fiche_header_simple_wp">
           <div class="fiche_header_wp_gauche"></div>
 
           <div class="fiche_header_inner">
@@ -186,302 +186,7 @@
     padding-top: 30px;
   }
 
-  .fiche_header_wp {
-    display: grid;
-    justify-content: center;
-    padding-bottom: 100px;
-    
 
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 510px;
-      padding-top: 40px;
-    }
-    @media (min-width: 600px) {
-      grid-template-columns: minmax(10px, 10px) 580px 0px;
-      grid-template-rows: 40px 380px;
-    }
-    @media (min-width: 700px) {
-      grid-template-columns: minmax(10px, 10px) 660px 0px;
-      grid-template-rows: 40px 380px;
-    }
-    @media (min-width: 800px) {
-      grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
-      grid-template-rows: 40px 340px;
-    }   
-    @media (min-width: 900px) {
-      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1000px) {
-      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1100px) {
-      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1200px) {
-      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1300px) {
-      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1400px) {
-      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1500px) {
-      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
-      grid-template-rows: 40px 400px;
-    }
-  }
-  .fiche_header_wp_gauche {
-    
-    @media (min-width: 0px) and (max-width: 600px) {
-      display: none;
-    }
-    @media (min-width: 600px) {
-      grid-column: 1;
-    }
-  }
-  .fiche_header_wp_gauche_carre {
-    @media (min-width: 0px) and (max-width: 600px) {
-      display: none;
-    }
-    @media (min-width: 600px) {
-      grid-column: 1;
-      grid-row: 4;
-    }
-  }
-  .fiche_header_wp_droite {
-    @media (min-width: 0px) and (max-width: 600px) {
-      display: none;
-    }
-    @media (min-width: 600px) {
-      grid-column: 3;
-    }
-  }
-
-  .fiche_header_inner {
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1;
-      grid-row: 1/3;
-    }
-    @media (min-width: 600px) {
-      grid-column: 2;
-      grid-row: 1/3;
-    }
-    display: grid;
-    
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 510px; 
-    }
-    @media (min-width: 600px) {
-      width: 575px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 380px;
-    }
-    @media (min-width: 700px) {
-      width: 675px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 380px;
-    }
-    @media (min-width: 800px) {
-      width: 780px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 340px;
-    }   
-    @media (min-width: 900px) {
-      width: 860px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1000px) {
-      width: 950px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1100px) {
-      width: 1020px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1200px) {
-      width: 1100px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1300px) {
-      width: 1200px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1400px) {
-      width: 1300px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1500px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1600px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1700px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-    @media (min-width: 1800px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 3.5fr;
-      grid-template-rows: 40px 400px;
-    }
-  }
-
-  .fiche_header_titres {
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1;
-      grid-row: 1;
-      padding-bottom: 20px;
-      padding-left: 10px;
-    }
-    @media (min-width: 600px) {
-      grid-column: 1;
-      grid-row: 2;
-    }
-    display: grid;
-    align-content: start;
-    gap: 0.75rem;
-    max-width: 475px;
-
-    h1 {
-      font-size: 55px;
-      @media (min-width: 0px) and (max-width: 600px) {
-        font-size: 25px;  
-      }
-      @media (min-width: 600px) {
-        font-size: 25px;
-      }
-      @media (min-width: 700px) {
-        font-size: 30px;
-      }
-      @media (min-width: 800px) {
-        font-size: 30px;
-      }   
-      @media (min-width: 900px) {
-        font-size: 40px;
-      }
-      @media (min-width: 1000px) {
-        font-size: 40px;
-      }
-      @media (min-width: 1100px) {
-        font-size: 40px;
-      }
-      @media (min-width: 1200px) {
-        font-size: 50px;
-      }
-      @media (min-width: 1300px) {
-        font-size: 55px;
-      }
-      @media (min-width: 1400px) {
-        font-size: 55px;
-      }
-      @media (min-width: 1500px) {
-        font-size: 55px;
-      }
-      @media (min-width: 1600px) {
-        font-size: 55px;
-      }
-      @media (min-width: 1700px) {
-        font-size: 55px;
-      }
-      @media (min-width: 1800px) {
-        font-size: 55px;
-      }
-    }
-  }
-
-  .fiche_header_img {
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1 / 4;
-      grid-row: 2 / 3;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-    @media (min-width: 600px) {
-      grid-column: 3 / 5;
-      grid-row: 1 / 3;
-    }
-    overflow: hidden;
-    .ds-media {
-      @media (min-width: 600px) {
-        height: 100%;
-      }
-    }
-  }
-
-  .fiche_header_infos {
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1 / 2;
-      grid-row: 4;
-      margin-top: -30px;
-    }
-    @media (min-width: 600px) {
-      grid-column: 1;
-      grid-row: 4;
-    }
-    display: grid;
-    align-content: center;
-    justify-content: end;
-    
-    @media (min-width: 0px) and (max-width: 700px) {
-      gap: 7px;  
-    }
-    @media (min-width: 700px) {
-      gap: 20px;
-    }
-
-    text-align: right;
-    .fiche_header_infos_genre {
-      font-weight: 900;
-      
-    }
-  }
-  .fiche_header_bandeau {
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-column: 1 / 3;
-      grid-row: 4;
-      margin-top: -30px;
-    }
-    @media (min-width: 600px) {
-      grid-column: 1 / 4;
-      grid-row: 4;
-    }
-    background-color: var(--c-backgroud-black);
-  }
-
-  .fiche_description > * {
-    max-width: 640px;
-    display: flex;
-    flex-direction: column;
-  }
-  .fiche_description {
-    .page-section--inner {
-      @media (max-width: 599px) {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-    }
-  }
 
 // =======================
 // SPÉCIFIQUE À CETTE PAGE
diff --git a/design-system/tokens/_colors.scss b/design-system/tokens/_colors.scss
index fa0e0a3..2891cd2 100644
--- a/design-system/tokens/_colors.scss
+++ b/design-system/tokens/_colors.scss
@@ -15,6 +15,7 @@
     --c-backgroud-brandreverse: #ACCFCF;
     --c-background-blanc-casse: #FCFCFC;
     --c-background-jaune: #fac020;
+    --c-background-jaune-clair: #fac0201f;
     --c-background-vert: #51d43d;
 
     /* États */
diff --git a/ecosystem.config.cjs b/ecosystem.config.cjs
index 94b9b42..0dc672c 100644
--- a/ecosystem.config.cjs
+++ b/ecosystem.config.cjs
@@ -14,7 +14,7 @@ module.exports = {
         // Auto-mapping Nuxt runtimeConfig.strapiToken
         // (si tu l'utilises vraiment)
         NUXT_STRAPI_TOKEN: "",
-        NUXT_PUBLIC_SAISON: "2025/2026"
+        NUXT_PUBLIC_SAISON: "2026/2027"
       },
     },
   ],