diff --git a/app/assets/scss/base/_typo.scss b/app/assets/scss/base/_typo.scss
new file mode 100644
index 0000000..3bd9d71
--- /dev/null
+++ b/app/assets/scss/base/_typo.scss
@@ -0,0 +1,4 @@
+.gros_chiffres {
+    font-size: var(--fs-18);
+    font-weight: var(--fw-black);
+}
\ No newline at end of file
diff --git a/app/assets/scss/component/_fiche.scss b/app/assets/scss/component/_fiche.scss
new file mode 100644
index 0000000..b15792f
--- /dev/null
+++ b/app/assets/scss/component/_fiche.scss
@@ -0,0 +1,283 @@
+  .fiche_header_wp {
+    display: grid;
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 510px 20px 200px;
+      padding-top: 40px;
+    }
+    @media (min-width: 600px) {
+      grid-template-columns: minmax(10px, 10px) 580px 0px;
+      grid-template-rows: 40px 280px 20px 230px;
+    }
+    @media (min-width: 700px) {
+      grid-template-columns: minmax(10px, 10px) 660px 0px;
+      grid-template-rows: 70px 250px 90px 300px;
+    }
+    @media (min-width: 800px) {
+      grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
+      grid-template-rows: 60px 280px 70px 300px;
+    }   
+    @media (min-width: 900px) {
+      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+      grid-template-rows: 90px 340px 100px 250px;
+    }
+    @media (min-width: 1000px) {
+      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+      grid-template-rows: 90px 340px 120px 270px;
+    }
+    @media (min-width: 1100px) {
+      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+      grid-template-rows: 90px 340px 140px 290px;
+    }
+    @media (min-width: 1200px) {
+      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1300px) {
+      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1400px) {
+      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1500px) {
+      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+
+    .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;
+        }
+        background-color: var(--c-backgroud-black);
+    }
+    .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/5;
+        }
+        @media (min-width: 600px) {
+        grid-column: 2;
+        grid-row: 1/5;
+        }
+        display: grid;
+        
+        @media (min-width: 0px) and (max-width: 600px) {
+        grid-template-columns: 4fr 1fr 0.5fr;
+        grid-template-rows: auto 510px 20px 200px; 
+        }
+        @media (min-width: 600px) {
+        width: 575px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 40px 280px 20px 230px;
+        }
+        @media (min-width: 700px) {
+        width: 675px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 70px 250px 90px 300px;
+        }
+        @media (min-width: 800px) {
+        width: 780px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 60px 280px 70px 300px;
+        }   
+        @media (min-width: 900px) {
+        width: 860px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 100px 250px;
+        }
+        @media (min-width: 1000px) {
+        width: 950px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 120px 270px;
+        }
+        @media (min-width: 1100px) {
+        width: 1020px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 140px 290px;
+        }
+        @media (min-width: 1200px) {
+        width: 1100px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 330px;
+        }
+        @media (min-width: 1300px) {
+        width: 1200px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 330px;
+        }
+        @media (min-width: 1400px) {
+        width: 1300px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 380px;
+        }
+        @media (min-width: 1500px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 380px;
+        }
+        @media (min-width: 1600px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 380px;
+        }
+        @media (min-width: 1700px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 380px;
+        }
+        @media (min-width: 1800px) {
+        width: 1400px;
+        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+        grid-template-rows: 90px 340px 160px 380px;
+        }
+    }
+
+    .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;
+        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 / 4; 
+        }
+        @media (min-width: 600px) {
+        grid-column: 3 / 5;
+        grid-row: 1 / 5;
+        }
+        overflow: hidden;
+        .ds-media {
+        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);
+    }
+    }
\ No newline at end of file
diff --git a/app/assets/scss/component/_galerie_photo.scss b/app/assets/scss/component/_galerie_photo.scss
new file mode 100644
index 0000000..3ee8f95
--- /dev/null
+++ b/app/assets/scss/component/_galerie_photo.scss
@@ -0,0 +1,42 @@
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+  .img-gallery_wp {
+      padding-bottom: 50px;
+  }
+
+  .img-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 520px));
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 1.5rem;
+    width: 100%;
+  }
+
+  .img-gallery > * {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 5px;
+  }
+
+  .img-gallery :deep(.ds-media) {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: transparent;
+  }
+
+  .img-gallery :deep(.ds-media__img) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .img-gallery :deep(.ds-media__img:hover) {
+    transform: scale(1.02);
+  }
\ No newline at end of file
diff --git a/app/assets/scss/component/_header_page_simple.scss b/app/assets/scss/component/_header_page_simple.scss
index 94fc9c0..7690278 100644
--- a/app/assets/scss/component/_header_page_simple.scss
+++ b/app/assets/scss/component/_header_page_simple.scss
@@ -234,9 +234,9 @@
         }
         overflow: hidden;
         .ds-media {
-        @media (min-width: 600px) {
-            height: 100%;
-        }
+            @media (min-width: 600px) {
+                height: 100%;
+            }
         }
     }
 
diff --git a/app/assets/scss/component/_header_page_titre.scss b/app/assets/scss/component/_header_page_titre.scss
new file mode 100644
index 0000000..b2fd657
--- /dev/null
+++ b/app/assets/scss/component/_header_page_titre.scss
@@ -0,0 +1,290 @@
+.fiche_header_titre_wp {
+    display: grid;
+    grid-template-rows: auto;
+    justify-content: center;
+    padding-bottom: 20px;
+
+
+    @media (min-width: 0px) and (max-width: 600px) {
+        grid-template-columns: 1fr;
+        padding-top: 40px;
+    }
+    @media (min-width: 600px) {
+        grid-template-columns: minmax(10px, 10px) 580px 0px;
+    }
+    @media (min-width: 700px) {
+        grid-template-columns: minmax(10px, 10px) 660px 0px;
+    }
+    @media (min-width: 800px) {
+        grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
+    }   
+    @media (min-width: 900px) {
+        grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+    }
+    @media (min-width: 1000px) {
+        grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+    }
+    @media (min-width: 1100px) {
+        grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+    }
+    @media (min-width: 1200px) {
+        grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+    }
+    @media (min-width: 1300px) {
+        grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+    }
+    @media (min-width: 1400px) {
+        grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+    }
+    @media (min-width: 1500px) {
+        grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+    }
+    .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: auto;
+        grid-template-rows: auto auto; 
+        }
+        @media (min-width: 600px) {
+        width: 575px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 700px) {
+        width: 675px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 800px) {
+        width: 780px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }   
+        @media (min-width: 900px) {
+        width: 860px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1000px) {
+        width: 950px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1100px) {
+        width: 1020px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1200px) {
+        width: 1100px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1300px) {
+        width: 1200px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1400px) {
+        width: 1300px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1500px) {
+        width: 1400px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1600px) {
+        width: 1400px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1700px) {
+        width: 1400px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+        @media (min-width: 1800px) {
+        width: 1400px;
+        grid-template-columns: auto;
+        grid-template-rows: 40px auto;
+        }
+    }
+
+    .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;
+
+
+            h1 {
+                max-width: 1000px;
+                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;
+                }
+            }
+            p {
+                max-width: 475px;
+            }
+        }
+
+    .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 db932dc..7037fcd 100644
--- a/app/assets/scss/main.scss
+++ b/app/assets/scss/main.scss
@@ -5,6 +5,7 @@
 @use 'base/button';
 @use 'base/img';
 @use 'base/fonts';
+@use 'base/typo';
 
 @use 'base/spaces';
 
@@ -16,4 +17,7 @@
 
 @use 'component/_header_layout';
 @use 'component/header_nav';
-@use 'component/header_page_simple';
\ No newline at end of file
+@use 'component/header_page_simple';
+@use 'component/header_page_titre';
+@use 'component/_galerie_photo';
+@use 'component/fiche';
\ No newline at end of file
diff --git a/app/components/ContactSpecifique.vue b/app/components/ContactSpecifique.vue
index ecac4e3..02312a9 100644
--- a/app/components/ContactSpecifique.vue
+++ b/app/components/ContactSpecifique.vue
@@ -9,6 +9,7 @@
           <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 class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ adresse }}</div>
       </div>
   </section>
 </template>
@@ -17,26 +18,12 @@
   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
-    }
+    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 },
+    adresse: { type: String, required: true}
   })
 </script>
 
diff --git a/app/components/FilteredCards.vue b/app/components/FilteredCards.vue
index 7e18482..ee09f09 100644
--- a/app/components/FilteredCards.vue
+++ b/app/components/FilteredCards.vue
@@ -78,9 +78,7 @@
     // Variable qui contient les catégories qui permettront de filtrer
     const filters = [
         { key: 'famille', label: 'Famille' },
-        { key: 'lieux', label: 'Lieux' },
-        { key: 'ateliers', label: 'Ateliers' },
-        { key: 'musique', label: 'Musique' },
+        { key: 'rencontre', label: 'Rencontres' },
     ]
     // variable pour donner le filtre actif
     // filtre par défaut : le premier
@@ -99,49 +97,47 @@
             descriptionHtml: `Tu as moins de 28 ans ? Paie 6 € la place dès 3 concerts de l’Orchestre à la Philharmonie de Paris<br>
                 🔴 Ile de France | Ministère de la culture<br>
                 🎨 Agence belleville.eu`,
-            tags: ['musique','famille'],
+            tags: ['famille'],
         },
         {
             id: 'insta-2',
             imgSrc: '/contenus/insta_ondif_2.jpg',
             imgAlt: 'le titre du post',
-            title: "✨ Tous à l’orchestre ! Un début de saison qui fait vibrer l’Ondif 🎶",
-            descriptionHtml: `Des lycéens conquis par Rachmaninov aux premières rencontres à Montereau, des petites oreilles émerveillées aux ateliers de Marly-la-Ville, sans oublier la musique portée jusqu'aux hôpitaux.<br>
-            Et plus de 250 choristes rassemblés pour le "Chantons avec" Alice Swing !<br>
-            Quelle énergie ❤️`,
-            tags: ['famille', 'ateliers', 'musique', 'lieux'],
+            title: "✨ Tous à l’orchestre !",
+            descriptionHtml: `Ces dernières semaines, l’Orchestre a vibré bien au-delà de la scène, au fil d’actions culturelles et éducatives riches en échanges et en découvertes.<br>
+            Entre ateliers d’enregistrement, éveil musical, et rencontres avec les musiciens de l’orchestre, chaque instant a permis de créer du lien et de faire vivre la musique autrement.<br>
+            Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.<br>
+            Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
+            tags: ['famille'],
         },
         {
             id: 'insta-3',
             imgSrc: '/contenus/insta_ondif_3.jpg',
             imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
+            title: "✨ Ça c’est fait ! Retour sur février et mars ✨",
+            descriptionHtml: `Ces deux derniers mois, l’Orchestre a surpris son public à chaque instant !<br>
+            Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
+            Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
+            tags: ['rencontre'],
         },
         {
-            id: 'insta-3',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
+            id: 'insta-4',
+            imgSrc: '/contenus/insta_ondif_4.jpg',
             imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
+            title: "✨ Tous à l’orchestre !",
+            descriptionHtml: `Ces dernières semaines ont été intenses et inspirantes du côté de l’action culturelle et éducative de l’Orchestre.<br>
+            Entre ateliers d’enregistrement sonore, découverte de la lutherie, répétitions commentées et musique à l’hôpital, les rencontres se sont multipliées, au plus près des publics et des territoires.<br>
+            Retour en images sur ces expériences qui font vivre l’Orchestre 🎶`,
+            tags: ['famille'],
         },
         {
-            id: 'insta-3',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
+            id: 'insta-5',
+            imgSrc: '/contenus/insta_ondif_5.jpg',
             imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
-        },
-        {
-            id: 'insta-3',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
-            imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
+            title: "✨ Ça c’est fait ! Retour sur décembre et janvier ✨",
+            descriptionHtml: `Entre concerts symphoniques, soirées à l’opéra, et musique de chambre, nous avons eu le plaisir de partager des univers variés et de rencontrer un public toujours plus curieux et enthousiaste.<br>
+            Retour en images sur ces temps forts qui font vibrer l’Ondif ! 🎶`,
+            tags: ['rencontre'],
         },
     ])
 
@@ -234,7 +230,7 @@
             }
             @media (min-width: 1440px) {
                 &--card {
-                    width: clamp(360px, 28vw, 560px);
+                    width: clamp(360px, 26vw, 560px);
                 }
             }
         }
diff --git a/app/components/RoundedCardBlocText.vue b/app/components/RoundedCardBlocText.vue
new file mode 100644
index 0000000..dd577aa
--- /dev/null
+++ b/app/components/RoundedCardBlocText.vue
@@ -0,0 +1,108 @@
+<template>
+  <DsCard class="rounded-card">
+    <div class="rounded-card__grid">
+      <!-- Image -->
+      <div class="rounded-card__media">
+        <DsMedia :src="imgSrc" :alt="imgAlt" :ratio="ratio" />
+      </div>
+
+      <!-- Content -->
+      <div class="rounded-card__content">
+        <NuxtLink v-if="url" :to="url" class="rounded-card__title-link">
+          <DsHeading as="h5" tone="default" class="rounded-card__title">
+            {{ title }}
+          </DsHeading>
+        </NuxtLink>
+        <DsHeading v-else as="h5" tone="default" class="rounded-card__title">
+            {{ title }}
+        </DsHeading>
+        <!-- Description -->
+        <DsText as="p" tone="default" :clamp="3" class="rounded-card__description">
+          {{ description }}
+        </DsText>
+
+      </div>
+    </div>
+  </DsCard>
+</template>
+
+<script setup>
+  import DsCard from '@root/design-system/components/DsCard.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
+
+
+  defineProps({
+    id: { type: [String, Number], required: true },
+    title: { type: String, required: true },
+    url: { type: String, required: true },
+    description: { type: String, default: '' },
+    imgSrc: { type: String, default: '' },
+    imgAlt: { type: String, default: '' },
+    ratio: { type: String, default: 'square' },
+  })
+</script>
+
+<style lang="scss">
+  .rounded-card {
+    padding: 16px;
+    box-shadow: 0px -1px 20px rgba(0, 0, 0, 0.18);
+
+    .rounded-card__grid {
+      display: grid;
+      align-items: start;
+    }
+
+    .rounded-card__content {
+      display: grid;
+      gap: var(--sp-6);
+      max-width: 518px;
+      padding-left: 22px;
+      padding-right: 20px;
+      padding-top: 13px;
+      padding-bottom: 10px;
+      background: white;
+      max-width: 85%;
+      justify-self: center;
+      position: relative;
+      margin-top: -50px;
+      border-radius: 20px;
+    }
+
+    .rounded-card__meta {
+      margin-top: calc(var(--sp-4) * -1);
+    }
+
+    .rounded-card__title-link {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .rounded-card__title-link:hover,
+    .rounded-card__title-link:focus-visible {
+      color: var(--c-brand_rouge) !important;
+      .ds-heading--default {
+        color: var(--c-brand_rouge) !important;
+      }
+    }
+
+    .rounded-card__description {
+      margin-top: 10px;
+      margin-bottom: 20px;
+    }
+    .rounded-card__actions {
+      margin-top: auto;
+    }
+
+    .rounded-card__media {
+      .ds-media {
+        background: white !important;
+      }
+      img {
+        border-radius: 20px;
+      }
+    }
+  }
+</style>
diff --git a/app/components/RoundedCardBlocTextList.vue b/app/components/RoundedCardBlocTextList.vue
new file mode 100644
index 0000000..ee13739
--- /dev/null
+++ b/app/components/RoundedCardBlocTextList.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="rounded-card-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+  .rounded-card-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-cards);
+    justify-content: flex-start;
+    margin-left: 30px;
+  }
+  @media (max-width: 572px) {
+    .rounded-card-list {
+      justify-content: center;
+    }
+  }
+
+  // Taille des cards
+  @media (max-width: 599px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+      max-width: 90%;
+    }
+  }
+  @media (min-width: 600px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+    }
+  }
+  @media (min-width: 700px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+  @media (min-width: 800px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+  @media (min-width: 900px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+
+  @media (min-width: 1100px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 300px;
+      flex: 1 1 300px;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 258px;
+      flex: 1 1 258px;
+    }
+  }
+
+  @media (min-width: 1300px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 283px;
+      flex: 1 1 283px;
+    }
+  }
+
+  @media (min-width: 1400px) {
+    // style appliqué au composant enfant via sa classe
+    .rounded-card-list > .rounded-card {
+      max-width: 308px;
+      flex: 1 1 308px;
+    }
+  }
+
+
+
+</style>
diff --git a/app/components/SquareCardBlocText.vue b/app/components/SquareCardBlocText.vue
index c2c5216..3ef1e6d 100644
--- a/app/components/SquareCardBlocText.vue
+++ b/app/components/SquareCardBlocText.vue
@@ -8,8 +8,13 @@
 
       <!-- Content -->
       <div class="square-card__content">
-        <DsHeading as="h5" tone="default" class="square-card__title">
-          {{ title }}
+        <NuxtLink v-if="url" :to="url" class="square-card__title-link">
+          <DsHeading as="h5" tone="default" class="square-card__title">
+            {{ title }}
+          </DsHeading>
+        </NuxtLink>
+        <DsHeading v-else as="h5" tone="default" class="square-card__title">
+            {{ title }}
         </DsHeading>
         <!-- Description -->
         <DsText as="p" tone="default" :clamp="3" class="square-card__description">
@@ -64,6 +69,20 @@
   .square-card__meta {
     margin-top: calc(var(--sp-4) * -1);
   }
+
+  .square-card__title-link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .square-card__title-link:hover,
+  .square-card__title-link:focus-visible {
+    color: var(--c-brand_rouge) !important;
+    .ds-heading--default {
+      color: var(--c-brand_rouge) !important;
+    }
+  }
+
   .square-card__description {
     margin-top: 10px;
     margin-bottom: 20px;
@@ -72,4 +91,4 @@
     margin-top: auto;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/app/components/header/HeaderNav.vue b/app/components/header/HeaderNav.vue
index c7256fd..d363b1b 100644
--- a/app/components/header/HeaderNav.vue
+++ b/app/components/header/HeaderNav.vue
@@ -39,7 +39,7 @@
             <ul class="header_nav_sub_menu">
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Les musiciens</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
@@ -61,8 +61,8 @@
               <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/chantons">Chantons avec l'Orchestre</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">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>
@@ -168,7 +168,7 @@
               <ul class="header_drawer_sub_menu">
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Les musiciens</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
@@ -198,8 +198,8 @@
                 <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/chantons">Chantons avec l'Orchestre</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">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>
diff --git a/app/components/section/Decalage.vue b/app/components/section/Decalage.vue
index 9faff41..ef681b6 100644
--- a/app/components/section/Decalage.vue
+++ b/app/components/section/Decalage.vue
@@ -60,7 +60,9 @@
 
 <style lang="scss">
     .decalage_cont {
-        margin-bottom: 70px;
+
+        margin-bottom: 30px;
+        min-height: 240px;
         display: flex;
         &--left {
             justify-content: flex-start;
diff --git a/app/components/section/PageSection.vue b/app/components/section/PageSection.vue
index 309bf9d..3d0dcb9 100644
--- a/app/components/section/PageSection.vue
+++ b/app/components/section/PageSection.vue
@@ -69,5 +69,7 @@
             }
         }
     }
-
+  .decalage-section--spaced {
+    margin-top: 50px;
+  }
 </style>
diff --git a/app/components/section/SectionTitle.vue b/app/components/section/SectionTitle.vue
index b8bf744..f4b8bef 100644
--- a/app/components/section/SectionTitle.vue
+++ b/app/components/section/SectionTitle.vue
@@ -22,8 +22,6 @@
 
 <style lang="scss">
     .section-title {
-
-
       &--pad-xs {
         padding-top: var(--sp-32);
         padding-bottom: var(--sp-16);
@@ -52,7 +50,6 @@
         }
       }
     }
