dev

2026-04-12 23:25:07 +02:00
parent d8f9bb59fa
commit ef126bc177
69 changed files with 4168 additions and 1806 deletions
--- a/app/components/ContactSpecifique.vue
+++ b/app/components/ContactSpecifique.vue
@@ -9,6 +9,7 @@
          <div class="contact_spe_descripion_item contact_spe_descripion_item--poste">{{ poste }}</div>
          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ numero }}</div>
          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ mail }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ adresse }}</div>
      </div>
  </section>
 </template>
@@ -17,26 +18,12 @@
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'

  defineProps({
-    titre: {
-      type: String,
-      required: true
-    },    
-    nom: {
-      type: String,
-      required: true
-    },
-    poste: {
-      type: String,
-      required: true
-    },
-    numero: {
-      type: String,
-      required: true
-    },
-    mail: {
-      type: String,
-      required: true
-    }
+    titre: { type: String, required: true },    
+    nom: { type: String, required: true },
+    poste: { type: String, required: true },
+    numero: { type: String, required: true },
+    mail: { type: String, required: true },
+    adresse: { type: String, required: true}
  })
 </script>

--- a/app/components/FilteredCards.vue
+++ b/app/components/FilteredCards.vue
@@ -78,9 +78,7 @@
    // Variable qui contient les catégories qui permettront de filtrer
    const filters = [
        { key: 'famille', label: 'Famille' },
-        { key: 'lieux', label: 'Lieux' },
-        { key: 'ateliers', label: 'Ateliers' },
-        { key: 'musique', label: 'Musique' },
+        { key: 'rencontre', label: 'Rencontres' },
    ]
    // variable pour donner le filtre actif
    // filtre par défaut : le premier
@@ -99,49 +97,47 @@
            descriptionHtml: `Tu as moins de 28 ans ? Paie 6 € la place dès 3 concerts de l’Orchestre à la Philharmonie de Paris<br>
                🔴 Ile de France | Ministère de la culture<br>
                🎨 Agence belleville.eu`,
-            tags: ['musique','famille'],
+            tags: ['famille'],
        },
        {
            id: 'insta-2',
            imgSrc: '/contenus/insta_ondif_2.jpg',
            imgAlt: 'le titre du post',
-            title: "✨ Tous à l’orchestre ! Un début de saison qui fait vibrer l’Ondif 🎶",
-            descriptionHtml: `Des lycéens conquis par Rachmaninov aux premières rencontres à Montereau, des petites oreilles émerveillées aux ateliers de Marly-la-Ville, sans oublier la musique portée jusqu'aux hôpitaux.<br>
-            Et plus de 250 choristes rassemblés pour le "Chantons avec" Alice Swing !<br>
-            Quelle énergie ❤️`,
-            tags: ['famille', 'ateliers', 'musique', 'lieux'],
+            title: "✨ Tous à l’orchestre !",
+            descriptionHtml: `Ces dernières semaines, l’Orchestre a vibré bien au-delà de la scène, au fil d’actions culturelles et éducatives riches en échanges et en découvertes.<br>
+            Entre ateliers d’enregistrement, éveil musical, et rencontres avec les musiciens de l’orchestre, chaque instant a permis de créer du lien et de faire vivre la musique autrement.<br>
+            Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.<br>
+            Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
+            tags: ['famille'],
        },
        {
            id: 'insta-3',
            imgSrc: '/contenus/insta_ondif_3.jpg',
            imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
+            title: "✨ Ça c’est fait ! Retour sur février et mars ✨",
+            descriptionHtml: `Ces deux derniers mois, l’Orchestre a surpris son public à chaque instant !<br>
+            Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
+            Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
+            tags: ['rencontre'],
        },
        {
-            id: 'insta-3',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
+            id: 'insta-4',
+            imgSrc: '/contenus/insta_ondif_4.jpg',
            imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
+            title: "✨ Tous à l’orchestre !",
+            descriptionHtml: `Ces dernières semaines ont été intenses et inspirantes du côté de l’action culturelle et éducative de l’Orchestre.<br>
+            Entre ateliers d’enregistrement sonore, découverte de la lutherie, répétitions commentées et musique à l’hôpital, les rencontres se sont multipliées, au plus près des publics et des territoires.<br>
+            Retour en images sur ces expériences qui font vivre l’Orchestre 🎶`,
+            tags: ['famille'],
        },
        {
-            id: 'insta-3',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
+            id: 'insta-5',
+            imgSrc: '/contenus/insta_ondif_5.jpg',
            imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
-        },
-        {
-            id: 'insta-3',
-            imgSrc: '/contenus/insta_ondif_3.jpg',
-            imgAlt: 'le titre du post',
-            title: "L'Orchestre en résidence à Montereau",
-            descriptionHtml: `Notre équipe a rencontré les élèves de Montereau pour un premier atelier au Conservatoire municipal de musique Gaston Litaize`,
-            tags: ['lieux', 'ateliers', 'famille'],
+            title: "✨ Ça c’est fait ! Retour sur décembre et janvier ✨",
+            descriptionHtml: `Entre concerts symphoniques, soirées à l’opéra, et musique de chambre, nous avons eu le plaisir de partager des univers variés et de rencontrer un public toujours plus curieux et enthousiaste.<br>
+            Retour en images sur ces temps forts qui font vibrer l’Ondif ! 🎶`,
+            tags: ['rencontre'],
        },
    ])

