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,6 +23,8 @@
         </li>
       </ul>
     </nav>
+    <div class="cols">
+      <div class="col col-left">
         <section class="accroche">
           <figure>
             <img
@@ -49,33 +51,37 @@
           </div>
         </section>
         <section class="body" v-html="content.body"></section>
-    <section class="video">
+        <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
+          <figure v-for="visuel in content.field_visuel" v-bind:key="visuel.id">
-        v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
-      >
             <img
               :src="visuel.src"
               :alt="visuel.alt"
               :title="visuel.title"
               />
-        <caption></caption>
+            <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">