bulle conceptuelle

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

@@ -319,10 +319,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
         let randoffset = 20 + Math.random() * 20;
         // left right
-        if (card.classList.contains('field-principes-reflexion')) {
+        if (card.classList.contains('field-principes-reflexion') || card.classList.contains('field-ressources')) {
           // left
           forme.style.left = `${card.offsetLeft - wh + randoffset}px`;
-        } else if(card.classList.contains('field-en-pratique')) {
+        } else if(card.classList.contains('field-en-pratique') || card.classList.contains('field-plus-loin')) {
           // right
           forme.style.left = `${card.offsetLeft + card.clientWidth - randoffset}px`;
         } else {

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

@@ -526,8 +526,8 @@ main[role="main"]{
 
 
 
-      &.field-ressources,
-      &.field-plus-loin{
+      &.field-plus-loin,
+      &.field-ressources{
         .field-label{
           @include titre_h3;
           padding-bottom: 1em;
@@ -540,8 +540,33 @@ main[role="main"]{
         }
       }
 
+      &.field-plus-loin{
+        // AKA Bulle conceptuelle
+        margin-left: 20em;
+        div.paragraph--type--complement{
+          .field_titre{
+            @include titre_h3;
+            color: $bleu_site;
+          }
+        }
+        div.field_liens{
+          margin-top: 2em;
+          div.field-label{
+            @include titre_h4;
+            padding: 0;
+          }
+          label{
+            display:block;
+            margin-top: 1em;
+          }
+          a{
+            font-size: 0.756em;
+          }
+        }
+      }
+
       &.field-ressources{
-        // margin-left: 20em;
+        margin-right: 20em;
         div.paragraph--type--ressource{
           .field_titre{
             background-color: $bleu_site;
@@ -572,15 +597,6 @@ main[role="main"]{
         }
       }
 
-      &.field-plus-loin{
-        // margin-right: 20em;
-        div.paragraph--type--complement{
-          .field_titre{
-            @include titre_h4;
-            color: $bleu_site;
-          }
-        }
-      }
 
     }
   } // div.layout-content
@@ -605,9 +621,9 @@ main[role="main"]{
       @mixin back-card{
         z-index: 1;
         background-color: rgba(247,247,247,1);
-        &>*>*{
-          // opacity: 0.6;
-        }
+        // &>*>*{
+        //   opacity: 0.6;
+        // }
         .field-label{
           color: inherit;
           font-weight: 600;