souligné H1, pas réussi animation js on scroll. alimation css hover ok

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -58,9 +58,47 @@
   padding: 0.5rem;
 }
 
-h1::after {
+//tentative animation when in View
+// @media () {
+//
+//   @viewport {
+//
+//   }
+//   rect.after-h1 {
+//     animation-duration: 4s;
+//     animation-timing-function: linear;
+//     animation-timeline: grow-timeline;
+//   }
+//
+//   @scroll-timeline grow-timeline {
+//     source: selector(.test);
+//     orientation: block;
+//     scroll-offsets: 250px, 300px;
+//   }
+//
+//   @keyframes grow {
+//     to { transform: translate(300px) }
+//   }
+//   @k
+
+// @keyframes souligne {
+//   0% { width: 0.5%;
+//   }
+//   100%{
+//     width: 50%;
+//   }
+// }
+//
+// // selecteur:hover,
+// // selecteur:focus,
+// selecteur:hover{
+//   animation: souligne 2s ease-in-out;
+// }
+
+
+
+
 
-}
 
 .callout {
   padding-top: 0.5rem;
@@ -71,22 +109,56 @@ h1::after {
   text-align: left !important;
   }
 
-.callout h1 {
-  padding-bottom: 5rem;
+.callout {
+    padding-right: 0rem !important;
+    padding-left: 0rem !important;
+
+    // h1 {
+    // margin-bottom: 0rem !important;
+    // }
+    h2 {
+      text-transform: capitalize;
+      font-weight: 300;
+      font-size: 1rem;
+    }
+
+}
+.titre_nsb {
+    display: block;
+    margin-right: 52%;
+
+      h1 {
+        margin-bottom: 0rem !important;
+        text-align: right;
+        padding-right: 0rem !important;
+      }
 }
 
 .titre_bsn {
   display: block;
   margin-left: 40%;
-  margin-right: 15%;
+  // padding-right: 15%;
 
     h1 {
       text-align: left;
-      padding-bottom: 3rem;
+      margin-bottom: 0rem !important;
+      // padding-bottom: 3rem;
     }
 
+    p {
+      padding-right: 15%;
+    }
 }
 
+.after-h1 {     // fonctionne mais manque "when in View"
+  transition: width 5s ease-in-out;
+  &:hover {
+    width: 100%;
+    // transition: width 5s ease-in-out;
+  }
+}
+
+
 
 // fond images en grille pour parallax
 
@@ -186,7 +258,7 @@ h1::after {
   }
 
   h4 {
-    color: #fff;    
+    color: #fff;
   }
 }