@@ -234,7 +230,7 @@
            }
            @media (min-width: 1440px) {
                &--card {
-                    width: clamp(360px, 28vw, 560px);
+                    width: clamp(360px, 26vw, 560px);
                }
            }
        }
--- a/app/components/RoundedCardBlocText.vue
+++ b/app/components/RoundedCardBlocText.vue
@@ -0,0 +1,108 @@
+<template>
+  <DsCard class="rounded-card">
+    <div class="rounded-card__grid">
+      <!-- Image -->
+      <div class="rounded-card__media">
+        <DsMedia :src="imgSrc" :alt="imgAlt" :ratio="ratio" />
+      </div>
+
+      <!-- Content -->
+      <div class="rounded-card__content">
+        <NuxtLink v-if="url" :to="url" class="rounded-card__title-link">
+          <DsHeading as="h5" tone="default" class="rounded-card__title">
+            {{ title }}
+          </DsHeading>
+        </NuxtLink>
+        <DsHeading v-else as="h5" tone="default" class="rounded-card__title">
+            {{ title }}
+        </DsHeading>
+        <!-- Description -->
+        <DsText as="p" tone="default" :clamp="3" class="rounded-card__description">
+          {{ description }}
+        </DsText>
+
+      </div>
+    </div>
+  </DsCard>
+</template>
+
+<script setup>
+  import DsCard from '@root/design-system/components/DsCard.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
+
+
+  defineProps({
+    id: { type: [String, Number], required: true },
+    title: { type: String, required: true },
+    url: { type: String, required: true },
+    description: { type: String, default: '' },
+    imgSrc: { type: String, default: '' },
+    imgAlt: { type: String, default: '' },
+    ratio: { type: String, default: 'square' },
+  })
+</script>
+
+<style lang="scss">
+  .rounded-card {
+    padding: 16px;
+    box-shadow: 0px -1px 20px rgba(0, 0, 0, 0.18);
+
+    .rounded-card__grid {
+      display: grid;
+      align-items: start;
+    }
+
+    .rounded-card__content {
+      display: grid;
+      gap: var(--sp-6);
+      max-width: 518px;
+      padding-left: 22px;
+      padding-right: 20px;
+      padding-top: 13px;
+      padding-bottom: 10px;
+      background: white;
+      max-width: 85%;
+      justify-self: center;
+      position: relative;
+      margin-top: -50px;
+      border-radius: 20px;
+    }
+
+    .rounded-card__meta {
+      margin-top: calc(var(--sp-4) * -1);
+    }
+
+    .rounded-card__title-link {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .rounded-card__title-link:hover,
+    .rounded-card__title-link:focus-visible {
+      color: var(--c-brand_rouge) !important;
+      .ds-heading--default {
+        color: var(--c-brand_rouge) !important;
+      }
+    }
+
+    .rounded-card__description {
+      margin-top: 10px;
+      margin-bottom: 20px;
+    }
+    .rounded-card__actions {
+      margin-top: auto;
+    }
+
+    .rounded-card__media {
+      .ds-media {
+        background: white !important;
+      }
+      img {
+        border-radius: 20px;
+      }
+    }
+  }
+</style>
--- a/app/components/RoundedCardBlocTextList.vue
+++ b/app/components/RoundedCardBlocTextList.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="rounded-card-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+  .rounded-card-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-cards);
+    justify-content: flex-start;
+    margin-left: 30px;
+  }
+  @media (max-width: 572px) {
+    .rounded-card-list {
+      justify-content: center;
+    }
+  }
+
+  // Taille des cards
+  @media (max-width: 599px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+      max-width: 90%;
+    }
+  }
+  @media (min-width: 600px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+    }
+  }
+  @media (min-width: 700px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+  @media (min-width: 800px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+  @media (min-width: 900px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+
+  @media (min-width: 1100px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 300px;
+      flex: 1 1 300px;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 258px;
+      flex: 1 1 258px;
+    }
+  }
+
+  @media (min-width: 1300px) {
+    .rounded-card-list > .rounded-card {
+      max-width: 283px;
+      flex: 1 1 283px;
+    }
+  }
+
+  @media (min-width: 1400px) {
+    // style appliqué au composant enfant via sa classe
+    .rounded-card-list > .rounded-card {
+      max-width: 308px;
+      flex: 1 1 308px;
+    }
+  }
+
+
+
+</style>
--- a/app/components/SquareCardBlocText.vue
+++ b/app/components/SquareCardBlocText.vue
@@ -8,8 +8,13 @@

      <!-- Content -->
      <div class="square-card__content">
-        <DsHeading as="h5" tone="default" class="square-card__title">
-          {{ title }}
+        <NuxtLink v-if="url" :to="url" class="square-card__title-link">
+          <DsHeading as="h5" tone="default" class="square-card__title">
+            {{ title }}
+          </DsHeading>
+        </NuxtLink>
+        <DsHeading v-else as="h5" tone="default" class="square-card__title">
+            {{ title }}
        </DsHeading>
        <!-- Description -->
        <DsText as="p" tone="default" :clamp="3" class="square-card__description">
@@ -64,6 +69,20 @@
  .square-card__meta {
    margin-top: calc(var(--sp-4) * -1);
  }
+
+  .square-card__title-link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .square-card__title-link:hover,
+  .square-card__title-link:focus-visible {
+    color: var(--c-brand_rouge) !important;
+    .ds-heading--default {
+      color: var(--c-brand_rouge) !important;
+    }
+  }
+
  .square-card__description {
    margin-top: 10px;
    margin-bottom: 20px;
@@ -72,4 +91,4 @@
    margin-top: auto;
  }

-</style>
+</style>
--- a/app/components/header/HeaderNav.vue
+++ b/app/components/header/HeaderNav.vue
@@ -39,7 +39,7 @@
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Les musiciens</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
@@ -61,8 +61,8 @@
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Ateliers 0-3 ans</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/chantons">Chantons avec l'Orchestre</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
-              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li>
+              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">Partenariat Grandes Écoles</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
            </ul>
@@ -168,7 +168,7 @@
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Les musiciens</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
@@ -198,8 +198,8 @@
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Ateliers 0-3 ans</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/chantons">Chantons avec l'Orchestre</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
-                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/academie">Académie d'orchestre</NuxtLink></li>
+                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/partenariat-grandes-ecoles">Partenariat Grandes Écoles</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
              </ul>
--- a/app/components/section/Decalage.vue
+++ b/app/components/section/Decalage.vue
@@ -60,7 +60,9 @@

 <style lang="scss">
    .decalage_cont {
-        margin-bottom: 70px;
+
+        margin-bottom: 30px;
+        min-height: 240px;
        display: flex;
        &--left {
            justify-content: flex-start;
--- a/app/components/section/PageSection.vue
+++ b/app/components/section/PageSection.vue
@@ -69,5 +69,7 @@
            }
        }
    }
-
+  .decalage-section--spaced {
+    margin-top: 50px;
+  }
 </style>
--- a/app/components/section/SectionTitle.vue
+++ b/app/components/section/SectionTitle.vue
@@ -22,8 +22,6 @@

 <style lang="scss">
    .section-title {
-
-
      &--pad-xs {
        padding-top: var(--sp-32);
        padding-bottom: var(--sp-16);
@@ -52,7 +50,6 @@
        }
      }
    }
-
    @media (max-width: 300px) {
        .section-title {
            padding-left: calc(var(--sp-45) - 20px);
--- a/app/components/strapiconvert/StrapiBlocksConvert.vue
+++ b/app/components/strapiconvert/StrapiBlocksConvert.vue
@@ -272,13 +272,17 @@

    &__figure {
      margin: 30px 0 30px;
+      align-self: center;
    }

    &__image {
      display: block;
      max-width: 100%;
      height: auto;
+      max-height: 430px;
+      object-fit: contain;
      border-radius: 6px;
+
    }

    &__caption {
@@ -307,7 +311,10 @@
    blockquote + &__h,
    &__code + &__h,
    &__figure + &__h {
-      margin-top: 13px;
+      margin-top: 23px;
+    }
+    > :not(h1) {
+      margin-left: 20px;
    }

  }