dev

app/assets/scss/base/_typo.scss

@@ -0,0 +1,4 @@
+.gros_chiffres {
+    font-size: var(--fs-18);
+    font-weight: var(--fw-black);
+}

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

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

app/assets/scss/component/_header_page_simple.scss

@@ -234,9 +234,9 @@
         }
         overflow: hidden;
         .ds-media {
-        @media (min-width: 600px) {
+            @media (min-width: 600px) {
-            height: 100%;
+                height: 100%;
-        }
+            }
         }
     }
 

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

app/assets/scss/main.scss

@@ -5,6 +5,7 @@
 @use 'base/button';
 @use 'base/img';
 @use 'base/fonts';
+@use 'base/typo';
 
 @use 'base/spaces';
 
@@ -17,3 +18,6 @@
 @use 'component/_header_layout';
 @use 'component/header_nav';
 @use 'component/header_page_simple';
+@use 'component/header_page_titre';
+@use 'component/_galerie_photo';
+@use 'component/fiche';

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: {
+    titre: { type: String, required: true },    
-      type: String,
+    nom: { type: String, required: true },
-      required: true
+    poste: { type: String, required: true },
-    },    
+    numero: { type: String, required: true },
-    nom: {
+    mail: { type: String, required: true },
-      type: String,
+    adresse: { type: String, required: true}
-      required: true
-    },
-    poste: {
-      type: String,
-      required: true
-    },
-    numero: {
-      type: String,
-      required: true
-    },
-    mail: {
-      type: String,
-      required: true
-    }
   })
 </script>
 

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: 'rencontre', label: 'Rencontres' },
-        { key: 'ateliers', label: 'Ateliers' },
-        { key: 'musique', label: 'Musique' },
     ]
     // 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 🎶",
+            title: "✨ Tous à l’orchestre !",
-            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>
+            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>
-            Et plus de 250 choristes rassemblés pour le "Chantons avec" Alice Swing !<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>
-            Quelle énergie ❤️`,
+            Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.<br>
-            tags: ['famille', 'ateliers', 'musique', 'lieux'],
+            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",
+            title: "✨ Ça c’est fait ! Retour sur février et mars ✨",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
+            descriptionHtml: `Ces deux derniers mois, l’Orchestre a surpris son public à chaque instant !<br>
-            tags: ['lieux', 'ateliers', 'famille'],
+            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',
+            id: 'insta-4',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
+            imgSrc: '/contenus/insta_ondif_4.jpg',
             imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
+            title: "✨ Tous à l’orchestre !",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
+            descriptionHtml: `Ces dernières semaines ont été intenses et inspirantes du côté de l’action culturelle et éducative de l’Orchestre.<br>
-            tags: ['lieux', 'ateliers', 'famille'],
+            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',
+            id: 'insta-5',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
+            imgSrc: '/contenus/insta_ondif_5.jpg',
             imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
+            title: "✨ Ça c’est fait ! Retour sur décembre et janvier ✨",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
+            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>
-            tags: ['lieux', 'ateliers', 'famille'],
+            Retour en images sur ces temps forts qui font vibrer l’Ondif ! 🎶`,
-        },
+            tags: ['rencontre'],
-        {
-            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'],
         },
     ])
 
@@ -234,7 +230,7 @@
             }
             @media (min-width: 1440px) {
                 &--card {
-                    width: clamp(360px, 28vw, 560px);
+                    width: clamp(360px, 26vw, 560px);
                 }
             }
         }

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>

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>

app/components/SquareCardBlocText.vue

@@ -8,8 +8,13 @@
 
       <!-- Content -->
       <div class="square-card__content">
-        <DsHeading as="h5" tone="default" class="square-card__title">
+        <NuxtLink v-if="url" :to="url" class="square-card__title-link">
-          {{ title }}
+          <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;

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/academie">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/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/academie">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/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>

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;

app/components/section/PageSection.vue

@@ -69,5 +69,7 @@
             }
         }
     }
