front end

app/pages/index.vue

@@ -2,17 +2,17 @@
   <div>
 
     <!-- ================== -->
-    <!-- Fond noir -->
+    <!-- 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
@@ -31,13 +31,38 @@
       </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>
+
     <!-- ================== -->
-    <!-- Carte Île-De-France Partout et pour tous -->
+    <!-- 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>
@@ -45,6 +70,7 @@
             <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>
@@ -52,6 +78,15 @@
         </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 -->
@@ -78,11 +113,11 @@
     <PageSection padded_size="md">
       <SectionContent>
           <SectionTitle tone="" pad="xs">
-            LES DERNIÈRES ACTUALITÉS
+            ACTUALITÉS
           </SectionTitle>
       </SectionContent>
-      <SquareCardList >
-        <SquareCard
+      <SquareCardBlocTextList >
+        <SquareCardBlocText
           v-for="actuscard in actuscards"
           :key="actuscard.id"
           :id="actuscard.id"
@@ -91,8 +126,8 @@
           :title="actuscard.title"
           :description="actuscard.description"
           :url="actuscard.url"
-        ></SquareCard>
-      </SquareCardList>
+        ></SquareCardBlocText>
+      </SquareCardBlocTextList>
     </PageSection>
 
     <!-- ================== -->
@@ -155,6 +190,7 @@
   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'
 
@@ -269,11 +305,35 @@
   .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;
-    // 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;
+    
   }
   .theme_ppt {
     display: grid;
@@ -281,6 +341,7 @@
     &--img {
       grid-row: 1;
       grid-column: 1;
+      max-height: 400px;
     }
     &--content {
       grid-row: 1;
@@ -299,6 +360,9 @@
     }
   }
 
+  //========================
+  // TOUS A L'ORCHESTRE
+  //========================
   .theme_tao {
     margin-bottom: 50px;
 
@@ -379,14 +443,13 @@
           width: clamp(360px, 28vw, 560px);
         }
       }
-
-
-
-
     }
-    
+
   }
 
+  //========================
+  // MAGAZINE
+  //========================
   .theme_mag {