added visuel display on thematique page

web/themes/custom/materiotheme/assets/dist/main.css

@@ -2113,6 +2113,9 @@ article.card {
   background-color: #69cdcf;
   padding: 0.5em 1em 1em; }
 
+#main-content > article.thematique div.col-left section.visuel img {
+  width: 100%; }
+
 #main-content > article.thematique aside.linked-materials ul {
   width: calc(100% + 13px); }
   #main-content > article.thematique aside.linked-materials ul li {

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1362,9 +1362,16 @@ article.card{
     }
     div.col-right{}
   }
-  div.col-left section.body{
-    background-color: $color-base;
-    padding: 0.5em 1em 1em;
+  div.col-left{
+    section.body{
+      background-color: $color-base;
+      padding: 0.5em 1em 1em;
+    }
+    section.visuel{
+      img{
+        width: 100%;
+      }
+    }
   }
   aside.linked-materials{
     ul{

web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue

@@ -6,6 +6,9 @@
     <div class="cols">
       <div class="col col-left">
         <section class="body" v-html="thematique.body"></section>
+        <section class="visuel">
+          <img :src="image_accroche.style_cardmedium.url" alt="">
+        </section>
       </div> <!-- //col-left -->
       <div class="col col-right">
         <aside class="linked-materials">
@@ -125,13 +128,19 @@ export default {
     },
     parseDataGQL(thematique){
       console.log('parseDataGQL thematique', thematique)
-      this.thematique = thematique
+      if (thematique) {
+        this.thematique = thematique
 
-      this.image_accroche = thematique.images[0]
+        if (thematique.images) {
+          this.image_accroche = thematique.images[0]
+        }
 
-      // update main page title
-      this.$store.commit('Common/setPagetitle', thematique.title)
+        // update main page title
+        this.$store.commit('Common/setPagetitle', thematique.title)
 
+      }else{
+        console.warn('Thematique not loaded');
+      }
       this.loading = false;
     },
   },