-
+  .decalage-section--spaced {
+    margin-top: 50px;
+  }
 </style>

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

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

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_distrib_wp">
-            <div class="fiche_header_infos">
+              <div class="programme_list">
-              <div>
+                <template v-if="directionsOndif.length">
-                <DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="genreLabel">
+                  <div v-for="d in directionsOndif" :key="d.id" class="programme_item" >
-                  {{ genreLabel }}
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_compositeur">
-                </DsHeading>
+                      {{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
-              </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">
+                    <DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
-                      {{ p.oeuvre_programme }}
+                      {{ d.nom_artiste_ondif }}
-                    </DsText>
-                    <DsText as="p" tone="default" size="lg" class="" v-if="p.piece_programme">
-                      {{ p.piece_programme }}
                     </DsText>
                   </div>
-                </div>
+                </template>
-            </section>
+                <template v-if="directionsInvite.length">
-            <div v-if="representations.length" class="representation_wp">
+                  <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,27 +461,14 @@
     }
     @media (min-width: 1500px) {
       width: 1400px;
-      grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
+      grid-template-columns: 4fr 4fr 0.5fr;
-      grid-template-rows: 90px 340px 160px 380px;
+      grid-template-rows: 90px auto min-content auto auto;
-    }
-    @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 {
+    //background-color: rgba(255, 166, 0, 0.674);
 
     @media (min-width: 0px) and (max-width: 600px) {
       grid-column: 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-column: 2;
-      grid-row: 4;
+      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 {
 
+  .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) {
-      grid-column: 1 / 3;
+      padding-left: 20px;
-      grid-row: 4;
+      padding-right: 5px;
-      margin-top: -30px;
     }
-    @media (min-width: 600px) {
+    
-      grid-column: 1 / 4;
+    .representation_item {
-      grid-row: 4;
+      
+      @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;
+      }
     }
-    background-color: var(--c-backgroud-black);
   }
+}
 
   /* ============================ */
   /* 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;

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>

app/pages/index copie 2.vue

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

app/pages/index copie.vue

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

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">
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
-      <SectionContent class="theme_ppt">
+      <SectionContent
-      <SquareCardBlocTextList >
+        class="theme_ppt"
-
+        :style="themePptCardsBgStyle"
-      </SquareCardBlocTextList>
+      >
+      <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',
+          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: "Les prochains concours",
+          title: "Le nouvelle saison arrive !",
-          description: `Inscrivez-vous aux auditions de l'Orchestre national d'Île-de-France.
+          description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
-          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:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
-          url:"#",
         },
         {
           id: '2',
-          imgSrc: '/contenus/actu1_1.jpg',
+          imgSrc: '/contenus/academie_orchestre_26.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:"#",
+          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

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;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
 
 </style>

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;
+
+      padding-top: 30px;
+      padding-bottom: 80px;
+      img {
+        object-fit: contain;
+      }
+    }
+    @media (max-width: 599px) {
+      .theme_ppt_cards_wp {
+        margin-top: -620px;
+      }
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
 
 </style>

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;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
 
 </style>

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: 10px;
-      padding-bottom: 70px;
       padding-left: 10px;
       padding-right: 10px;
       > * {

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: 10px;
-      padding-bottom: 70px;
       padding-left: 10px;
       padding-right: 10px;
       > * {

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>

app/pages/mediation/amateurs.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss">
-
-</style>

app/pages/mediation/chantons.vue

@@ -1,13 +1,241 @@
 <template>
-  <div>
+  <div class="chantons--page">
-    Chantons avec l'Orchestre : En cours de construction
+      <!-- ================== -->
+      <!-- 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;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
 
 </style>

app/pages/mediation/insertion-pro.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    Partenariat Grandes Écoles : En cours de construction
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss">
-
-</style>

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"
+              v-if="insertion_donnees_servies?.header_illustration?.url"
-              :src="scolaire_donnees_servies.header_illustration[0].url"
+              :src="insertion_donnees_servies.header_illustration.url"
-              :alt="scolaire_donnees_servies.header_illustration[0].alternativeText || ''"
+              :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-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
-            ensavoirplus-group="scolaires-details"
+            :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"
+          padded_size=""
-          class="decalage_ensavoirplus--hidden"
+          :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_grandes_ecoles: {
-      tiroirs_scolaires: {
         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] || {})
+  const insertion_donnees_servies = computed(() => insertion.value?.[0] || {})
-  watchEffect(() => {
-    console.log("scolaire_donnees_servies JSON:", JSON.stringify(scolaire_donnees_servies.value, null, 2))
-  })
-
-  const scolairesChiffres = computed(() =>
-    (scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
-      value: item.chiffre,
-      label: item.label,
-    }))
-  )
 
   const tiroirs = computed(() =>
-    (scolaires.value?.[0]?.tiroirs_scolaires || []).map((tiroir_item) => ({
+    (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>

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;
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
 
 </style>

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);
+      }
+    }
   }
 
   /* ============================ */

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);
+      }
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
 
 </style>

app/pages/orchestre/artiste-[id].vue

@@ -225,288 +225,8 @@
     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 {

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;
       > * {

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;
     > * {

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 {
+      
+
+      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>

app/pages/test_header_2.vue

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

app/utils/dateFormat.js

@@ -11,6 +11,8 @@ export function formatDateLong(iso) {
     hour: "2-digit",
     minute: "2-digit",
     hour12: false,
-  }).format(d).replace(":", "h")
+  }).format(d)
-  return `${date} — ${time}`
+  const [hours, minutes] = time.split(":")
+  const formattedTime = minutes === "00" ? `${hours}h` : `${hours}h${minutes}`
+  return `${date} — ${formattedTime}`
 }

design-system/primitives/DsHeading.vue

@@ -139,8 +139,5 @@
     &--uppercase {text-transform: uppercase;}
 
     &--info { color: var(--c-info); }
-
-
-
   }
 </style>

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 {

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.

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;

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