-
     @media (max-width: 300px) {
         .section-title {
             padding-left: calc(var(--sp-45) - 20px);
diff --git a/app/components/strapiconvert/StrapiBlocksConvert.vue b/app/components/strapiconvert/StrapiBlocksConvert.vue
index aa8da43..7a3ffe4 100644
--- a/app/components/strapiconvert/StrapiBlocksConvert.vue
+++ b/app/components/strapiconvert/StrapiBlocksConvert.vue
@@ -272,13 +272,17 @@
 
     &__figure {
       margin: 30px 0 30px;
+      align-self: center;
     }
 
     &__image {
       display: block;
       max-width: 100%;
       height: auto;
+      max-height: 430px;
+      object-fit: contain;
       border-radius: 6px;
+
     }
 
     &__caption {
@@ -307,7 +311,10 @@
     blockquote + &__h,
     &__code + &__h,
     &__figure + &__h {
-      margin-top: 13px;
+      margin-top: 23px;
+    }
+    > :not(h1) {
+      margin-left: 20px;
     }
 
   }
diff --git a/app/pages/concerts/concert-[id].vue b/app/pages/concerts/concert-[id].vue
index 09394ff..7ba4e59 100644
--- a/app/pages/concerts/concert-[id].vue
+++ b/app/pages/concerts/concert-[id].vue
@@ -10,9 +10,8 @@
       </PageSection>
 
 
-      <section class="fiche_header_wp">
+      <section class="fiche_concert_wp">
         <div class="fiche_header_wp_gauche"></div>
-        <div class="fiche_header_wp_gauche_carre"></div>
         <div class="fiche_header_inner">
             <div class="fiche_header_titres">
               <div>
@@ -36,97 +35,53 @@
               />
               <div v-else class="img_placeholder" aria-hidden="true" />
             </div>
-            <div class="fiche_header_bandeau"></div>
-            <div class="fiche_header_infos">
-              <div>
-                <DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="genreLabel">
-                  {{ genreLabel }}
-                </DsHeading>
-              </div>
-              <div v-if="concert.duree_concert">
-                <DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
-                  DURÉE {{ concert.duree_concert }}
-                </DsText>
-                <DsText as="p" tone="invert" class="" v-if="concert.duree_entracte">
-                  Entracte {{ concert.duree_entracte }}
-                </DsText>
-              </div>
-              <div v-if="concert.production_concert">
-                <DsText as="p" tone="invert" class="">
-                  {{ concert.production_concert }}
-                </DsText>
-              </div>
-            </div>
-        </div>
-        <div class="fiche_header_wp_droite"></div>
-      </section>
-
-
-      <PageSection tone="" content-size="default">
-          <section class="fiche_details_wp">
-            <section class="distribution_wp">
-              <div v-if="directionsOndif.length">
-                <div v-for="d in directionsOndif" :key="d.id" class="distribution_item">
-                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_ondif?.length"  class="distribution_item_poste direction">
-                    {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
-                  </DsText>
-                  <DsText as="p" tone="default" size="lg" weight="bold" class="">
-                    {{ d.nom_artiste_ondif }}
-                  </DsText>
-                </div>
-              </div>
-              <div v-if="directionsInvite.length">
-                <div v-for="d in directionsInvite" :key="d.id" class="distribution_item">
-                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_invite?.length" class="distribution_item_poste direction">
-                    {{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
-                  </DsText>
-                  <DsText as="p" tone="default" size="lg" weight="bold" class="">
-                    {{ d.nom_artiste_invite }}
-                  </DsText>
-                </div>
-              </div>
-              <div v-if="artistesOndif.length">
-                <div v-for="d in artistesOndif" :key="d.id" class="distribution_item">
-                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_ondif?.length" class="distribution_item_poste">
-                    {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
-                  </DsText>
-                  <DsText as="p" tone="default" size="lg" class="">
-                    {{ d.nom_artiste_ondif }}
-                  </DsText>
-                </div>
-              </div>
-              <div v-if="artistesInvite.length">
-                <div v-for="d in artistesInvite" :key="d.id" class="distribution_item">
-                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_invite?.length" class="distribution_item_poste">
-                    {{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
-                  </DsText>
-                  <DsText as="p" tone="default" size="lg" class="">
-                    {{ d.nom_artiste_invite }}
-                  </DsText>
-                </div>
-              </div>
-            </section>
-            <section class="programme_wp">
-                <div>
-                  <DsHeading as="h2" tone="invert" textcase="uppercase" class="programme_titre">
-                    PROGRAMME
-                  </DsHeading>
-                </div>
-                <div class="programme_list">
-                  <div v-for="(p, i) in programmes" :key="p.id || i" class="programme_item" >
-                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_compositeur">
-                      {{ p.compositeur_programme }}
+            <div class="fiche_header_distrib_wp">
+              <div class="programme_list">
+                <template v-if="directionsOndif.length">
+                  <div v-for="d in directionsOndif" :key="d.id" class="programme_item" >
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_compositeur">
+                      {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
                     </DsText>
-                    <DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_oeuvre">
-                      {{ p.oeuvre_programme }}
-                    </DsText>
-                    <DsText as="p" tone="default" size="lg" class="" v-if="p.piece_programme">
-                      {{ p.piece_programme }}
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
+                      {{ d.nom_artiste_ondif }}
                     </DsText>
                   </div>
-                </div>
-            </section>
-            <div v-if="representations.length" class="representation_wp">
+                </template>
+                <template v-if="directionsInvite.length">
+                  <div v-for="d in directionsInvite" :key="d.id" class="programme_item" >
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" v-if="d.postes_artiste_invite?.length" class="programme_compositeur direction">
+                      {{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
+                    </DsText>
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
+                      {{ d.nom_artiste_invite }}
+                    </DsText>
+                  </div>
+                </template>
+                <template v-if="artistesOndif.length">
+                  <div v-for="d in artistesOndif" :key="d.id" class="programme_item" >
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" v-if="d.postes_artiste_ondif?.length" class="programme_compositeur">
+                      {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
+                    </DsText>
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
+                      {{ d.nom_artiste_ondif }}
+                    </DsText>
+                  </div>
+                </template>
+                <template v-if="artistesInvite.length">
+                  <div v-for="d in artistesInvite" :key="d.id" class="programme_item" >
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" v-if="d.postes_artiste_invite?.length" class="programme_compositeur">
+                      {{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
+                    </DsText>
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
+                      {{ d.nom_artiste_invite }}
+                    </DsText>
+                  </div>
+                </template>
+              </div>
+
+
+            </div>
+            <div v-if="representations.length" class="fiche_header_representation_wp">
               <div v-for="(r, i) in representations" :key="r.id || i" class="representation_item">
 
                 <div>
@@ -166,7 +121,45 @@
                 </div>
               </div>
             </div>
-          </section>
+
+            <div class="fiche_header_infos">
+              <div>
+                <DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="genreLabel">
+                  {{ genreLabel }}
+                </DsHeading>
+              </div>
+              <div class="programme_list">
+                <div v-for="(p, i) in programmes" :key="p.id || i" class="programme_item" >
+                  <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_compositeur">
+                    {{ p.compositeur_programme }}
+                  </DsText>
+                  <DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_oeuvre">
+                    {{ p.oeuvre_programme }}
+                  </DsText>
+                  <DsText as="p" tone="default" size="lg" class="" v-if="p.piece_programme">
+                    {{ p.piece_programme }}
+                  </DsText>
+                </div>
+              </div>
+              <div v-if="concert.duree_concert">
+                <DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
+                  DURÉE {{ concert.duree_concert }}
+                </DsText>
+                <DsText as="p" tone="invert" class="" v-if="concert.duree_entracte">
+                  Entracte {{ concert.duree_entracte }}
+                </DsText>
+              </div>
+              <div v-if="concert.production_concert">
+                <DsText as="p" tone="invert" class="">
+                  {{ concert.production_concert }}
+                </DsText>
+              </div>
+            </div>
+        </div>
+      </section>
+
+
+      <PageSection tone="" content-size="default">
 
           <section v-if="concert.description_concert" class="description_wp">
             <StrapiBlocksConvert :blocks="concert?.description_concert" />
@@ -345,55 +338,56 @@
     padding-top: 30px;
   }
 
-  .fiche_header_wp {
+.fiche_concert_wp {
+
     display: grid;
     
     @media (min-width: 0px) and (max-width: 600px) {
       grid-template-columns: 1fr;
-      grid-template-rows: auto 510px 20px 200px;
+      grid-template-rows: auto auto;
       padding-top: 40px;
     }
     @media (min-width: 600px) {
       grid-template-columns: minmax(10px, 10px) 580px 0px;
-      grid-template-rows: 40px 280px 20px 230px;
+      grid-template-rows: 40px auto;
     }
     @media (min-width: 700px) {
       grid-template-columns: minmax(10px, 10px) 660px 0px;
-      grid-template-rows: 70px 250px 90px 300px;
+      grid-template-rows: 70px auto;
     }
     @media (min-width: 800px) {
       grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
-      grid-template-rows: 60px 280px 70px 300px;
+      grid-template-rows: 60px auto;
     }   
     @media (min-width: 900px) {
       grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
-      grid-template-rows: 90px 340px 100px 250px;
+      grid-template-rows: 90px auto;
     }
     @media (min-width: 1000px) {
       grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
-      grid-template-rows: 90px 340px 120px 270px;
+      grid-template-rows: 90px auto;
     }
     @media (min-width: 1100px) {
       grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
-      grid-template-rows: 90px 340px 140px 290px;
+      grid-template-rows: 90px auto;
     }
     @media (min-width: 1200px) {
       grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 330px;
+      grid-template-rows: 90px auto;
     }
     @media (min-width: 1300px) {
       grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 330px;
+      grid-template-rows: 90px auto;
     }
     @media (min-width: 1400px) {
       grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 380px;
+      grid-template-rows: 90px auto;
     }
     @media (min-width: 1500px) {
       grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 380px;
+      grid-template-rows: 90px auto;
     }
-  }
+
   .fiche_header_wp_gauche {
     
     @media (min-width: 0px) and (max-width: 600px) {
@@ -403,37 +397,16 @@
       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;
-    }
-    background-color: var(--c-backgroud-black);
-  }
-  .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/5;
+      grid-row: 1/3;
     }
     @media (min-width: 600px) {
       grid-column: 2;
-      grid-row: 1/5;
+      grid-row: 1/3;
     }
     display: grid;
     
@@ -488,28 +461,15 @@
     }
     @media (min-width: 1500px) {
       width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1600px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1700px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1800px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
+      grid-template-columns: 4fr 4fr 0.5fr;
+      grid-template-rows: 90px auto min-content auto auto;
     }
+    
   }
 
   .fiche_header_titres {
-    
+    //background-color: rgba(255, 166, 0, 0.674);
+
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1;
       grid-row: 1;
@@ -523,6 +483,8 @@
     display: grid;
     align-content: start;
     gap: 0.75rem;
+    padding-right: 10px;
+    padding-bottom: 10px;
     h1 {
       font-size: 55px;
       @media (min-width: 0px) and (max-width: 600px) {
@@ -574,10 +536,10 @@
     
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 1 / 4;
-      grid-row: 2 / 4; 
+      grid-row: 1 / 4; 
     }
     @media (min-width: 600px) {
-      grid-column: 3 / 5;
+      grid-column: 2;
       grid-row: 1 / 5;
     }
     overflow: hidden;
@@ -587,20 +549,25 @@
   }
 
   .fiche_header_infos {
-
+    background-color: var(--c-text);
     @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;
+      grid-column: 2;
+      grid-row: 5;
     }
     display: grid;
     align-content: center;
     justify-content: end;
-    
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    padding-left: 10px;
+    width: 96%;
+    margin-top: -18px;
     @media (min-width: 0px) and (max-width: 700px) {
       gap: 7px;  
     }
@@ -611,22 +578,117 @@
     text-align: right;
     .fiche_header_infos_genre {
       font-weight: 900;
-      
     }
+    .programme_list {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 20px;
+        row-gap: 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+      .programme_item {
+        flex: 1 0 auto;
+        max-width: 100%;
+        background-color: var(--c-surface);
+        padding-top: 14px;
+        padding-right: 20px;
+        padding-left: 18px;
+        padding-bottom: 10px;
+      }
   }
-  .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_header_distrib_wp {
+      background-color: var(--c-backgroud-brandreverse);
+      grid-column: 1;
+      grid-row: 3/5;
+      .programme_list {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 20px;
+        row-gap: 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+      .programme_item {
+        flex: 1 0 200px;
+        background-color: var(--c-surface);
+        padding-top: 14px;
+        padding-right: 20px;
+        padding-left: 18px;
+        padding-bottom: 10px;
+      }
   }
+  .fiche_header_representation_wp {
+    //background-color: aqua;
+    grid-column: 1;
+    grid-row: 5;
+    display: flex;
+    flex-wrap: wrap;
+    align-self: start;
+    column-gap: 20px;
+    row-gap: 20px;
+    padding-top: 20px;
+    padding-right: 20px;
+    padding-left: 20px;
+    @media (min-width: 0px) and (max-width: 600px) {
+      padding-left: 20px;
+      padding-right: 5px;
+    }
+    
+    .representation_item {
+      
+      @media (min-width: 0px) and (max-width: 500px) {
+        width: 100%;
+      }
+      @media (min-width: 500px) {
+        max-width: 215px;
+      }
+      @media (min-width: 600px) {
+        max-width: 262px;
+      }
+      @media (min-width: 700px) {
+        max-width: 300px;
+      }
+      flex: 1 1 230px;
+      display: grid;
+      border: 2px var(--c-brand_rouge) solid;
+      padding-top: 20px;
+      > * {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+      .representation_item_lieu {
+        font-size: 20px !important;
+      }
+      .representation_item_comment_wp {
+        padding-top: 5px;
+      }
+      .representation_item_comment {
+        background-color: lightgray;
+        padding: 5px;
+      }
+
+    }
+    .representation_cta {
+      color: var(--c-surface);
+      background-color: var(--c-brand_rouge);
+      margin-top: 15px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      text-align: center;
+      a {
+        font-family: var(--font-roboto);
+        font-weight: 600;
+        font-size: 18px;
+      }
+    }
+  }
+}
 
   /* ============================ */
   /* DISTRIBUTION / PROGRAMME */
@@ -872,9 +934,11 @@
   /* DESCRIPTION */
   /* ============================ */
   .concert--page {
+    margin-bottom: 80px;
     .description_wp {
       display: flex;
       justify-content: center;
+      margin-top: 80px;
       padding-bottom: 40px;
       padding-left: 10px;
       padding-right: 10px;
diff --git a/app/pages/concerts/copieconcert-[id] copie.vue b/app/pages/concerts/copieconcert-[id] copie.vue
new file mode 100644
index 0000000..09394ff
--- /dev/null
+++ b/app/pages/concerts/copieconcert-[id] copie.vue	
@@ -0,0 +1,893 @@
+<template>
+  <div class="concert--page">
+    <section v-if="pending" aria-busy="true" aria-live="polite">
+      <p>en cours de chargement...</p>
+    </section>
+
+    <template v-else>
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb :current-label="concert?.titre_concert || ''" />
+      </PageSection>
+
+
+      <section class="fiche_header_wp">
+        <div class="fiche_header_wp_gauche"></div>
+        <div class="fiche_header_wp_gauche_carre"></div>
+        <div class="fiche_header_inner">
+            <div class="fiche_header_titres">
+              <div>
+                <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
+                  {{ concert.titre_concert }}
+                </DsHeading>
+              </div>
+        
+              <div>
+                <DsText as="p" size="md" tone="default" class="" v-if="concert.sous_titre_concert">
+                  {{ concert.sous_titre_concert }}
+                </DsText>
+              </div>
+            </div>
+            <div class="fiche_header_img">
+              <DsMedia
+                v-if="illustration?.url"
+                :src="illustration.url"
+                :alt="illustration.alternativeText || concert?.titre_concert || ''"
+                ratio="3-4"
+              />
+              <div v-else class="img_placeholder" aria-hidden="true" />
+            </div>
+            <div class="fiche_header_bandeau"></div>
+            <div class="fiche_header_infos">
+              <div>
+                <DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="genreLabel">
+                  {{ genreLabel }}
+                </DsHeading>
+              </div>
+              <div v-if="concert.duree_concert">
+                <DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
+                  DURÉE {{ concert.duree_concert }}
+                </DsText>
+                <DsText as="p" tone="invert" class="" v-if="concert.duree_entracte">
+                  Entracte {{ concert.duree_entracte }}
+                </DsText>
+              </div>
+              <div v-if="concert.production_concert">
+                <DsText as="p" tone="invert" class="">
+                  {{ concert.production_concert }}
+                </DsText>
+              </div>
+            </div>
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+      </section>
+
+
+      <PageSection tone="" content-size="default">
+          <section class="fiche_details_wp">
+            <section class="distribution_wp">
+              <div v-if="directionsOndif.length">
+                <div v-for="d in directionsOndif" :key="d.id" class="distribution_item">
+                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_ondif?.length"  class="distribution_item_poste direction">
+                    {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
+                  </DsText>
+                  <DsText as="p" tone="default" size="lg" weight="bold" class="">
+                    {{ d.nom_artiste_ondif }}
+                  </DsText>
+                </div>
+              </div>
+              <div v-if="directionsInvite.length">
+                <div v-for="d in directionsInvite" :key="d.id" class="distribution_item">
+                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_invite?.length" class="distribution_item_poste direction">
+                    {{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
+                  </DsText>
+                  <DsText as="p" tone="default" size="lg" weight="bold" class="">
+                    {{ d.nom_artiste_invite }}
+                  </DsText>
+                </div>
+              </div>
+              <div v-if="artistesOndif.length">
+                <div v-for="d in artistesOndif" :key="d.id" class="distribution_item">
+                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_ondif?.length" class="distribution_item_poste">
+                    {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
+                  </DsText>
+                  <DsText as="p" tone="default" size="lg" class="">
+                    {{ d.nom_artiste_ondif }}
+                  </DsText>
+                </div>
+              </div>
+              <div v-if="artistesInvite.length">
+                <div v-for="d in artistesInvite" :key="d.id" class="distribution_item">
+                  <DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_invite?.length" class="distribution_item_poste">
+                    {{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
+                  </DsText>
+                  <DsText as="p" tone="default" size="lg" class="">
+                    {{ d.nom_artiste_invite }}
+                  </DsText>
+                </div>
+              </div>
+            </section>
+            <section class="programme_wp">
+                <div>
+                  <DsHeading as="h2" tone="invert" textcase="uppercase" class="programme_titre">
+                    PROGRAMME
+                  </DsHeading>
+                </div>
+                <div class="programme_list">
+                  <div v-for="(p, i) in programmes" :key="p.id || i" class="programme_item" >
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_compositeur">
+                      {{ p.compositeur_programme }}
+                    </DsText>
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_oeuvre">
+                      {{ p.oeuvre_programme }}
+                    </DsText>
+                    <DsText as="p" tone="default" size="lg" class="" v-if="p.piece_programme">
+                      {{ p.piece_programme }}
+                    </DsText>
+                  </div>
+                </div>
+            </section>
+            <div v-if="representations.length" class="representation_wp">
+              <div v-for="(r, i) in representations" :key="r.id || i" class="representation_item">
+
+                <div>
+                  <DsHeading as="h6" tone="default" v-if="r.date_debut_representation">
+                    {{ formatDateLong(r.date_debut_representation) }} <span v-if="r.date_fin_representation">- {{ formatDateLong(r.date_fin_representation) }}</span>
+                  </DsHeading>
+                </div>
+
+
+                <div>
+                  <DsHeading as="h5" tone="default" v-if="r.lieu_representation?.nom_lieu" class="representation_item_lieu">
+                    {{ r.lieu_representation.nom_lieu }}
+                  </DsHeading>
+                </div>
+
+                <div>
+                  <DsText as="p" tone="default" spacing="space-0" v-if="r.lieu_representation?.adresse_lieu">
+                    {{ r.lieu_representation.adresse_lieu }}
+                  </DsText>
+                </div>
+
+                <div class="representation_item_comment_wp">
+                  <DsText as="p" tone="default" spacing="space-0" v-if="r.commentaire_representation" class="representation_item_comment">
+                    {{ r.commentaire_representation }}
+                  </DsText>
+                </div>
+
+                <div class="representation_cta">
+                  <a
+                    v-if="r.lien_billetterie_representation"
+                    :href="r.lien_billetterie_representation"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Réserver
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section v-if="concert.description_concert" class="description_wp">
+            <StrapiBlocksConvert :blocks="concert?.description_concert" />
+          </section>
+
+          <section v-if="imagesConcert.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in imagesConcert"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText || concert?.titre_concert || ''"
+              />
+            </div>
+          </section>
+          
+          <section v-if="youtubeEmbeds.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in youtubeEmbeds" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.src"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+    </template>
+  </div>
+</template>
+
+<script setup>
+  import { formatDateLong } from "@/utils/dateFormat.js"
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+
+  const route = useRoute()
+
+  //////////////////////////////////////////////////////////////
+  // RÉCUPÉRATION DU CONTENU
+  //////////////////////////////////////////////////////////////
+  const concertSlug = computed(() => String(route.params.id || ''))
+  const populate = {
+    saison_concert: true,
+    genre_concert: true,
+    type_audience_concert: true,
+    direction_ondif_concert: { postes_artiste_ondif: true },
+    direction_invite_concert: { postes_artiste_invite: true },
+    artistes_ondif_concert: { postes_artiste_ondif: true },
+    artistes_invite_concert: { postes_artiste_invite: true },
+    image_illustration_concert: true,
+    images_concert: true,
+    videos_concert: true,
+    audios_concert: true,
+    programme_concert: true,
+    representation_concert: { lieu_representation: true },
+    liens_youtube_concert: true,
+  }
+
+  const filters = computed(() => ({
+    slug_concert: {
+      $eq: concertSlug.value,
+    },
+  }))
+
+  const { concerts, pending, error } = useConcerts({
+    locale: 'fr-FR',
+    populate,
+    filters,
+    limit: 1,
+    upcomingOnly: false,
+  })
+
+  const concert = computed(() => concerts.value?.[0] || {})
+
+  useSeoMeta({
+    title: () => concert.value?.titre_concert || 'Concert',
+    description: () => concert.value?.resume_concert || undefined,
+  })
+
+  const genreLabel = computed(() => {
+    const g = concert.value?.genre_concert
+
+    // Strapi relation classique
+    if (Array.isArray(g?.data)) return g.data.map(x => x?.attributes?.nom_genre).filter(Boolean).join(', ')
+    if (g?.data) return g.data?.attributes?.nom_genre || ''
+
+    // Si déjà normalisé/flat
+    if (Array.isArray(g)) return g.map(x => x?.nom_genre).filter(Boolean).join(', ')
+    return g?.nom_genre || ''
+  })
+
+  const directionsOndif = computed(() => {
+    const value = concert.value?.direction_ondif_concert
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  })
+  const directionsInvite = computed(() => {
+    const value = concert.value?.direction_invite_concert
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  })
+  const artistesOndif = computed(() => {
+    const value = concert.value?.artistes_ondif_concert
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  })
+  const artistesInvite = computed(() => {
+    const value = concert.value?.artistes_invite_concert
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  })
+  const programmes = computed(() => {
+    const value = concert.value?.programme_concert
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  })
+  const representations = computed(() => {
+      const value = concert.value?.representation_concert
+      if (!value) return []
+      return Array.isArray(value) ? value : [value]
+    })
+
+  const illustration = computed(() => {
+    const m = concert.value?.image_illustration_concert
+    if (!m) return null
+    if (m.url) return m
+    return null
+  })
+
+  const imagesConcert = computed(() => {
+    const value = concert.value?.images_concert
+    if (!value) return []
+    if (Array.isArray(value) && value[0]?.url) return value
+    return Array.isArray(value) ? value : []
+  })
+  const youtube = computed(() => {
+    const value = concert.value?.liens_youtube_concert
+    if (!value) return []
+    return Array.isArray(value) ? value : [value]
+  })
+  function getYoutubeId(url = '') {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes('youtu.be')) return u.pathname.slice(1)
+      if (u.pathname.startsWith('/shorts/')) return u.pathname.split('/')[2]
+      if (u.pathname.startsWith('/embed/')) return u.pathname.split('/')[2]
+      return u.searchParams.get('v')
+    } catch {
+      return null
+    }
+  }
+
+  const youtubeEmbeds = computed(() =>
+    youtube.value
+      .map((item) => {
+        const id = getYoutubeId(item?.lien_youtube)
+        if (!id) return null
+        return {
+          id: item.id || id,
+          src: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+        }
+      })
+      .filter(Boolean)
+  )
+</script>
+
+<style lang="scss">
+
+  .breadcrum_wp {
+    padding-top: 30px;
+  }
+
+  .fiche_header_wp {
+    display: grid;
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 510px 20px 200px;
+      padding-top: 40px;
+    }
+    @media (min-width: 600px) {
+      grid-template-columns: minmax(10px, 10px) 580px 0px;
+      grid-template-rows: 40px 280px 20px 230px;
+    }
+    @media (min-width: 700px) {
+      grid-template-columns: minmax(10px, 10px) 660px 0px;
+      grid-template-rows: 70px 250px 90px 300px;
+    }
+    @media (min-width: 800px) {
+      grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
+      grid-template-rows: 60px 280px 70px 300px;
+    }   
+    @media (min-width: 900px) {
+      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
+      grid-template-rows: 90px 340px 100px 250px;
+    }
+    @media (min-width: 1000px) {
+      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
+      grid-template-rows: 90px 340px 120px 270px;
+    }
+    @media (min-width: 1100px) {
+      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
+      grid-template-rows: 90px 340px 140px 290px;
+    }
+    @media (min-width: 1200px) {
+      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1300px) {
+      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1400px) {
+      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1500px) {
+      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+  }
+  .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;
+    }
+    background-color: var(--c-backgroud-black);
+  }
+  .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/5;
+    }
+    @media (min-width: 600px) {
+      grid-column: 2;
+      grid-row: 1/5;
+    }
+    display: grid;
+    
+    @media (min-width: 0px) and (max-width: 600px) {
+      grid-template-columns: 4fr 1fr 0.5fr;
+      grid-template-rows: auto 510px 20px 200px; 
+    }
+    @media (min-width: 600px) {
+      width: 575px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 40px 280px 20px 230px;
+    }
+    @media (min-width: 700px) {
+      width: 675px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 70px 250px 90px 300px;
+    }
+    @media (min-width: 800px) {
+      width: 780px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 60px 280px 70px 300px;
+    }   
+    @media (min-width: 900px) {
+      width: 860px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 100px 250px;
+    }
+    @media (min-width: 1000px) {
+      width: 950px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 120px 270px;
+    }
+    @media (min-width: 1100px) {
+      width: 1020px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 140px 290px;
+    }
+    @media (min-width: 1200px) {
+      width: 1100px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1300px) {
+      width: 1200px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 330px;
+    }
+    @media (min-width: 1400px) {
+      width: 1300px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1500px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1600px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1700px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+    @media (min-width: 1800px) {
+      width: 1400px;
+      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-rows: 90px 340px 160px 380px;
+    }
+  }
+
+  .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;
+    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 / 4; 
+    }
+    @media (min-width: 600px) {
+      grid-column: 3 / 5;
+      grid-row: 1 / 5;
+    }
+    overflow: hidden;
+    .ds-media {
+      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);
+  }
+
+  /* ============================ */
+  /* DISTRIBUTION / PROGRAMME */
+  /* ============================ */
+  .fiche_details_wp {
+    .distribution_wp {
+      padding-top: 50px;
+      padding-bottom: 50px;
+      padding-left: 20px;
+      .distribution_item {
+        display: flex;
+        .distribution_item_poste {
+          padding-right: 10px;
+          font-weight: 200;
+        }
+        .direction {
+          font-weight: 400;
+        }
+      }
+    }
+    .programme_wp {
+
+      background-color: var(--c-backgroud-brandreverse);
+      margin-bottom: 70px;
+      padding-top: 50px;
+      padding-right: 30px;
+      padding-left: 50px;
+      @media (max-width: 599px) {
+        padding-left: 40px;
+      }
+      padding-bottom: 50px;
+
+      /* DÉCALAGE DU BLOC VERS LA DROITE */
+      position: relative;
+      
+      @media (min-width: 0px) and (max-width: 700px) {
+        width: 89vw;
+        left: 5%;
+      }
+      @media (min-width: 700px) {
+        width: 67vw;
+        left: 30%;
+      }
+      @media (min-width: 800px) {
+        width: 50vw;
+        left: 49%;
+      }
+      transform: translateX(0px);
+      margin-left: 0px;
+      margin-right: 0px;
+      box-sizing: border-box;
+      display: block;
+      justify-content: initial;
+      align-items: initial;
+
+      .programme_titre {
+        padding-bottom: 20px;
+      }
+      .programme_list {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 20px;
+        row-gap: 20px;
+
+      }
+      .programme_item {
+        flex: 1 0 200px;
+
+        background-color: var(--c-surface);
+        padding-top: 14px;
+        padding-right: 20px;
+        padding-left: 18px;
+        padding-bottom: 10px;
+      }
+
+    }
+  }
+
+  /* ============================ */
+  /* REPRÉSENTATIONS */
+  /* ============================ */
+  .representation_wp {
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: center; */
+    column-gap: 30px;
+    row-gap: 30px;
+    padding-bottom: 70px;
+    @media (min-width: 0px) and (max-width: 600px) {
+      padding-left: 20px;
+      padding-right: 5px;
+    }
+    
+    .representation_item {
+      
+      @media (min-width: 0px) and (max-width: 500px) {
+        width: 100%;
+      }
+      @media (min-width: 500px) {
+        max-width: 215px;
+      }
+      @media (min-width: 600px) {
+        max-width: 262px;
+      }
+      @media (min-width: 700px) {
+        max-width: 300px;
+      }
+      flex: 1 1 300px;
+      display: grid;
+      border: 2px var(--c-brand_rouge) solid;
+      padding-top: 20px;
+      > * {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+      .representation_item_comment_wp {
+        padding-top: 5px;
+      }
+      .representation_item_comment {
+        background-color: lightgray;
+        padding: 5px;
+      }
+
+    }
+    .representation_cta {
+      color: var(--c-surface);
+      background-color: var(--c-brand_rouge);
+      margin-top: 15px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      text-align: center;
+      a {
+        font-family: var(--font-roboto);
+        font-weight: 600;
+        font-size: 18px;
+      }
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+  .img-gallery_wp {
+      padding-bottom: 50px;
+  }
+
+  .img-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 502px));
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 10px;
+    width: 100%;
+  }
+
+  .img-gallery > * {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 5px;
+  }
+
+  .img-gallery :deep(.ds-media) {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: transparent;
+  }
+
+  .img-gallery :deep(.ds-media__img) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .img-gallery :deep(.ds-media__img:hover) {
+    transform: scale(1.02);
+  }
+
+  @media (max-width: 1100px) {
+    .img-gallery {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+  }
+
+  @media (max-width: 820px) {
+    .img-gallery {
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 0.75rem;
+    }
+  }
+
+  @media (max-width: 520px) {
+    .img-gallery {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .youtube_wp {
+    margin-bottom: 70px;
+  }
+  .youtube-list {
+    display: grid;
+    justify-content: center;
+    /* flex-wrap: wrap; */
+    gap: 20px;
+  }
+  .youtube-item {
+    @media (min-width: 0px) and (max-width: 300px) {
+      min-width: 290px;
+    }
+
+    @media (min-width: 300px) {
+      min-width: 298px;
+    }
+
+    @media (min-width: 400px) {
+      min-width: 398px;
+    }
+    @media (min-width: 500px) {
+      min-width: 480px;
+    }
+    @media (min-width: 600px) {
+      min-width: 580px;
+    }
+    @media (min-width: 700px) {
+      min-width: 670px;
+    }
+  }
+
+  .youtube-item iframe {
+    aspect-ratio: 16 / 9;
+    border: 0;
+  }
+
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  /* ============================ */
+  /* DESCRIPTION */
+  /* ============================ */
+  .concert--page {
+    .description_wp {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 40px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 570px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
+
+
+
+
+</style>
diff --git a/app/pages/index copie 2.vue b/app/pages/index copie 2.vue
deleted file mode 100644
index 0a6f99b..0000000
--- a/app/pages/index copie 2.vue	
+++ /dev/null
@@ -1,510 +0,0 @@
-<template>
-  <div>
-
-    <!-- ================== -->
-    <!-- PROCHAIN CONCERTS -->
-     <!-- ================== -->
-
-    <!-- Fond noir -->
-    <PageSection tone="dark" content-size="default">
-      <SectionTitle tone="invert" pad="md">
-        CONCERTS À VENIR …
-      </SectionTitle>
-    </PageSection>
-
-    <!-- Listes des prochains conncerts -->
-    <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
-      <ConcertCardList>
-        <ConcertCard
-          v-for="c in concerts"
-          :key="c.id"
-          :id="c.slug_concert"
-          :title="c.titre_concert"
-          :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
-          :dateISO="c.representation_concert?.[0]?.date_debut_representation"
-          :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
-          :description="c.resume_concert"
-          :imageUrl="c.image_illustration_concert?.url"
-          :imageAlt="c.image_illustration_concert?.alternativeText"
-          :href="`/concerts/concert-${c.slug_concert}?from=agenda`"
-        />
-      </ConcertCardList>
-    </PageSection>
-
-
-    <PageSection tone="dark" padded_size="md" content-size="default" padb="xs" class="theme_tao photo_orchestre_wp remonter_bloc_dessous">
-      <SectionContent>
-          <SectionTitle tone="invert" pad="xs">
-            L’ORCHESTRE NATIONAL D'ÎLE-DE-FRANCE
-          </SectionTitle>
-          
-          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="photo_orchestre_img"/>
-
-      </SectionContent>
-
-      <SectionContent pad="xs" class="photo_orchestre_cta">
-        <DsButtonArrow to="/" variant="invert">
-            Découvrir les musiciens
-        </DsButtonArrow>
-      </SectionContent>
-
-    </PageSection>
-
-    <!-- ================== -->
-    <!-- PARTOUT ET POUR TOUS -->
-    <!-- ================== -->
-    <PageSection padded_size="md" class="theme_ppt_wp">
-      <SectionContent class="theme_ppt">
-        <!-- PHOTO DE L'ORCHETSRE -->
-        <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/>
-        <!-- PHOTO DE LA CARTE IDF -->
-        <!-- <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/> -->
-        <!-- Avec couleur rouge par dessus -->
-        <!-- <SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content"> -->
-        <!-- Sans couleur rouge par dessus -->
-        <SectionContent tone="" pad="" class="theme_ppt--content">
-          <SectionTitle tone="invert" pad="xs">
-            PARTOUT ET POUR TOUS
-          </SectionTitle>
-          <SectionContent pad="xs" class="theme_ppt--description">
-            <DsText tone="invert" size="lg" class="theme_ppt--txt" >
-              Les 95 musiciennes et musiciens proposent chaque saison plus de 120 concerts dans des salles et théâtres, des lieux culturels et des espaces atypiques de la région francilienne. Porté par une forte mission territoriale, l’orchestre s’engage à rendre la musique symphonique accessible à toutes et tous, en la faisant vivre au plus près des habitants grâce notamment à des actions culturelles, pédagogiques et participatives au cœur du territoire.
-            </DsText>
-            <!-- UN CTA / LIEN SUR L'IMAGE -->
-            <DsButtonArrow to="/" variant="invert">
-                Carte des événements
-            </DsButtonArrow>
-          </SectionContent>
-        </SectionContent>
-      </SectionContent>
-    </PageSection>
-
-    <!-- CARTES PARTOUT ET POUR TOUS -->
-    <PageSection padded_size="md" class="theme_ppt_wp">
-      <SectionContent class="theme_ppt">
-      <SquareCardBlocTextList >
-
-      </SquareCardBlocTextList>
-      </SectionContent>
-    </PageSection>
-    
-    <!-- ================== -->
-    <!-- Tous à l'Orchestre -->
-    <!-- ================== -->
-    <PageSection tone="brandreverse" padded_size="md" content-size="default" padb="xs" class="theme_tao">
-      <SectionContent>
-          <SectionTitle tone="invert" pad="xs">
-            TOUS À L’ORCHESTRE
-          </SectionTitle>
-          <SectionContent pad="xs" class="theme_tao--description">
-            <DsText tone="invert" size="lg" class="theme_tao--txt" >
-              Phrase d’accroche / explicative de cette rubrique par tous et pour tous
-            </DsText>
-          </SectionContent>
-      </SectionContent>
-
-      <!-- LES CARTES -->
-      <FilteredCards />
-    </PageSection>
-
-    <!-- ================== -->
-    <!-- ACTUALITÉS -->
-    <!-- ================== -->
-    <PageSection padded_size="md">
-      <SectionContent>
-          <SectionTitle tone="" pad="xs">
-            ACTUALITÉS
-          </SectionTitle>
-      </SectionContent>
-      <SquareCardBlocTextList >
-        <SquareCardBlocText
-          v-for="actuscard in actuscards"
-          :key="actuscard.id"
-          :id="actuscard.id"
-          :imgSrc="actuscard.imgSrc"
-          :imgAlt="actuscard.imgAlt"
-          :title="actuscard.title"
-          :description="actuscard.description"
-          :url="actuscard.url"
-        ></SquareCardBlocText>
-      </SquareCardBlocTextList>
-    </PageSection>
-
-    <!-- ================== -->
-    <!-- ONDIF MAG -->
-    <!-- ================== -->
-    <PageSection padded_size="md" position="relative" overflow="hidden" class="theme_mag">
-      <div class="decoration--mag"><img src="/img/decoration/ellipse_mag.svg" alt=""></div>
-      <SectionContent>
-          <SectionTitle tone="" pad="xs">
-            ONDIF MAG
-          </SectionTitle>
-          <SectionContent pad="xs" class="theme_tao--description">
-            <DsText tone="" size="lg" class="theme_tao--txt" >
-              Le magazine en ligne de l’Orchestre national d’Île-de-France vous invite à découvrir l’actualité des concerts de l’orchestre, des interprètes, des chefs et cheffes, de la création contemporaine et des projets de l’ONDIF sur le territoire francilien et au-delà. Portraits de musiciens, de compositeurs, d’artistes invités, décryptages d’œuvres, partez à la découverte de l’actualité musicale !
-            </DsText>
-          </SectionContent>
-      </SectionContent>
-
-      <SectionContent pad="xs">
-        <TextCardLeftList >
-          <TextCardLeft
-            v-for="magcard in magcards"
-            :key="magcard.id"
-            :id="magcard.id"
-            :title="magcard.title"
-            :description="magcard.description"
-            :url="magcard.url"
-          ></TextCardLeft>
-        </TextCardLeftList>
-      </SectionContent>
-    </PageSection>
-
-    <!-- ================== -->
-    <!-- L'ORCHESTRE POUR LES PROS -->
-    <!-- ================== -->
-    <PageSection padded_size="lg">
-      <SectionContent>
-          <SectionTitle tone="" pad="xs">
-            L'ORCHESTRE POUR LES PROS
-          </SectionTitle>
-      </SectionContent>
-
-      <SectionContent>
-        <BannierePros />
-      </SectionContent>
-    </PageSection>
-  </div>
-
-</template>
-
-<script setup>
-  import { onMounted, computed } from 'vue'
-  const runtimeConfig = useRuntimeConfig()
-  const config = useAppConfig()
-  import { clientLog } from '~/utils/clientLog'
-  import { formatDateLong } from "@/utils/dateFormat.js"
-  import SectionContent from '../components/section/SectionContent.vue'
-  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
-  import DsText from '@root/design-system/primitives/DsText.vue'
-  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
-  import DsButton from '@root/design-system/primitives/DsButton.vue'
-  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
-  import orchestre_img from '@/assets/img/illustrations/orchestre_1.jpg'
-  import ppt_img from '@/assets/img/illustrations/map_idf.jpg'
-  import DsCard from '@root/design-system/components/DsCard.vue'
-
-  // Layout utilisé
-  definePageMeta({ layout: 'default' })
-
-  const STRAPI_URL = runtimeConfig.public.strapiUrl
-  
-  // Config app (pour SEO)
-
-  useSeoMeta({
-    title: config.title
-  })
-
-
-  console.log("Bienvenue : ",config.title)
-
-
-  //--------------------
-  // DONNÉES POUR LES CONCERTS À VENIR …
-  //--------------------
-  const { concerts, refresh } = useConcerts({
-      locale: "fr-FR",
-      populate: {
-          saison_concert: true,
-          image_illustration_concert: true,
-          representation_concert: { lieu_representation: true },
-      },
-      filters: {
-          saison_concert: {
-            nom_saison: {
-                $eq: String(runtimeConfig.public.saison),
-            },
-          },
-      },
-      upcomingOnly: true,
-      limit: 3,
-  })
-
-  onMounted(() => {
-      if (!concerts.value?.length) {
-          refresh()
-      }
-  })
-
-  //--------------------
-  // DONNÉES POUR LES ACTUS
-  //--------------------
-  const actuscards = ref([
-        {
-          id: '1',
-          imgSrc: '/contenus/actu1_1.jpg',
-          imgAlt: 'Les prochains concours',
-          title: "Les prochains concours",
-          description: `Inscrivez-vous aux auditions de l'Orchestre national d'Île-de-France.
-          Un nombre maximum de caractère sera défini pour le texte qui figure dans la description de l’actu sur la page d’accueil.`,
-          url:"#",
-        },
-        {
-          id: '2',
-          imgSrc: '/contenus/actu1_1.jpg',
-          imgAlt: 'Du sur-mesure pour les petites oreilles',
-          title: "Du sur-mesure pour les petites oreilles",
-          description: `Les ateliers 0-3 ans sont de retour !`,
-          url:"#",
-        },
-        {
-          id: '3',
-          imgSrc: '/contenus/actu1_1.jpg',
-          imgAlt: "Académie d'Orchestre 2026",
-          title: "Académie d'Orchestre 2026",
-          description: `Les ateliers 0-3 ans sont de retour !`,
-          url:"#",
-        },
-        {
-          id: '4',
-          imgSrc: '/contenus/actu1_1.jpg',
-          imgAlt: "Pablo González, nouveau directeur musical pour la saison 27.28",
-          title: "Pablo González, nouveau directeur musical pour la saison 27.28",
-          description: ``,
-          url:"#",
-        },
-  ])
-
-  //--------------------
-  // DONNÉES POUR ONDIF MAG
-  //--------------------
-  const magcards = ref([
-        {
-          id: '1',
-          title: "LA FANTASTIQUE DE BERLIOZ",
-          description: `L’auteur suppose qu’un jeune musicien, affecté de cette maladie morale qu’un écrivain célèbre appelle le vague des passions, voit pour la première fois une femme qui réunit tous les charmes de l’être idéal que rêvait son imagination...`,
-          url:"#",
-        },
-        {
-          id: '2',
-          title: "L’ITALIE BAROQUE, BERCEAU DU CONCERTO",
-          description: `C’est dans l’Italie baroque du début du XVIIe siècle que naît le Stile Concertato (style concertant), et plus précisément à Venise, autour des grands maîtres qui ont œuvré à la basilique Saint-Marc, comme les Gabrieli.`,
-          url:"#",
-        },
-        {
-          id: '3',
-          title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-D’OEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE",
-          description: `Avant la première exécution publique de l’œuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait d’abord été créée dans le palais du prince Lobkowitz en mars 1807.`,
-          url:"#",
-        },
-  ])
-
-</script>
-
-<style lang="scss">
-  .remonter_concert_list {
-    transform: translateY(-170px);
-  }
-  .remonter_bloc_dessous {
-    // parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
-    margin-top: -170px;
-  }
-
-  .photo_orchestre_wp {
-    
-    .photo_orchestre_img {
-      .page-section--inner--default {
-        max-width: calc(+500px)
-      }
-      img {
-        border-radius: 50px;
-        max-height: 660px;
-      }
-    }
-    .photo_orchestre_cta {
-      padding-top: 20px;
-    }
-  }
-
-
-  //========================
-  // PARTOUT ET POUR TOUS
-  //========================
-
-  .theme_ppt_wp {
-    margin-bottom: 50px;
-    
-  }
-  .theme_ppt {
-    display: grid;
-
-    &--img {
-      grid-row: 1;
-      grid-column: 1;
-      max-height: 400px;
-    }
-    &--content {
-      grid-row: 1;
-      grid-column: 1;
-      display: grid;
-      align-items: center;
-
-    }
-    &--description {
-      max-width: 800px;
-      align-self: self-start;
-      // margin-top: 35px;
-    }
-    &--txt {
-      margin-bottom: 35px;
-    }
-  }
-
-  //========================
-  // TOUS A L'ORCHESTRE
-  //========================
-  .theme_tao {
-    margin-bottom: 50px;
-
-    &--description {
-      max-width: 800px;
-
-    }
-    &--txt {
-      margin-bottom: 35px;
-    }
-    &--filters {
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: 10px;
-      row-gap: 14px;
-
-    }
-    &--cardlist {
-      margin-top: 20px;
-      
-      &--card {
-        background-color: var(--c-surface);
-        border-radius: 10px;
-        //padding: 50px;
-        padding: clamp(18px, 2.4vw, 32px);
-        
-        &--wp {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        &--img {
-          max-width: 280px;
-          overflow: hidden;
-          img {
-            max-height: 280px;
-          }
-          @media (min-width: 400px) {
-            img {
-              max-height: 350px;
-            }
-          }
-
-        }
-        &--content {
-          max-width: 320px;
-          padding-top: 20px;
-        }
-      }
-
-
-      &--card {
-        /* base: mobile-first */
-        width: clamp(260px, 81vw, 360px);
-      }
-      @media (min-width: 400px) {
-        &--card {
-          width: clamp(260px, 80vw, 360px);
-        }
-      }
-      @media (min-width: 500px) {
-        &--card {
-          width: clamp(280px, 63vw, 460px);
-        }
-      }
-      @media (min-width: 700px) {
-        &--card {
-          width: clamp(280px, 60vw, 460px);
-        }
-      }
-      @media (min-width: 1024px) {
-        &--card {
-          width: clamp(320px, 33vw, 520px);
-        }
-      }
-      @media (min-width: 1440px) {
-        &--card {
-          width: clamp(360px, 28vw, 560px);
-        }
-      }
-    }
-
-  }
-
-  //========================
-  // MAGAZINE
-  //========================
-  .theme_mag {
-
-    
-    @media (max-width: 499px) {
-      min-height: 650px;
-    }
-    @media (min-width: 500px) {
-      min-height: 650px;
-    }
-    @media (min-width: 700px) {
-      min-height: 650px;
-    }
-    @media (min-width: 900px) {
-      min-height: 650px;
-    }
-    @media (min-width: 1100px) {
-      min-height: 650px;
-    }
-    @media (min-width: 1300px) {
-      min-height: 650px;
-    }
-    @media (min-width: 1500px) {
-      min-height: 650px;
-    }
-
-    .decoration--mag {
-      position: absolute;
-      top: -20px;
-      
-      @media (max-width: 499px) {
-        right: -150px;
-      }
-      @media (min-width: 500px) {
-        right: -120px;
-      }
-      @media (min-width: 700px) {
-        right: -100px;
-      }
-      @media (min-width: 900px) {
-        right: -100px;
-      }
-      @media (min-width: 1100px) {
-        right: -140px;
-      }
-      @media (min-width: 1300px) {
-        right: -100px;
-      }
-      @media (min-width: 1500px) {
-        right: -50px;
-      }
-      img {
-        height: 600px;
-      }
-    }
-  }
-
-
-</style>
diff --git a/app/pages/index copie.vue b/app/pages/index copie.vue
deleted file mode 100644
index 0f93607..0000000
--- a/app/pages/index copie.vue	
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-
-  <!-- Cas avec “cadre couleur” full page mais contenu dans marge -->
-  <PageSection tone="dark" padded_size="md" content-size="default">
-    <DsHeading as="h1" size="">CONCERTS À VENIR...</DsHeading>
-    <ConcertCard
-      id="1"
-      title="TITRE DU CONCERT EN MAJUSCULE"
-      lieu="Nom du lieu, éventuellement de la salle"
-      dateISO="2026-01-15T20:30:00+01:00"
-      dateLabel="Jeudi 15 janvier 2026 — 20h30"
-      description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
-      imageUrl="https://picsum.photos/id/56/500/700"
-      imageAlt="Orchestre sur scène"
-      ctaHref="/concert[id]"
-      detailsHref="/concerts/concert_template"
-    />
-  </PageSection>
-
-  <!-- Cas normal : toute la section est contenu dans les marges -->
-  <PageSection padded_size="md" content-size="default">
-    <DsHeading as="h1" size="">PAR TOUS ET POUR TOUS</DsHeading>
-  </PageSection>
-
-  <div>
-    <div>IMAGE TEST</div>
-    <NuxtImg v-if="imageUrl" :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" />
-    <!-- <img :src="imageUrl" alt="" style="max-width: 100%; height: auto;"> -->
-  </div>
-
-
-</template>
-
-<script setup>
-  import { onMounted, computed } from 'vue'
-  import { clientLog } from '~/utils/clientLog'
-  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
-
-  const runtimeConfig = useRuntimeConfig()
-
-  const STRAPI_URL = runtimeConfig.public.strapiUrl
-
-  // Config app
-  const config = useAppConfig()
-  useSeoMeta({
-    title: config.title
-  })
-
-  // On récupère le fichier le plus récent de la Media Library Strapi
-  const { data, error } = await useFetch(
-    () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
-  )
-
-  const imageUrl = computed(() => {
-    const file = data.value?.[0]
-    console.log("file : ",file)
-    if (!file) return null
-
-    // Si Strapi renvoie une URL absolue (S3/OVH)
-    if (file.url?.startsWith('http')) {
-      return file.url
-    }
-
-    // Si jamais c'était une URL relative
-    return `${STRAPI_URL}${file.url}`
-  })
-
-
-  if (error.value) {
-    console.error('Erreur en récupérant les fichiers Strapi :', error.value)
-    clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
-      endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
-      error: error.value?.message || error.value
-    })
-  }
-
-  const appConfig = useAppConfig()
-  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
-</script>
-
-<style lang="scss">
-
-
-</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 899a12f..7283c7c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -37,7 +37,7 @@
     <!-- ================== -->
     <!-- PARTOUT ET POUR TOUS -->
     <!-- ================== -->
-    <PageSection padded_size="md" class="theme_ppt_wp remonter_bloc_dessous">
+    <PageSection padded_size="" 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"/>
@@ -52,7 +52,7 @@
           </SectionTitle>
           <SectionContent pad="xs" class="theme_ppt--description">
             <DsText tone="invert" size="lg" class="theme_ppt--txt" >
-              Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos 95 musiciennes et musiciens. L'Orchestre donne 120 concerts par saison dans les 8 départements d'Île-de-France, dans des salles tradionnelles aux lieux les plus divers.
+              Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos <span class="gros_chiffres">95</span> musiciennes et musiciens. L'Orchestre donne <span class="gros_chiffres">120</span> concerts par saison dans les <span class="gros_chiffres">8</span> départements d'Île-de-France, dans des salles tradionnelles aux lieux les plus divers.
             </DsText>
             <!-- UN CTA / LIEN SUR L'IMAGE -->
             <DsButtonArrow to="/" variant="invert">
@@ -64,11 +64,23 @@
     </PageSection>
 
     <!-- CARTES PARTOUT ET POUR TOUS -->
-    <PageSection padded_size="md" class="theme_ppt_wp">
-      <SectionContent class="theme_ppt">
-      <SquareCardBlocTextList >
-
-      </SquareCardBlocTextList>
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="ppt_card in cards_ppt"
+          :key="ppt_card.id"
+          :id="ppt_card.id"
+          :imgSrc="ppt_card.imgSrc"
+          :imgAlt="ppt_card.imgAlt"
+          :title="ppt_card.title"
+          :description="ppt_card.description"
+          :url="ppt_card.url"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
       </SectionContent>
     </PageSection>
     
@@ -226,6 +238,43 @@
       }
   })
 
+
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES PARTOUT ET POUR TOUS
+  //--------------------------------------------------------------------------
+
+  const cards_ppt = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/actu1_1.jpg',
+      imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
+      title: "Le nouvelle saison arrive !",
+      description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
+      url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/actu1_1.jpg',
+      imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
+      title: "Le nouvelle saison arrive !",
+      description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
+      url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
+    },
+    {
+      id: '3',
+      imgSrc: '/contenus/actu1_1.jpg',
+      imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
+      title: "Le nouvelle saison arrive !",
+      description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
+      url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
+    },
+  ])
+
+
+
+
+
   //--------------------
   // DONNÉES POUR LES ACTUS
   //--------------------
@@ -233,35 +282,35 @@
         {
           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:"#",
+          imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
+          title: "Le nouvelle saison arrive !",
+          description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
+          url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
         },
         {
           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',
+          imgSrc: '/contenus/academie_orchestre_26.jpg',
           imgAlt: "Académie d'Orchestre 2026",
           title: "Académie d'Orchestre 2026",
           description: `Les ateliers 0-3 ans sont de retour !`,
-          url:"#",
+          url:"https://www.orchestre-ile.com/mediation/academie",
         },
+        {
+          id: '3',
+          imgSrc: '/contenus/atelier0-3ans.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: '4',
-          imgSrc: '/contenus/actu1_1.jpg',
+          imgSrc: '/contenus/pablo_gonzalez.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:"#",
+          url:"",
         },
   ])
 
@@ -297,7 +346,7 @@
   }
   .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;
+    margin-top: -110px;
   }
 
   .photo_orchestre_wp {
@@ -321,10 +370,6 @@
   // PARTOUT ET POUR TOUS
   //========================
 
-  .theme_ppt_wp {
-    margin-bottom: 50px;
-    
-  }
   .theme_ppt {
     display: grid;
 
@@ -356,94 +401,17 @@
     &--txt {
       margin-bottom: 35px;
     }
+
+  }
+  .theme_ppt_cards_wp {
+    padding-top: 30px;
+    padding-bottom: 80px;
   }
 
   //========================
   // 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
diff --git a/app/pages/mecenat/entreprises.vue b/app/pages/mecenat/entreprises.vue
index ba25ca3..7e24f77 100644
--- a/app/pages/mecenat/entreprises.vue
+++ b/app/pages/mecenat/entreprises.vue
@@ -1,13 +1,266 @@
 <template>
-  <div>
-    
+  <div class="entreprise--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_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">
+                {{entreprise_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{entreprise_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="entreprise_donnees_servies?.header_illustration?.url"
+              :src="entreprise_donnees_servies.header_illustration.url"
+              :alt="entreprise_donnees_servies.header_illustration.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
+        v-if="hasentrepriseChiffres"
+        tone=""
+        content-size="default"
+        padded_size="md"
+        class="chiffres_wp"
+      >
+          <Chiffres
+            :title="entreprise_donnees_servies?.chiffres_entreprise?.Titre"
+            :items="entrepriseChiffres"
+          />
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'entreprise-details'"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'entreprise-details'"
+          tone=""
+          content-size="default"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
+        >
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+      </template>
+
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Contacter le service mécénat"
+            nom="Pierre Brouchoud et Audrey Chauvelot"
+            poste="Responsables du mécénat"
+            mail="pierre.brouchoud@orchestre-ile.com / audrey.chauvelot@orchestre-ile.com"
+            adresse=""
+          />
+      </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'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/entreprise"
+  const populate = {
+      header_illustration: true,
+      chiffres_entreprise: {chiffres: true},
+      tiroirs_entreprise: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: entreprise, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const entreprise_donnees_servies = computed(() => entreprise.value?.[0] || {})
+
+  const entrepriseChiffres = computed(() =>
+    (entreprise.value?.[0]?.chiffres_entreprise?.chiffres || []).map((item) => ({
+      value: item.chiffre,
+      label: item.label,
+    }))
+  )
+
+  const hasentrepriseChiffres = computed(() => (
+    Boolean(entreprise_donnees_servies.value?.chiffres_entreprise?.Titre)
+    || entrepriseChiffres.value.length > 0
+  ))
+
+  const tiroirs = computed(() =>
+    (entreprise.value?.[0]?.tiroirs_entreprise || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  function getYoutubeId(url = "") {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
+      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
+      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
+      return u.searchParams.get("v")
+    } catch {
+      return null
+    }
+  }
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .entreprise--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+  }
 
-</style>
\ No newline at end of file
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+</style>
diff --git a/app/pages/mecenat/mecenes.vue b/app/pages/mecenat/mecenes.vue
index ba25ca3..8959328 100644
--- a/app/pages/mecenat/mecenes.vue
+++ b/app/pages/mecenat/mecenes.vue
@@ -1,13 +1,172 @@
 <template>
-  <div>
+  <div class="mecenes--page">
+    <!-- ================== -->
+    <!-- FILS D'ARIANE -->
+    <!-- ================== -->
+    <PageSection tone="" content-size="default" class="breadcrum_wp">
+      <Breadcrumb/>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- EN-TêTE -->
+    <!-- ================== -->
+    <section class="fiche_header_simple_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">
+              Nos mécènes
+            </DsHeading>
+          </div>
     
+          <DsText as="p" align="justify">
+              Merci à nos mécènes pour leur soutien !
+          </DsText>
+        </div>
+        <div class="fiche_header_img">
+
+        </div>
+        
+      </div>
+      <div class="fiche_header_wp_droite"></div>
+
+    </section>
+
+    <!-- ================== -->
+    <!-- AFFICHAGE DES CARDS MECENES -->
+      <!-- ================== -->
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="ppt_card in cards_ppt"
+          :key="ppt_card.id"
+          :id="ppt_card.id"
+          :imgSrc="ppt_card.imgSrc"
+          :imgAlt="ppt_card.imgAlt"
+          :title="ppt_card.title"
+          :description="ppt_card.description"
+          :url="ppt_card.url"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
+      </SectionContent>
+    </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'
+  import { computed } from 'vue'
+
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES MECENES
+  //--------------------------------------------------------------------------
+
+  const cards_ppt = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/ag2r.jpeg',
+      imgAlt: 'logo',
+      title: "Fondation d’entreprise AG2R La Mondiale pour la vitalité artistique",
+      description: `pour son soutien au programme "Mozart au cinéma"`,
+      url:"https://www.ag2rlamondiale.fr/groupe/nos-engagements/soutenir-les-arts-et-promouvoir-le-sport/fondation-pour-la-vitalite-artistique",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/bp.png',
+      imgAlt: 'logo',
+      title: "Banque populaire Rives de Paris",
+      description: `pour son soutien au projet "Enchantons l'Île-de-France" à Taverny`,
+      url:"https://www.banquepopulaire.fr/rivesparis/fondation/",
+    },
+    {
+      id: '3',
+      imgSrc: '/contenus/caisse_depot.png',
+      imgAlt: 'logo',
+      title: "Caisse des dépôts",
+      description: `pour son soutien au projet "Enchantons l'Île-de-France" à Montereau-Fault-Yonne`,
+      url:"https://www.caissedesdepots.fr/mecenat",
+    },
+    {
+      id: '4',
+      imgSrc: '/contenus/adp.png',
+      imgAlt: 'logo',
+      title: "Fondation Groupe ADP",
+      description: `pour son soutien au projet "Du sur-mesure pour les petites oreilles"`,
+      url:"https://www.parisaeroport.fr/groupe/rse/fondation",
+    },
+    {
+      id: '5',
+      imgSrc: '/contenus/norma.jpeg',
+      imgAlt: 'logo',
+      title: "Cabinet Norma Avocats",
+      description: `pour son mécénat de compétence`,
+      url:"https://www.norma-avocats.com/",
+    },
+  ])
+
+
+
+
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .mecenes--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+    .theme_ppt_cards_wp {
+      margin-top: -390px;
 
-</style>
\ No newline at end of file
+      padding-top: 30px;
+      padding-bottom: 80px;
+      img {
+        object-fit: contain;
+      }
+    }
+    @media (max-width: 599px) {
+      .theme_ppt_cards_wp {
+        margin-top: -620px;
+      }
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/mecenat/particuliers.vue b/app/pages/mecenat/particuliers.vue
index ba25ca3..9959cfe 100644
--- a/app/pages/mecenat/particuliers.vue
+++ b/app/pages/mecenat/particuliers.vue
@@ -1,13 +1,239 @@
 <template>
-  <div>
-    
+  <div class="particulier--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_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">
+                {{particulier_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{particulier_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="particulier_donnees_servies?.header_illustration?.url"
+              :src="particulier_donnees_servies.header_illustration.url"
+              :alt="particulier_donnees_servies.header_illustration.alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'particulier-details'"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'particulier-details'"
+          tone=""
+          content-size="default"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
+        >
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+      </template>
+
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Contacter le service mécénat"
+            nom="Audrey Chauvelot"
+            poste="Chargée du mécénat"
+            mail="audrey.chauvelot@orchestre-ile.com"
+            adresse=""
+          />
+      </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'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/particulier"
+  const populate = {
+      header_illustration: true,
+      tiroirs_particulier: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: particulier, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const particulier_donnees_servies = computed(() => particulier.value?.[0] || {})
+
+  const tiroirs = computed(() =>
+    (particulier.value?.[0]?.tiroirs_particulier || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  function getYoutubeId(url = "") {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
+      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
+      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
+      return u.searchParams.get("v")
+    } catch {
+      return null
+    }
+  }
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .particulier--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+  }
 
-</style>
\ No newline at end of file
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/mecenat/projets.vue b/app/pages/mecenat/projets.vue
index da75075..dd9fbfc 100644
--- a/app/pages/mecenat/projets.vue
+++ b/app/pages/mecenat/projets.vue
@@ -62,7 +62,7 @@
       <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
       <!-- ================== -->
       <template v-for="(t, index) in tiroirs" :key="index">
-        <PageSection :content="false">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
           <Decalage
             :tone="t.decalage_couleur"
             title-tone="invert"
@@ -130,6 +130,7 @@
 et de la programmation jeune public"
             numero="01 41 79 03 43"
             mail="vanessa.gasztowtt@orchestre-ile.com"
+            adresse=""
           />
       </PageSection>
 
@@ -165,33 +166,11 @@ et de la programmation jeune public"
       limit: 1,
     }
   )
-  console.log("projets:", projets.value)
-  watchEffect(() => {
-    console.log("client ?", import.meta.client)
-    console.log("server ?", import.meta.server)
-    console.log("pending:", pending.value)
-    console.log("error:", error.value)
-    console.log("projets:", projets.value)
-  })
-
-  watchEffect(() => {
-    if (!pending.value && projets.value?.length) {
-      console.log("projets dans le watch effect:", projets.value)
-      console.log("projets header_titre :", projets.value[0].header_titre)
-      console.log("projets illustration url :", projets.value[0].header_illustration?.url)
-      
-    }
-  })
-
-  console.log("projets header_titre :", projets.value?.[0]?.header_titre)
 
   // ======================================
   // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
   // ======================================
   const projets_donnees_servies = computed(() => projets.value?.[0] || {})
-  watchEffect(() => {
-    console.log("projets_donnees_servies JSON:", JSON.stringify(projets_donnees_servies.value, null, 2))
-  })
 
   const projetsChiffres = computed(() =>
     (projets.value?.[0]?.chiffres_projets?.chiffres || []).map((item) => ({
@@ -239,11 +218,6 @@ et de la programmation jeune public"
     }))
   )
 
-  watchEffect(() => {
-    console.log("projetsChiffres JSON:", JSON.stringify(projetsChiffres.value, null, 2))
-    console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
-  })
-
 
   function getYoutubeId(url = "") {
     try {
@@ -271,8 +245,7 @@ et de la programmation jeune public"
     .fiche_description {
       display: flex;
       justify-content: center;
-      padding-top: 10px;
-      padding-bottom: 70px;
+      padding-bottom: 10px;
       padding-left: 10px;
       padding-right: 10px;
       > * {
diff --git a/app/pages/mecenat/valeurs.vue b/app/pages/mecenat/valeurs.vue
index 12e1f74..cb644de 100644
--- a/app/pages/mecenat/valeurs.vue
+++ b/app/pages/mecenat/valeurs.vue
@@ -56,7 +56,7 @@
       <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
       <!-- ================== -->
       <template v-for="(t, index) in tiroirs" :key="index">
-        <PageSection :content="false">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
           <Decalage
             :tone="t.decalage_couleur"
             title-tone="invert"
@@ -111,22 +111,6 @@
         </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>
 
@@ -159,33 +143,11 @@ et de la programmation jeune public"
       limit: 1,
     }
   )
-  console.log("valeurs:", valeurs.value)
-  watchEffect(() => {
-    console.log("client ?", import.meta.client)
-    console.log("server ?", import.meta.server)
-    console.log("pending:", pending.value)
-    console.log("error:", error.value)
-    console.log("valeurs:", valeurs.value)
-  })
-
-  watchEffect(() => {
-    if (!pending.value && valeurs.value?.length) {
-      console.log("valeurs dans le watch effect:", valeurs.value)
-      console.log("valeurs header_titre :", valeurs.value[0].header_titre)
-      console.log("valeurs illustration url :", valeurs.value[0].header_illustration[0].url)
-      
-    }
-  })
-
-  console.log("valeurs header_titre :", valeurs.value?.[0]?.header_titre)
 
   // ======================================
   // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
   // ======================================
   const valeurs_donnees_servies = computed(() => valeurs.value?.[0] || {})
-  watchEffect(() => {
-    console.log("valeurs_donnees_servies JSON:", JSON.stringify(valeurs_donnees_servies.value, null, 2))
-  })
 
   const valeursChiffres = computed(() =>
     (valeurs.value?.[0]?.chiffres_valeurs?.chiffres || []).map((item) => ({
@@ -228,12 +190,6 @@ et de la programmation jeune public"
     }))
   )
 
-  watchEffect(() => {
-    console.log("valeursChiffres JSON:", JSON.stringify(valeursChiffres.value, null, 2))
-    console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
-  })
-
-
   function getYoutubeId(url = "") {
     try {
       const u = new URL(url)
@@ -260,8 +216,7 @@ et de la programmation jeune public"
     .fiche_description {
       display: flex;
       justify-content: center;
-      padding-top: 10px;
-      padding-bottom: 70px;
+      padding-bottom: 10px;
       padding-left: 10px;
       padding-right: 10px;
       > * {
diff --git a/app/pages/mediation/academie.vue b/app/pages/mediation/academie.vue
new file mode 100644
index 0000000..d2d5f7c
--- /dev/null
+++ b/app/pages/mediation/academie.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="academie--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_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">
+                {{academie_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{academie_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="academie_donnees_servies?.header_illustration?.url"
+              :src="academie_donnees_servies.header_illustration.url"
+              :alt="academie_donnees_servies.header_illustration.alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'academie-details'"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'academie-details'"
+          tone=""
+          content-size="default"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
+        >
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+      </template>
+
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Renseignements Académie d'Orchestre 2026"
+            nom="Zoë Crampon"
+            poste="Service action culturelle"
+            numero="06 82 73 65 01"
+            mail="zoe.crampon@orchestre-ile.com"
+            adresse="Orchestre national d’Île-de-France, Service action culturelle, 19, rue des Écoles, 94140 Alfortville"
+          />
+      </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'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/academie"
+  const populate = {
+      header_illustration: true,
+      tiroirs_academie: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: academie, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const academie_donnees_servies = computed(() => academie.value?.[0] || {})
+
+  const tiroirs = computed(() =>
+    (academie.value?.[0]?.tiroirs_academie || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  function getYoutubeId(url = "") {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
+      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
+      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
+      return u.searchParams.get("v")
+    } catch {
+      return null
+    }
+  }
+
+</script>
+
+<style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .academie--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/mediation/amateurs.vue b/app/pages/mediation/amateurs.vue
deleted file mode 100644
index ba25ca3..0000000
--- a/app/pages/mediation/amateurs.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/app/pages/mediation/chantons.vue b/app/pages/mediation/chantons.vue
index 7282741..8dca01b 100644
--- a/app/pages/mediation/chantons.vue
+++ b/app/pages/mediation/chantons.vue
@@ -1,13 +1,241 @@
 <template>
-  <div>
-    Chantons avec l'Orchestre : En cours de construction
+  <div class="chantons--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_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">
+                {{chantons_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{chantons_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="chantons_donnees_servies?.header_illustration?.url"
+              :src="chantons_donnees_servies.header_illustration.url"
+              :alt="chantons_donnees_servies.header_illustration.alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'chantons-details'"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'chantons-details'"
+          tone=""
+          content-size="default"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
+        >
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+      </template>
+
+
+      <!-- ================== -->
+      <!-- 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"
+            adresse=""
+          />
+      </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'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/chantons"
+  const populate = {
+      header_illustration: true,
+      tiroirs_chantons: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: chantons, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const chantons_donnees_servies = computed(() => chantons.value?.[0] || {})
+
+  const tiroirs = computed(() =>
+    (chantons.value?.[0]?.tiroirs_chantons || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  function getYoutubeId(url = "") {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
+      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
+      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
+      return u.searchParams.get("v")
+    } catch {
+      return null
+    }
+  }
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .chantons--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+  }
 
-</style>
\ No newline at end of file
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/mediation/insertion-pro.vue b/app/pages/mediation/insertion-pro.vue
deleted file mode 100644
index dd7c2d1..0000000
--- a/app/pages/mediation/insertion-pro.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    Partenariat Grandes Écoles : En cours de construction
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/app/pages/mediation/scolaires copie.vue b/app/pages/mediation/partenariat-grandes-ecoles.vue
similarity index 69%
rename from app/pages/mediation/scolaires copie.vue
rename to app/pages/mediation/partenariat-grandes-ecoles.vue
index a54e5b5..ea256a3 100644
--- a/app/pages/mediation/scolaires copie.vue	
+++ b/app/pages/mediation/partenariat-grandes-ecoles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scolaire--page">
+  <div class="insertion--page">
       <!-- ================== -->
       <!-- FILS D'ARIANE -->
       <!-- ================== -->
@@ -17,19 +17,19 @@
           <div class="fiche_header_titres">
             <div>
               <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
-                {{scolaire_donnees_servies.header_titre}}
+                {{insertion_donnees_servies.header_titre}}
               </DsHeading>
             </div>
       
             <DsText as="p" align="justify">
-                {{scolaire_donnees_servies.header_text}}
+                {{insertion_donnees_servies.header_text}}
             </DsText>
           </div>
           <div class="fiche_header_img">
             <DsMedia
-              v-if="scolaire_donnees_servies?.header_illustration?.[0]?.url"
-              :src="scolaire_donnees_servies.header_illustration[0].url"
-              :alt="scolaire_donnees_servies.header_illustration[0].alternativeText || ''"
+              v-if="insertion_donnees_servies?.header_illustration?.url"
+              :src="insertion_donnees_servies.header_illustration.url"
+              :alt="insertion_donnees_servies.header_illustration.alternativeText || ''"
               fit="cover"
               ratio="square"
             />
@@ -42,48 +42,35 @@
 
       </section>
 
-      <!-- ================== -->
-      <!-- CHIFFRES -->
-      <!-- ================== -->
-      <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
-          <Chiffres
-            :title= "scolaire_donnees_servies?.chiffres_scolaires?.[0]?.Titre"
-            :items="scolairesChiffres"
-          />
-      </PageSection>
-
       <!-- ================== -->
       <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
       <!-- ================== -->
       <template v-for="(t, index) in tiroirs" :key="index">
-        <PageSection :content="false">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
           <Decalage
             :tone="t.decalage_couleur"
             title-tone="invert"
             :position="t.decalage_sens"
             button-tone="invert"
-            :ensavoirplus-target="`texte_cache_${index + 3}`"
-            ensavoirplus-group="scolaires-details"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'insertion-details'"
           >
             <template #title>
               {{ t.decalage_titre }}
             </template>
-            <DsText as="p" tone="invert" align="justify">
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
               {{ t.decalage_texte }}
             </DsText>
           </Decalage>
         </PageSection>
         <PageSection
           :id="`texte_cache_${index + 3}`"
-          data-ensavoirplus-group="scolaires-details"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'insertion-details'"
           tone=""
           content-size="default"
-          padded_size="md"
-          class="decalage_ensavoirplus--hidden"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
         >
-          <SectionContent class="description_wp">
-            <StrapiBlocksConvert :blocks="t.tiroir_description" />
-          </SectionContent>
           <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
             <div class="img-gallery">
               <DsMedia
@@ -94,6 +81,9 @@
               />
             </div>
           </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
           <section v-if="t.tiroir_videos.length" class="youtube_wp">
             <div class="youtube-list">
               <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
@@ -124,6 +114,7 @@
 et de la programmation jeune public"
             numero="01 41 79 03 43"
             mail="vanessa.gasztowtt@orchestre-ile.com"
+            adresse=""
           />
       </PageSection>
 
@@ -140,18 +131,17 @@ et de la programmation jeune public"
   // RÉCUPÉRATION DES DONNÉES DANS STRAPI
   // ======================================
 
-  const endpoint = "/api/__strapi__/scolaires"
+  const endpoint = "/api/__strapi__/insertion"
   const populate = {
       header_illustration: true,
-      chiffres_scolaires: {chiffres: true},
-      tiroirs_scolaires: {
+      tiroirs_grandes_ecoles: {
         decalage_parametres: true,
         tiroir_galerie: true,
         tiroir_videos: true,
       },
   }
 
-  const { items: scolaires, pending, error } = useStrapi(
+  const { items: insertion, pending, error } = useStrapi(
     endpoint,
     {
       locale: "fr-FR",
@@ -159,45 +149,17 @@ et de la programmation jeune public"
       limit: 1,
     }
   )
-  console.log("scolaires:", scolaires.value)
-  watchEffect(() => {
-    console.log("client ?", import.meta.client)
-    console.log("server ?", import.meta.server)
-    console.log("pending:", pending.value)
-    console.log("error:", error.value)
-    console.log("scolaires:", scolaires.value)
-  })
-
-  watchEffect(() => {
-    if (!pending.value && scolaires.value?.length) {
-      console.log("scolaires dans le watch effect:", scolaires.value)
-      console.log("scolaires header_titre :", scolaires.value[0].header_titre)
-      console.log("scolaires illustration url :", scolaires.value[0].header_illustration[0].url)
-      
-    }
-  })
-
-  console.log("scolaires header_titre :", scolaires.value?.[0]?.header_titre)
 
   // ======================================
   // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
   // ======================================
-  const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
-  watchEffect(() => {
-    console.log("scolaire_donnees_servies JSON:", JSON.stringify(scolaire_donnees_servies.value, null, 2))
-  })
-
-  const scolairesChiffres = computed(() =>
-    (scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
-      value: item.chiffre,
-      label: item.label,
-    }))
-  )
+  const insertion_donnees_servies = computed(() => insertion.value?.[0] || {})
 
   const tiroirs = computed(() =>
-    (scolaires.value?.[0]?.tiroirs_scolaires || []).map((tiroir_item) => ({
+    (insertion.value?.[0]?.tiroirs_grandes_ecoles || []).map((tiroir_item) => ({
       decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
       decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
       decalage_sens:
         tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
       decalage_couleur:
@@ -228,12 +190,6 @@ et de la programmation jeune public"
     }))
   )
 
-  watchEffect(() => {
-    console.log("scolairesChiffres JSON:", JSON.stringify(scolairesChiffres.value, null, 2))
-    console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
-  })
-
-
   function getYoutubeId(url = "") {
     try {
       const u = new URL(url)
@@ -252,14 +208,32 @@ et de la programmation jeune public"
   // =======================
   // SPÉCIFIQUE À CETTE PAGE
   // =======================
-  .scolaire--page {
+  .insertion--page {
     .chiffres_wp {
-      background-color: var(--c-background-jaune);
+      background-color: var(--c-background-vert);
       margin-bottom: 50px;
     }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
     .contact_spe_wp {
       background-color: var(--c-background-jaune-clair);
-      margin-bottom: 20px;
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+    .strapi-blocks {
+      h1 {
+        color: var(--c-bleu);
+      }
     }
   }
 
@@ -267,4 +241,6 @@ et de la programmation jeune public"
   /* GALERIES */
   /* ============================ */
 
+
+
 </style>
diff --git a/app/pages/mediation/petite-enfance.vue b/app/pages/mediation/petite-enfance.vue
index ba25ca3..d94d4a5 100644
--- a/app/pages/mediation/petite-enfance.vue
+++ b/app/pages/mediation/petite-enfance.vue
@@ -1,13 +1,241 @@
 <template>
-  <div>
-    
+  <div class="enfance--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_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">
+                {{enfance_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{enfance_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="enfance_donnees_servies?.header_illustration?.url"
+              :src="enfance_donnees_servies.header_illustration.url"
+              :alt="enfance_donnees_servies.header_illustration.alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'enfance-details'"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'enfance-details'"
+          tone=""
+          content-size="default"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
+        >
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+      </template>
+
+
+      <!-- ================== -->
+      <!-- CONTACT -->
+      <!-- ================== -->
+
+      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
+          <ContactSpecifique
+            titre="Pour développer un atelier dans votre crèche"
+            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"
+            adresse=""
+          />
+      </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'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/enfance"
+  const populate = {
+      header_illustration: true,
+      tiroirs_enfance: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: enfance, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const enfance_donnees_servies = computed(() => enfance.value?.[0] || {})
+
+  const tiroirs = computed(() =>
+    (enfance.value?.[0]?.tiroirs_enfance || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  function getYoutubeId(url = "") {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
+      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
+      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
+      return u.searchParams.get("v")
+    } catch {
+      return null
+    }
+  }
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .enfance--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+  }
 
-</style>
\ No newline at end of file
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/mediation/scolaires.vue b/app/pages/mediation/scolaires.vue
index 3a72df1..d78d417 100644
--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -124,6 +124,7 @@
 et de la programmation jeune public"
             numero="01 41 79 03 43"
             mail="vanessa.gasztowtt@orchestre-ile.com"
+            adresse=""
           />
       </PageSection>
 
@@ -159,33 +160,11 @@ et de la programmation jeune public"
       limit: 1,
     }
   )
-  console.log("scolaires:", scolaires.value)
-  watchEffect(() => {
-    console.log("client ?", import.meta.client)
-    console.log("server ?", import.meta.server)
-    console.log("pending:", pending.value)
-    console.log("error:", error.value)
-    console.log("scolaires:", scolaires.value)
-  })
-
-  watchEffect(() => {
-    if (!pending.value && scolaires.value?.length) {
-      console.log("scolaires dans le watch effect:", scolaires.value)
-      console.log("scolaires header_titre :", scolaires.value[0].header_titre)
-      console.log("scolaires illustration url :", scolaires.value[0].header_illustration[0].url)
-      
-    }
-  })
-
-  console.log("scolaires header_titre :", scolaires.value?.[0]?.header_titre)
 
   // ======================================
   // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
   // ======================================
   const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
-  watchEffect(() => {
-    console.log("scolaire_donnees_servies JSON:", JSON.stringify(scolaire_donnees_servies.value, null, 2))
-  })
 
   const scolairesChiffres = computed(() =>
     (scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
@@ -228,11 +207,6 @@ et de la programmation jeune public"
     }))
   )
 
-  watchEffect(() => {
-    console.log("scolairesChiffres JSON:", JSON.stringify(scolairesChiffres.value, null, 2))
-    console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
-  })
-
 
   function getYoutubeId(url = "") {
     try {
@@ -261,7 +235,7 @@ et de la programmation jeune public"
       display: flex;
       justify-content: center;
       padding-top: 10px;
-      padding-bottom: 70px;
+      padding-bottom: 10px;
       padding-left: 10px;
       padding-right: 10px;
       > * {
@@ -272,8 +246,14 @@ et de la programmation jeune public"
     }
     .contact_spe_wp {
       background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
       margin-bottom: 20px;
     }
+    .strapi-blocks {
+      h2 {
+        color: var(--c-bleu);
+      }
+    }
   }
 
   /* ============================ */
diff --git a/app/pages/mediation/social.vue b/app/pages/mediation/social.vue
index ba25ca3..ae3cea6 100644
--- a/app/pages/mediation/social.vue
+++ b/app/pages/mediation/social.vue
@@ -1,13 +1,246 @@
 <template>
-  <div>
-    
+  <div class="hopital--page">
+      <!-- ================== -->
+      <!-- FILS D'ARIANE -->
+      <!-- ================== -->
+      <PageSection tone="" content-size="default" class="breadcrum_wp">
+        <Breadcrumb/>
+      </PageSection>
+
+      <!-- ================== -->
+      <!-- EN-TêTE -->
+      <!-- ================== -->
+      <section class="fiche_header_simple_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">
+                {{hopital_donnees_servies.header_titre}}
+              </DsHeading>
+            </div>
+      
+            <DsText as="p" align="justify">
+                {{hopital_donnees_servies.header_text}}
+            </DsText>
+          </div>
+          <div class="fiche_header_img">
+            <DsMedia
+              v-if="hopital_donnees_servies?.header_illustration?.url"
+              :src="hopital_donnees_servies.header_illustration.url"
+              :alt="hopital_donnees_servies.header_illustration.alternativeText || ''"
+              fit="cover"
+              ratio="square"
+            />
+
+            <div v-else class="img_placeholder" aria-hidden="true" />
+          </div>
+          
+        </div>
+        <div class="fiche_header_wp_droite"></div>
+
+      </section>
+
+      <!-- ================== -->
+      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
+      <!-- ================== -->
+      <template v-for="(t, index) in tiroirs" :key="index">
+        <PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
+          <Decalage
+            :tone="t.decalage_couleur"
+            title-tone="invert"
+            :position="t.decalage_sens"
+            button-tone="invert"
+            :ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
+            :ensavoirplus-group="t.tiroir_ouvert ? undefined : 'hopital-details'"
+          >
+            <template #title>
+              {{ t.decalage_titre }}
+            </template>
+            <DsText as="p" tone="invert" :align="t.decalage_sens">
+              {{ t.decalage_texte }}
+            </DsText>
+          </Decalage>
+        </PageSection>
+        <PageSection
+          :id="`texte_cache_${index + 3}`"
+          :data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'hopital-details'"
+          tone=""
+          content-size="default"
+          padded_size=""
+          :class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
+        >
+          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
+            <div class="img-gallery">
+              <DsMedia
+                v-for="img in t.tiroir_galerie"
+                :key="img.id || img.url"
+                :src="img.url"
+                :alt="img.alternativeText"
+              />
+            </div>
+          </section>
+          <SectionContent class="fiche_description">
+            <StrapiBlocksConvert :blocks="t.tiroir_description" />
+          </SectionContent>
+          <section v-if="t.tiroir_videos.length" class="youtube_wp">
+            <div class="youtube-list">
+              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
+                <iframe
+                  :src="v.lien_youtube"
+                  title="Vidéo YouTube"
+                  loading="lazy"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                />
+              </div>
+            </div>
+          </section>
+        </PageSection>
+      </template>
+
+
+      <!-- ================== -->
+      <!-- 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"
+            adresse=""
+          />
+      </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'
+  import { computed } from 'vue'
+
+  // ======================================
+  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
+  // ======================================
+
+  const endpoint = "/api/__strapi__/hopital"
+  const populate = {
+      header_illustration: true,
+      tiroirs_hopital: {
+        decalage_parametres: true,
+        tiroir_galerie: true,
+        tiroir_videos: true,
+      },
+  }
+
+  const { items: hopital, pending, error } = useStrapi(
+    endpoint,
+    {
+      locale: "fr-FR",
+      populate,
+      limit: 1,
+    }
+  )
+
+  // ======================================
+  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
+  // ======================================
+  const hopital_donnees_servies = computed(() => hopital.value?.[0] || {})
+
+  const tiroirs = computed(() =>
+    (hopital.value?.[0]?.tiroirs_hopital || []).map((tiroir_item) => ({
+      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
+      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
+      tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
+      decalage_sens:
+        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
+      decalage_couleur:
+        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
+          ? "brand"
+          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
+            ? "brandreverse"
+            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
+              ? "jaune"
+              : "dark",
+      tiroir_description: tiroir_item.tiroir_description,
+      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
+        id: tiroir_item_img.id,
+        url: tiroir_item_img.url,
+        alt: tiroir_item_img.alternativeText,
+      })),
+      tiroir_videos: (tiroir_item.tiroir_videos || [])
+        .map((tiroir_item_video) => {
+          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
+          if (!id) return null
+
+          return {
+            id: tiroir_item_video.id || id,
+            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
+          }
+        })
+        .filter(Boolean),
+    }))
+  )
+
+  function getYoutubeId(url = "") {
+    try {
+      const u = new URL(url)
+      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
+      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
+      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
+      return u.searchParams.get("v")
+    } catch {
+      return null
+    }
+  }
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .hopital--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+    .strapi-blocks {
+      h1 {
+        color: var(--c-bleu);
+      }
+    }
+  }
 
-</style>
\ No newline at end of file
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/orchestre/artiste-[id].vue b/app/pages/orchestre/artiste-[id].vue
index 196c366..1db212c 100644
--- a/app/pages/orchestre/artiste-[id].vue
+++ b/app/pages/orchestre/artiste-[id].vue
@@ -225,287 +225,7 @@
     padding-top: 30px;
   }
 
-  .fiche_header_wp {
-    display: grid;
-    
 
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 510px 20px 200px;
-      padding-top: 40px;
-    }
-    @media (min-width: 600px) {
-      grid-template-columns: minmax(10px, 10px) 580px 0px;
-      grid-template-rows: 40px 280px 20px 230px;
-    }
-    @media (min-width: 700px) {
-      grid-template-columns: minmax(10px, 10px) 660px 0px;
-      grid-template-rows: 70px 250px 90px 300px;
-    }
-    @media (min-width: 800px) {
-      grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
-      grid-template-rows: 60px 280px 70px 300px;
-    }   
-    @media (min-width: 900px) {
-      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
-      grid-template-rows: 90px 340px 100px 250px;
-    }
-    @media (min-width: 1000px) {
-      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
-      grid-template-rows: 90px 340px 120px 270px;
-    }
-    @media (min-width: 1100px) {
-      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
-      grid-template-rows: 90px 340px 140px 290px;
-    }
-    @media (min-width: 1200px) {
-      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1300px) {
-      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1400px) {
-      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1500px) {
-      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-  }
-  .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;
-    }
-    background-color: var(--c-backgroud-black);
-  }
-  .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/5;
-    }
-    @media (min-width: 600px) {
-      grid-column: 2;
-      grid-row: 1/5;
-    }
-    display: grid;
-    
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 4fr 1fr 0.5fr;
-      grid-template-rows: auto 510px 20px 200px; 
-    }
-    @media (min-width: 600px) {
-      width: 575px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 40px 280px 20px 230px;
-    }
-    @media (min-width: 700px) {
-      width: 675px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 70px 250px 90px 300px;
-    }
-    @media (min-width: 800px) {
-      width: 780px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 60px 280px 70px 300px;
-    }   
-    @media (min-width: 900px) {
-      width: 860px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 100px 250px;
-    }
-    @media (min-width: 1000px) {
-      width: 950px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 120px 270px;
-    }
-    @media (min-width: 1100px) {
-      width: 1020px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 140px 290px;
-    }
-    @media (min-width: 1200px) {
-      width: 1100px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1300px) {
-      width: 1200px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1400px) {
-      width: 1300px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1500px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1600px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1700px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1800px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-  }
-
-  .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;
-    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 / 4; 
-    }
-    @media (min-width: 600px) {
-      grid-column: 3 / 5;
-      grid-row: 1 / 5;
-    }
-    overflow: hidden;
-    .ds-media {
-      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);
-  }
 
   /* ============================ */
   /* DISTRIBUTION / PROGRAMME */
@@ -660,48 +380,7 @@
       }
     }
   }
-  /* ============================ */
-  /* GALERIES */
-  /* ============================ */
 
-  .img-gallery_wp {
-      padding-bottom: 50px;
-  }
-
-  .img-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 520px));
-    gap: 1rem;
-    justify-content: center;
-    margin-top: 1.5rem;
-    width: 100%;
-  }
-
-  .img-gallery > * {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-  }
-
-  .img-gallery :deep(.ds-media) {
-    display: block;
-    width: 100%;
-    height: auto;
-    background: transparent;
-  }
-
-  .img-gallery :deep(.ds-media__img) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
-  }
-
-  .img-gallery :deep(.ds-media__img:hover) {
-    transform: scale(1.02);
-  }
 
   @media (max-width: 1100px) {
     .img-gallery {
diff --git a/app/pages/orchestre/artisteinvitee-[id].vue b/app/pages/orchestre/artisteinvitee-[id].vue
index 2eb8d36..0eb14d6 100644
--- a/app/pages/orchestre/artisteinvitee-[id].vue
+++ b/app/pages/orchestre/artisteinvitee-[id].vue
@@ -223,286 +223,7 @@
     padding-top: 30px;
   }
 
-  .fiche_header_wp {
-    display: grid;
-    
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 510px 20px 200px;
-      padding-top: 40px;
-    }
-    @media (min-width: 600px) {
-      grid-template-columns: minmax(10px, 10px) 580px 0px;
-      grid-template-rows: 40px 280px 20px 230px;
-    }
-    @media (min-width: 700px) {
-      grid-template-columns: minmax(10px, 10px) 660px 0px;
-      grid-template-rows: 70px 250px 90px 300px;
-    }
-    @media (min-width: 800px) {
-      grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
-      grid-template-rows: 60px 280px 70px 300px;
-    }   
-    @media (min-width: 900px) {
-      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
-      grid-template-rows: 90px 340px 100px 250px;
-    }
-    @media (min-width: 1000px) {
-      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
-      grid-template-rows: 90px 340px 120px 270px;
-    }
-    @media (min-width: 1100px) {
-      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
-      grid-template-rows: 90px 340px 140px 290px;
-    }
-    @media (min-width: 1200px) {
-      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1300px) {
-      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1400px) {
-      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1500px) {
-      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-  }
-  .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;
-    }
-    background-color: var(--c-backgroud-black);
-  }
-  .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/5;
-    }
-    @media (min-width: 600px) {
-      grid-column: 2;
-      grid-row: 1/5;
-    }
-    display: grid;
-    
-    @media (min-width: 0px) and (max-width: 600px) {
-      grid-template-columns: 4fr 1fr 0.5fr;
-      grid-template-rows: auto 510px 20px 200px; 
-    }
-    @media (min-width: 600px) {
-      width: 575px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 40px 280px 20px 230px;
-    }
-    @media (min-width: 700px) {
-      width: 675px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 70px 250px 90px 300px;
-    }
-    @media (min-width: 800px) {
-      width: 780px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 60px 280px 70px 300px;
-    }   
-    @media (min-width: 900px) {
-      width: 860px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 100px 250px;
-    }
-    @media (min-width: 1000px) {
-      width: 950px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 120px 270px;
-    }
-    @media (min-width: 1100px) {
-      width: 1020px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 140px 290px;
-    }
-    @media (min-width: 1200px) {
-      width: 1100px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1300px) {
-      width: 1200px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 330px;
-    }
-    @media (min-width: 1400px) {
-      width: 1300px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1500px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1600px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1700px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-    @media (min-width: 1800px) {
-      width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
-    }
-  }
-
-  .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;
-    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 / 4; 
-    }
-    @media (min-width: 600px) {
-      grid-column: 3 / 5;
-      grid-row: 1 / 5;
-    }
-    overflow: hidden;
-    .ds-media {
-      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);
-  }
 
   /* ============================ */
   /* DISTRIBUTION / PROGRAMME */
@@ -647,7 +368,7 @@
       display: flex;
       justify-content: center;
       padding-top: 70px;
-      padding-bottom: 70px;
+      padding-bottom: 10px;
       padding-left: 10px;
       padding-right: 10px;
       > * {
diff --git a/app/pages/orchestre/missions.vue b/app/pages/orchestre/missions.vue
index cca8c39..dc2ebd5 100644
--- a/app/pages/orchestre/missions.vue
+++ b/app/pages/orchestre/missions.vue
@@ -226,7 +226,7 @@
     display: flex;
     justify-content: center;
     padding-top: 10px;
-    padding-bottom: 70px;
+    padding-bottom: 10px;
     padding-left: 10px;
     padding-right: 10px;
     > * {
diff --git a/app/pages/orchestre/partenaires.vue b/app/pages/orchestre/partenaires.vue
index ba25ca3..982dbfc 100644
--- a/app/pages/orchestre/partenaires.vue
+++ b/app/pages/orchestre/partenaires.vue
@@ -1,13 +1,411 @@
 <template>
-  <div>
+  <div class="partenaires--page">
+    <!-- ================== -->
+    <!-- FILS D'ARIANE -->
+    <!-- ================== -->
+    <PageSection tone="" content-size="default" class="breadcrum_wp">
+      <Breadcrumb/>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- TITRE -->
+    <!-- ================== -->
+    <section class="fiche_header_titre_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">
+              Nos partenaires
+            </DsHeading>
+          </div>
+          <DsText as="p" align="justify">
+              L’Orchestre national d’Île-de-France est subventionné et missionné par le Conseil régional d’Île-de-France et la Direction régionale des Affaires Culturelles d’Île-de-France qu’il remercie pour leur soutien.
+          </DsText>
+        </div>
+      </div>
+      <div class="fiche_header_wp_droite"></div>
+    </section>
     
+    <!-- ================== -->
+    <!-- AFFICHAGE DES CARDS MECENES -->
+      <!-- ================== -->
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="card in cards_subvention"
+          :key="card.id"
+          :id="card.id"
+          :imgSrc="card.imgSrc"
+          :imgAlt="card.imgAlt"
+          :title="card.title"
+          :description="card.description"
+          :url="card.url"
+          ratio="square"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- TITRE -->
+    <!-- ================== -->
+    <section class="fiche_header_titre_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">
+              MERCI À NOS PARTENAIRES INSTITUTIONNELS ET ASSOCIATIONS
+            </DsHeading>
+          </div>
+    
+          <DsText as="p" align="justify">
+              
+          </DsText>
+        </div>
+        
+      </div>
+      <div class="fiche_header_wp_droite"></div>
+    </section>
+
+    <!-- ================== -->
+    <!-- AFFICHAGE DES CARDS INSTITUTIONNELS ET ASSOCIATIONS -->
+      <!-- ================== -->
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="card in cards_inst_ass"
+          :key="card.id"
+          :id="card.id"
+          :imgSrc="card.imgSrc"
+          :imgAlt="card.imgAlt"
+          :title="card.title"
+          :description="card.description"
+          :url="card.url"
+          ratio="5-4"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- TITRE -->
+    <!-- ================== -->
+    <section class="fiche_header_titre_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">
+              MERCI À NOS PARTENAIRES PRIVÉS
+            </DsHeading>
+          </div>
+    
+          <DsText as="p" align="justify">
+              
+          </DsText>
+        </div>
+        
+      </div>
+      <div class="fiche_header_wp_droite"></div>
+    </section>
+
+    <!-- ================== -->
+    <!-- AFFICHAGE DES CARDS PARTENAIRES PRIVÉS -->
+      <!-- ================== -->
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="card in cards_prives"
+          :key="card.id"
+          :id="card.id"
+          :imgSrc="card.imgSrc"
+          :imgAlt="card.imgAlt"
+          :title="card.title"
+          :description="card.description"
+          :url="card.url"
+          ratio="5-4"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- TITRE -->
+    <!-- ================== -->
+    <section class="fiche_header_titre_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">
+              MERCI A NOS PARTENAIRES DE L’ENSEIGNEMENT SUPERIEUR
+            </DsHeading>
+          </div>
+          <DsText as="p" align="justify">
+          </DsText>
+        </div>
+      </div>
+      <div class="fiche_header_wp_droite"></div>
+    </section>
+
+    <!-- ================== -->
+    <!-- AFFICHAGE DES CARDS PARTENAIRES PRIVÉS -->
+      <!-- ================== -->
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="card in cards_ensei_sup"
+          :key="card.id"
+          :id="card.id"
+          :imgSrc="card.imgSrc"
+          :imgAlt="card.imgAlt"
+          :title="card.title"
+          :description="card.description"
+          :url="card.url"
+          ratio="5-4"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
+      </SectionContent>
+    </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'
+  import { computed } from 'vue'
+
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES SUBVENTIONS
+  //--------------------------------------------------------------------------
+
+  const cards_subvention = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/region_idf.webp',
+      imgAlt: 'logo',
+      title: "",
+      description: ``,
+      url:"https://www.ag2rlamondiale.fr/groupe/nos-engagements/soutenir-les-arts-et-promouvoir-le-sport/fondation-pour-la-vitalite-artistique",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/prefet_idf.webp',
+      imgAlt: 'logo',
+      title: "",
+      description: ``,
+      url:"https://www.banquepopulaire.fr/rivesparis/fondation/",
+    },
+  ])
+
+
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES INSTITUTIONNELS ET ASSOCIATIONS
+  //--------------------------------------------------------------------------
+
+  const cards_inst_ass = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/musique_contemporaine.webp',
+      imgAlt: 'logo',
+      title: "Maison de la Musique Contemporaine",
+      description: ``,
+      url:"https://musiquecontemporaine.org/",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/copie_privee.webp',
+      imgAlt: 'logo',
+      title: "La copie privée",
+      description: ``,
+      url:"https://www.copieprivee.org/",
+    },
+    {
+      id: '3',
+      imgSrc: '/contenus/commision_film_idf.webp',
+      imgAlt: 'logo',
+      title: "Commission du film Île-de-France",
+      description: ``,
+      url:"https://www.filmparisregion.com/fr",
+    },
+    {
+      id: '4',
+      imgSrc: '/contenus/ircam.webp',
+      imgAlt: 'logo',
+      title: "Ircam",
+      description: ``,
+      url:"https://www.ircam.fr/",
+    },
+  ])
+
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES INSTITUTIONNELS ET ASSOCIATIONS
+  //--------------------------------------------------------------------------
+
+  const cards_prives = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/ca_idf.png',
+      imgAlt: 'logo',
+      title: "Crédit Agricole d’Île de France",
+      description: ``,
+      url:"https://www.credit-agricole.fr/",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/ag2r.jpeg',
+      imgAlt: 'logo',
+      title: "Fondation d’entreprise AG2R La Mondiale pour la vitalité artistique",
+      description: ``,
+      url:"https://www.ag2rlamondiale.fr/groupe/nos-engagements/soutenir-les-arts-et-promouvoir-le-sport/fondation-pour-la-vitalite-artistique",
+    },
+    {
+      id: '3',
+      imgSrc: '/contenus/bp.png',
+      imgAlt: 'logo',
+      title: "Banque populaire Rives de Paris",
+      description: ``,
+      url:"https://www.banquepopulaire.fr/rivesparis/fondation/",
+    },
+    {
+      id: '4',
+      imgSrc: '/contenus/caisse_depot.png',
+      imgAlt: 'logo',
+      title: "Caisse des dépôts",
+      description: ``,
+      url:"https://www.caissedesdepots.fr/mecenat",
+    },
+    {
+      id: '5',
+      imgSrc: '/contenus/adp.png',
+      imgAlt: 'logo',
+      title: "Fondation Groupe ADP",
+      description: ``,
+      url:"https://www.parisaeroport.fr/groupe/rse/fondation",
+    },
+    {
+      id: '6',
+      imgSrc: '/contenus/norma.jpeg',
+      imgAlt: 'logo',
+      title: "Cabinet Norma Avocats",
+      description: ``,
+      url:"https://www.norma-avocats.com/",
+    },
+  ])
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES ENSEIGNEMENT SUPERIEUR
+  //--------------------------------------------------------------------------
+
+  const cards_ensei_sup = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/daac.jpg',
+      imgAlt: 'logo',
+      title: "Délégation Académique aux Arts et à la Culture des académies Créteil (DAAC)",
+      description: ``,
+      url:"https://daac.ac-creteil.fr/",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/academie_versailles.png',
+      imgAlt: 'logo',
+      title: "Académie de Versailles (DAAC)",
+      description: ``,
+      url:"https://www.ac-versailles.fr/l-education-artistique-et-culturelle-121623",
+    },
+    {
+      id: '3',
+      imgSrc: '/contenus/academie_paris.png',
+      imgAlt: 'logo',
+      title: "Académie de Paris (DAAC)",
+      description: ``,
+      url:"https://www.ac-paris.fr/education-artistique-et-culturelle-122839",
+    },
+    {
+      id: '4',
+      imgSrc: '/contenus/pole_sup_93.png',
+      imgAlt: 'logo',
+      title: "Pôle Sup’93",
+      description: ``,
+      url:"https://polesup93.fr/",
+    },
+
+  ])
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .partenaires--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+    .theme_ppt_cards_wp {
+      
 
-</style>
\ No newline at end of file
+      padding-top: 30px;
+      padding-bottom: 80px;
+      img {
+        object-fit: contain;
+      }
+    }
+    .rounded-card__content {
+      margin-top: 3px !important;
+    }
+    .ds-heading--md2 {
+      font-size: 18px;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>
diff --git a/app/pages/test_header_2.vue b/app/pages/test_header_2.vue
deleted file mode 100644
index 4b905ef..0000000
--- a/app/pages/test_header_2.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="header_full_2">
-
-    <header_content img-src="@/assets/img/logos/logo_orchestre_red.svg" img-agenda-src="@/assets/img/icones/agenda_rouge.svg"/>
-    
-    <div class="obscur"></div>
-
-    <div class="header-img_cont">
-        <NuxtImg
-            src="@/assets/img/photos/orchestre_header.jpg"
-            placeholder
-            preset="full"
-            alt="L'orchestre National d'Île-de-france en concert - vue d'ensemble"
-            class="header-img"
-        />
-    </div>
-
-    <div class="header-img_text">
-        <div class="header-img_titre">ZAHO DE SAGAZAN</div>
-        <div class="header-img_description">Accompagnée par l’Orchestre national d’Île-de-France dirigé par Dylan Corlay, Zaho de Sagazan revisite les chansons de son premier album pour les plonger dans une toute nouvelle dimension !</div>
-        <div class="decouvrir"><div class="decouvrir_icone"><img src="@/assets/img/icones/fleche_gris_blanc.svg" alt="icone flèche"></div><div class="decouvrir_texte">Découvrir</div></div>
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-
-  const config = useAppConfig()
-  useSeoMeta({
-    title: config.title
-  })
-  const appConfig = useAppConfig()
-  console.log("test 3 : ",appConfig.title)
-</script>
-
-<style lang="scss">
-
-
-</style>
\ No newline at end of file
diff --git a/app/utils/dateFormat.js b/app/utils/dateFormat.js
index dd466a4..0f02478 100644
--- a/app/utils/dateFormat.js
+++ b/app/utils/dateFormat.js
@@ -11,6 +11,8 @@ export function formatDateLong(iso) {
     hour: "2-digit",
     minute: "2-digit",
     hour12: false,
-  }).format(d).replace(":", "h")
-  return `${date} — ${time}`
+  }).format(d)
+  const [hours, minutes] = time.split(":")
+  const formattedTime = minutes === "00" ? `${hours}h` : `${hours}h${minutes}`
+  return `${date} — ${formattedTime}`
 }
diff --git a/design-system/primitives/DsHeading.vue b/design-system/primitives/DsHeading.vue
index a001be5..8f8ea53 100644
--- a/design-system/primitives/DsHeading.vue
+++ b/design-system/primitives/DsHeading.vue
@@ -139,8 +139,5 @@
     &--uppercase {text-transform: uppercase;}
 
     &--info { color: var(--c-info); }
-
-
-
   }
 </style>
