better blabla/article display

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -1,4 +1,5 @@
 $transparent-bg: rgba(255,255,255, 0.95);
+$transparent-bg-blk: rgba(0,0,0, 0.75);
 
 $color-base:#69cdcf;
 $color-showrooms:#50aa3c;

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

@@ -619,6 +619,18 @@ article.card{
 }
 
 #main-content > article.article{
+  div.cols{
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: repeat(6, 1fr);
+    grid-gap: 1em;
+    div.col-left{
+      grid-column: 1;
+    }
+    div.col-right{
+      grid-column: 2/6;
+    }
+  }
   section.accroche{
     figure{
       width:$column_width*2 + $column_goutiere;
@@ -637,9 +649,20 @@ article.card{
       padding:0 0.5em 0 0;
     }
   }
+  section.videos{
+    ul{
+      margin:0; padding:0;
+      li{
+        margin:0; padding:0;
+        display: inline-block;
+        width:100%; overflow: hidden;
+      }
+    }
+  }
   section.visuels{
     width:calc(100% + #{$column_goutiere});
     figure{
+      position: relative;
       display: inline-block;
       vertical-align: top;
       width:$column_width*2 + $column_goutiere;
@@ -647,6 +670,11 @@ article.card{
       img{
         width:100%;
       }
+      caption{
+        position: absolute; bottom: 0; left:0;
+        box-sizing: border-box; width: 100%; padding:0.5em;
+        background-color: $transparent-bg-blk; color: #fff;
+      }
     }
   }
   aside.linked-materials{

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

@@ -23,59 +23,65 @@
         </li>
       </ul>
     </nav>
-    <section class="accroche">
-      <figure>
-        <img
-          :src="content.image_accroche.src"
-          :alt="content.image_accroche.alt"
-          :title="content.image_accroche.title"
-        />
-      </figure>
-    </section>
-    <section class="taxonomy">
-      <div class="thesaurus">
-        <ul>
-          <li
-            v-for="term in content.field_thesaurus" v-bind:key="term.id"
-            >{{ term.name }}</li>
-        </ul>
-      </div>
-      <div class="tags">
-        <ul>
-          <li
-            v-for="term in content.field_tags" v-bind:key="term.id"
-            >{{ term.name }}</li>
-        </ul>
-      </div>
-    </section>
-    <section class="body" v-html="content.body"></section>
-    <section class="video">
-      <ul>
-        <li v-for="video in content.videos" v-bind:key="video.id">
-          <vimeo-player
-            v-if="video.provider == 'vimeo'"
-            ref="player"
-            :video-id="video.id"
+    <div class="cols">
+      <div class="col col-left">
+        <section class="accroche">
+          <figure>
+            <img
+              :src="content.image_accroche.src"
+              :alt="content.image_accroche.alt"
+              :title="content.image_accroche.title"
             />
-          <youtube
-            v-if="video.provider == 'youtube'"
-            :video-id="video.id"
-            />
-        </li>
-      </ul>
-    </section>
-    <section class="visuels">
-      <figure
-        v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
-      >
-        <img
-          :src="visuel.src"
-          :alt="visuel.alt"
-          :title="visuel.title"
-        />
-        <caption></caption>
-      </figure>
-    </section>
+          </figure>
+        </section>
+        <section class="taxonomy">
+          <div class="thesaurus">
+            <ul>
+              <li
+                v-for="term in content.field_thesaurus" v-bind:key="term.id"
+                >{{ term.name }}</li>
+            </ul>
+          </div>
+          <div class="tags">
+            <ul>
+              <li
+                v-for="term in content.field_tags" v-bind:key="term.id"
+                >{{ term.name }}</li>
+            </ul>
+          </div>
+        </section>
+        <section class="body" v-html="content.body"></section>
+        <section v-if="content.videos" class="videos">
+          <ul>
+            <li v-for="video in content.videos" v-bind:key="video.id">
+              <vimeo-player
+                v-if="video.provider == 'vimeo'"
+                ref="player"
+                :video-id="video.id"
+                :player-width="480"
+                />
+              <youtube
+                v-if="video.provider == 'youtube'"
+                :video-id="video.id"
+                :player-width="480"
+                />
+            </li>
+          </ul>
+        </section>
+      </div> <!-- //col-left -->
+      <div class="col col-right">
+        <section class="visuels">
+          <figure v-for="visuel in content.field_visuel" v-bind:key="visuel.id">
+            <img
+              :src="visuel.src"
+              :alt="visuel.alt"
+              :title="visuel.title"
+              />
+            <caption v-if="visuel.title">{{ visuel.title }}</caption>
+          </figure>
+        </section>
+      </div> <!-- // col-right -->
+    </div> <!-- // cols -->
     <aside class="linked-materials">
       <h3 class="field__label">Linked Materials</h3>
       <div class="card-list">