better home pres paragraph with formes

web_main/themes/custom/mathallo/assets/js/main.js

@@ -66,6 +66,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       console.log('MathalloTheme init()')
       initBurgerMenu();
       initPartieFrontBackCardSwitch();
+      initHome();
       initBgFormes();
       initBgAnime();
       initFootnotes();
@@ -109,6 +110,19 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       })
     }
 
+    function initHome(){
+      let ps = document.querySelectorAll('article[role="home-presentation"] p');
+      let used_n = [];
+      for (const p of ps) {
+        let n = Math.round(Math.random() * (_formesclasses.length -1));
+        while (used_n.includes(n)) {
+          n = Math.round(Math.random() * (_formesclasses.length -1));
+        }
+        used_n.push(n);
+        p.classList.add(`forme-${_formesclasses[n]}`);
+      }
+    }
+
     async function initBgFormes(){
       const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
       // console.log('container', container);

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -428,6 +428,7 @@ main[role="main"]{
       }
       // Article Static Home page teaser
       &[role="home-presentation"]{
+        max-width: 65vw;
         >h2{
           color: $bleu_site;
           text-decoration: none;
@@ -436,14 +437,65 @@ main[role="main"]{
           font-weight: 500;
         }
         p{
+          font-size: 1.134em;
           vertical-align: top;
           display: inline-block;
-          max-width: 31%;
+          max-width: 29%;
           margin-top: 2em;
           box-sizing: border-box;
+
+          position: relative;
+          // z-index: 10;
+
+          margin-bottom: 6em;
+
           &:not(:first-of-type){
-            margin-left: 2.5%;
+            margin-left: 6%;
           }
+          &:before{
+            content: "";
+            display: block;
+            position: absolute;
+            // background-color: red;
+            // border: 1px solid red ;
+            background-size: contain;
+            $form_wh:10em;
+            width:$form_wh; height:$form_wh;
+            bottom:-$form_wh * 0.9; right:0;
+            z-index: -1;
+          }
+
+          &.forme-pyramide:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
+          }
+          &.forme-prct:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
+          }
+          &.forme-pi:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
+          }
+          &.forme-infinite:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
+          }
+          &.forme-supeg:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
+          }
+          &.forme-cone:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
+          }
+          &.forme-croissant:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
+          }
+          &.forme-cube:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
+          }
+          &.forme-diamant:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
+          }
+          &.forme-cylindre:before{
+            background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
+          }
+
         }
 
       }
@@ -587,8 +639,17 @@ main[role="main"]{
     }
   } // partie-principes-pratique
 
-  // HOME
 
+//   _   _  ___  __  __ _____
+//  | | | |/ _ \|  \/  | ____|
+//  | |_| | | | | |\/| |  _|
+//  |  _  | |_| | |  | | |___
+//  |_| |_|\___/|_|  |_|_____|
+
+
+  article.node-type-static[role="home-presentation"]{
+
+  }
 
   div.views-home-chapitres{
     // display: flex;