\ No newline at end of file
diff --git a/design-system/primitives/DsMedia.vue b/design-system/primitives/DsMedia.vue
index c411f2f..c02e7d4 100644
--- a/design-system/primitives/DsMedia.vue
+++ b/design-system/primitives/DsMedia.vue
@@ -28,6 +28,7 @@
     &--16-9 { aspect-ratio: 16 / 9; }
     &--4-3 { aspect-ratio: 4 / 3; }
     &--3-4 { aspect-ratio: 3 / 4; }
+    &--5-4 { aspect-ratio: 5 / 4; }
     &--square { aspect-ratio: 1 / 1; }
 
     .ds-media__img {
diff --git a/design-system/primitives/DsText.vue b/design-system/primitives/DsText.vue
index d3864be..657f6fc 100644
--- a/design-system/primitives/DsText.vue
+++ b/design-system/primitives/DsText.vue
@@ -118,6 +118,12 @@
     &--justify {
       text-align: justify;
     }
+    &--left {
+      text-align: right;
+    }
+    &--right {
+      text-align: left;
+    }
 
     // clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
     // Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
diff --git a/design-system/tokens/_colors.scss b/design-system/tokens/_colors.scss
index 4d76a1f..8fb2ba0 100644
--- a/design-system/tokens/_colors.scss
+++ b/design-system/tokens/_colors.scss
@@ -6,6 +6,7 @@
     --c-text-invert: #fff;
     --c-text-black-soft: #595959;
 
+
     /* Marque / accent (ex: rouge ONDIF) */
     //--c-brand_rouge: #E30613;
     --c-brand_rouge: #E20018;
@@ -13,6 +14,7 @@
     --c-brand_rouge-weak: #e3061391;
     --c-backgroud-black: #111;
     --c-backgroud-brandreverse: #ACCFCF;
+    --c-bleu: #08a5a5;
     --c-background-blanc-casse: #FCFCFC;
     --c-background-jaune: #fac020;
     --c-background-jaune-clair: #fac0201f;
diff --git a/public/contenus/academie_orchestre_26.jpg b/public/contenus/academie_orchestre_26.jpg
new file mode 100644
index 0000000..cd53b52
Binary files /dev/null and b/public/contenus/academie_orchestre_26.jpg differ
diff --git a/public/contenus/academie_paris.png b/public/contenus/academie_paris.png
new file mode 100644
index 0000000..4b2a191
Binary files /dev/null and b/public/contenus/academie_paris.png differ
diff --git a/public/contenus/academie_versailles.png b/public/contenus/academie_versailles.png
new file mode 100644
index 0000000..21ff53d
Binary files /dev/null and b/public/contenus/academie_versailles.png differ
diff --git a/public/contenus/actu1_1.jpg b/public/contenus/actu1_1.jpg
index e50f97e..b52ad6f 100644
Binary files a/public/contenus/actu1_1.jpg and b/public/contenus/actu1_1.jpg differ
diff --git a/public/contenus/adp.png b/public/contenus/adp.png
new file mode 100644
index 0000000..8120964
Binary files /dev/null and b/public/contenus/adp.png differ
diff --git a/public/contenus/ag2r.jpeg b/public/contenus/ag2r.jpeg
new file mode 100644
index 0000000..d684f8c
Binary files /dev/null and b/public/contenus/ag2r.jpeg differ
diff --git a/public/contenus/atelier0-3ans.jpg b/public/contenus/atelier0-3ans.jpg
new file mode 100644
index 0000000..8a41f7d
Binary files /dev/null and b/public/contenus/atelier0-3ans.jpg differ
diff --git a/public/contenus/bp.png b/public/contenus/bp.png
new file mode 100644
index 0000000..12d6112
Binary files /dev/null and b/public/contenus/bp.png differ
diff --git a/public/contenus/ca_idf.png b/public/contenus/ca_idf.png
new file mode 100644
index 0000000..4f7da77
Binary files /dev/null and b/public/contenus/ca_idf.png differ
diff --git a/public/contenus/caisse_depot.png b/public/contenus/caisse_depot.png
new file mode 100644
index 0000000..72ef8a8
Binary files /dev/null and b/public/contenus/caisse_depot.png differ
diff --git a/public/contenus/commision_film_idf.webp b/public/contenus/commision_film_idf.webp
new file mode 100644
index 0000000..eeb528c
Binary files /dev/null and b/public/contenus/commision_film_idf.webp differ
diff --git a/public/contenus/copie_privee.webp b/public/contenus/copie_privee.webp
new file mode 100644
index 0000000..9d92d9e
Binary files /dev/null and b/public/contenus/copie_privee.webp differ
diff --git a/public/contenus/daac.jpg b/public/contenus/daac.jpg
new file mode 100644
index 0000000..f04a2d1
Binary files /dev/null and b/public/contenus/daac.jpg differ
diff --git a/public/contenus/insta_ondif_2.jpg b/public/contenus/insta_ondif_2.jpg
index 3579cdf..12b572b 100644
Binary files a/public/contenus/insta_ondif_2.jpg and b/public/contenus/insta_ondif_2.jpg differ
diff --git a/public/contenus/insta_ondif_3.jpg b/public/contenus/insta_ondif_3.jpg
index 379cbb2..bc24b29 100644
Binary files a/public/contenus/insta_ondif_3.jpg and b/public/contenus/insta_ondif_3.jpg differ
diff --git a/public/contenus/insta_ondif_4.jpg b/public/contenus/insta_ondif_4.jpg
new file mode 100644
index 0000000..64748ca
Binary files /dev/null and b/public/contenus/insta_ondif_4.jpg differ
diff --git a/public/contenus/insta_ondif_5.jpg b/public/contenus/insta_ondif_5.jpg
new file mode 100644
index 0000000..7e60c2b
Binary files /dev/null and b/public/contenus/insta_ondif_5.jpg differ
diff --git a/public/contenus/ircam.webp b/public/contenus/ircam.webp
new file mode 100644
index 0000000..f040b02
Binary files /dev/null and b/public/contenus/ircam.webp differ
diff --git a/public/contenus/musique_contemporaine.webp b/public/contenus/musique_contemporaine.webp
new file mode 100644
index 0000000..3b28ac1
Binary files /dev/null and b/public/contenus/musique_contemporaine.webp differ
diff --git a/public/contenus/norma.jpeg b/public/contenus/norma.jpeg
new file mode 100644
index 0000000..fb7b07a
Binary files /dev/null and b/public/contenus/norma.jpeg differ
diff --git a/public/contenus/pablo_gonzalez.jpg b/public/contenus/pablo_gonzalez.jpg
new file mode 100644
index 0000000..5b11050
Binary files /dev/null and b/public/contenus/pablo_gonzalez.jpg differ
diff --git a/public/contenus/pole_sup_93.png b/public/contenus/pole_sup_93.png
new file mode 100644
index 0000000..b7b7089
Binary files /dev/null and b/public/contenus/pole_sup_93.png differ
diff --git a/public/contenus/prefet_idf.webp b/public/contenus/prefet_idf.webp
new file mode 100644
index 0000000..a03a289
Binary files /dev/null and b/public/contenus/prefet_idf.webp differ
diff --git a/public/contenus/region_idf.webp b/public/contenus/region_idf.webp
new file mode 100644
index 0000000..eddfe88
Binary files /dev/null and b/public/contenus/region_idf.webp differ
diff --git a/server/api/__strapi__/[collection].get.js b/server/api/__strapi__/[collection].get.js
index c95d3e3..4702069 100644
--- a/server/api/__strapi__/[collection].get.js
+++ b/server/api/__strapi__/[collection].get.js
@@ -10,6 +10,13 @@ const COLLECTION_MAP = {
   scolaires: "/api/scolaire",
   valeurs: "/api/valeurs",
   projet: "/api/projet",
+  entreprise: "/api/nous-soutenir-entreprise",
+  particulier: "/api/nous-soutenir-particulier",
+  enfance: "/api/enfance",
+  chantons: "/api/chantons",
+  academie: "/api/academie",
+  insertion: "/api/grandes-ecoles",
+  hopital: "/api/hopital",
 }
 
 export default defineEventHandler(async (event) => {