diff --git a/user/themes/epau-antimatter/css-compiled/template.css b/user/themes/epau-antimatter/css-compiled/template.css
index 7e0ba19..bc14d53 100644
--- a/user/themes/epau-antimatter/css-compiled/template.css
+++ b/user/themes/epau-antimatter/css-compiled/template.css
@@ -835,16 +835,35 @@ ul.pagination {
 .callout h1, h2, h3, p {
   text-align: left !important; }
 
-.callout h1 {
-  padding-bottom: 5rem; }
+.callout {
+  padding-right: 0rem !important;
+  padding-left: 0rem !important; }
+  .callout h2 {
+    text-transform: capitalize;
+    font-weight: 300;
+    font-size: 1rem; }
+
+.titre_nsb {
+  display: block;
+  margin-right: 52%; }
+  .titre_nsb h1 {
+    margin-bottom: 0rem !important;
+    text-align: right;
+    padding-right: 0rem !important; }
 
 .titre_bsn {
   display: block;
-  margin-left: 40%;
-  margin-right: 15%; }
+  margin-left: 40%; }
   .titre_bsn h1 {
     text-align: left;
-    padding-bottom: 3rem; }
+    margin-bottom: 0rem !important; }
+  .titre_bsn p {
+    padding-right: 15%; }
+
+.after-h1 {
+  transition: width 5s ease-in-out; }
+  .after-h1:hover {
+    width: 100%; }
 
 .programmes {
   display: flex;
diff --git a/user/themes/epau-antimatter/css/custom.css b/user/themes/epau-antimatter/css/custom.css
index 195eecc..e69de29 100644
--- a/user/themes/epau-antimatter/css/custom.css
+++ b/user/themes/epau-antimatter/css/custom.css
@@ -1,186 +0,0 @@
-/* #header #navbar ul.navigation li a {
-    font-family: "Sarabun", sans-serif;
-    font-weight: 400;
-    text-transform: uppercase;
-    font-size: 1rem;
-    display: inline-block;
-    padding: 0.3rem 0.8rem;
-    -webkit-backface-visibility: hidden;
-
-}
-
-
-  #header.scrolled #navbar  ul.navigation li a {
-      color: black !important;
-      font-size: 0.95rem;
-
-      transition:0.6s ease-in-out;
-
-  }
-
-
-.callout {
-  background-color: #000;
-  color: white;
-  padding-top: 0.5rem;
-}
-
-.callout h1, h2, h3, p {
-  text-align: left !important;
-
-  }
-
-.callout h1 {
-  padding-bottom: 5rem;
-}
-
-h2 {
-  font-size: 30px;
-  font-weight: lighter;
-  line-height: 35px;
-}
-
-.titre_bsn {
-  display: block;
-  margin-left: 40%;
-  margin-right: 15%;
-}
-
-.titre_bsn h1 {
-  text-align: left;
-  padding-bottom: 3rem;
-}
-
-
-
-.programmes {
-  display: flex;
-  flex-wrap: wrap;
-  background-color: #d5d2d1;
-  justify-content: center;
-  padding-left: 15%;
-  padding-right: 15%;
-
-  padding-top: 8rem;
-  padding-bottom: 8rem;
-}
-
-
-
-    .programme {
-      max-width: 45%;
-      padding: 1.5rem;
-      background-color: white;
-      margin: 0.4rem;
-
-    }
-
-    .programme h4 {
-      text-transform: uppercase;
-    }
-
-    .programme img {
-      max-width: 30%;
-    }
-
-    .programmes :hover {
-      background-color: #000;
-      color: #ffffff;
-      transition:0.2s ease-in-out;
-    }
-
-    /* .titre_nsb {
-      display: block;
-      position: absolute;
-      margin-right: 39%;
-    } */
-
-
-/* .ressources {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    background-color: #ffffff;
-    padding-top: 8rem;
-    padding-right: 5rem;
-    padding-left: 5rem;
-  } */
-
-    /* .ressource {
-      max-width: 20%;
-      margin-block: 5rem;
-      flex-wrap: wrap;
-      flex: 0 1 15%;
-    } */
-
-
-/*
-.ressources h1 {
-  text-transform: uppercase;
-  background-color: #fff;
-  color: #000;
-  padding-top: 5rem;
-  padding-bottom: 6rem;
-} */
-
-/* .ressources {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 3rem;
-  grid-auto-rows: auto;
-  background-color: #ffffff;
-  padding-top: 18rem;
-  justify-items: center;
-  position: relative;
-  margin-right: 10%;
-  margin-bottom: 6rem;
-  margin-left: 10%;
-} */
-
-/* .ressources img {
-  max-width: 50%;
-} */
-
-/* .ressource h1 h2 h3 h4 {
-  margin: 0.2rem;
-} */
-/* 
-.gouvernance {
-  background-color: #000;
-  color: #ffffff;
-  text-transform: uppercase;
-  padding-bottom: 6rem;
-  padding-top: 2rem;
-}
-.gouverance h1 {
-  padding-bottom: 5rem;
-}
-
-.mozaique_personnes {
-  background-color: #d5d2d1
-}
-
-.mozaique_personnes h3 {
-  margin-top: 0px !important;
-  padding-top: 3rem;
-  padding-left: 15%;
-  padding-right: 15%;
-  font-family: "Sarabun";
-  font-weight: 800;
-  font-size: 1rem;
-  line-height: 20px;
-}
-
-.personne {
-  background-color: #fff;
-  display: flex;
-
-  justify-items: center;
-  position: relative;
-  margin-right: 10%;
-  margin-bottom: 6rem;
-  margin-left: 10%;
-}
-.portrait {
-  max-width: 20%;
-} */ */
diff --git a/user/themes/epau-antimatter/js/antimatter.js b/user/themes/epau-antimatter/js/antimatter.js
index c6f6847..a9e97cd 100644
--- a/user/themes/epau-antimatter/js/antimatter.js
+++ b/user/themes/epau-antimatter/js/antimatter.js
@@ -9,10 +9,31 @@ function scrollHeader() {
         $("#header").removeClass("scrolled");
 }
 
+// Souligné horizontal sur titre block
+//
+//
+//   var title = $(document).querySelectorAll("h1");
+//   var start = (document).querySelectorAll(".after-h1");
+// //     var finish = document.querySelectorAll(".after-h1-finish")
+// function isInView(event, visible) {
+//     if title(visible == true) {
+//       console.log("je te vois");
+//     }
+//     else {
+//       console.log("je ne te vois pas");
+//     }
+// };
+
+
 jQuery(document).ready(function($){
 
-    // paralax
-  //  $('.parallax-window').parallax({imageSrc: '{/pages/02._programmes/10361_web_01.jpg}'});
+
+// jQuery('.your-class-here').one('inview', function (event, visible) {
+//     if (visible == true) {
+//       //Enjoy !
+//     }
+// });
+
 
 
     // ON SCROLL EVENTS
@@ -59,4 +80,42 @@ jQuery(document).ready(function($){
     });
 
 
+    // Animate on scroll
+    $(function() {
+
+      var $window           = $(window),
+          win_height_padded = $window.height() * 1.1,
+          isTouch           = Modernizr.touch;
+
+      if (isTouch) { $('.after-h1').addClass('animated'); }
+
+      $window.on('scroll', revealOnScroll);
+
+      function revealOnScroll() {
+        var scrolled = $window.scrollTop(),
+            win_height_padded = $window.height() * 1.1;
+
+        // Show...
+        $(".after-h1:not(.animated)").each(function () {
+          var $this     = $(this),
+              offsetTop = $this.offset().top;
+
+          if (scrolled + win_height_padded > offsetTop) {
+            if ($this.data('timeout')) {
+              window.setTimeout(function(){
+                $this.addClass('animated ' + $this.data('animation'));
+              }, parseInt($this.data('timeout'),10));
+            } else {
+              $this.addClass('animated ' + $this.data('animation'));
+            }
+          }
+        });
+      }
+
+      revealOnScroll();
+    });
+
+
+
+
 });
diff --git a/user/themes/epau-antimatter/js/parallax.js b/user/themes/epau-antimatter/js/parallax.js
deleted file mode 100755
index 5d7a97c..0000000
--- a/user/themes/epau-antimatter/js/parallax.js
+++ /dev/null
@@ -1,412 +0,0 @@
-/*!
- * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
- * @copyright 2016 PixelCog, Inc.
- * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
- */
-
-;(function ( $, window, document, undefined ) {
-
-  // Polyfill for requestAnimationFrame
-  // via: https://gist.github.com/paulirish/1579671
-
-  (function() {
-    var lastTime = 0;
-    var vendors = ['ms', 'moz', 'webkit', 'o'];
-    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
-      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
-    }
-
-    if (!window.requestAnimationFrame)
-      window.requestAnimationFrame = function(callback) {
-        var currTime = new Date().getTime();
-        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
-          timeToCall);
-        lastTime = currTime + timeToCall;
-        return id;
-      };
-
-    if (!window.cancelAnimationFrame)
-      window.cancelAnimationFrame = function(id) {
-        clearTimeout(id);
-      };
-  }());
-
-
-  // Parallax Constructor
-
-  function Parallax(element, options) {
-    var self = this;
-
-    if (typeof options == 'object') {
-      delete options.refresh;
-      delete options.render;
-      $.extend(this, options);
-    }
-
-    this.$element = $(element);
-
-    if (!this.imageSrc && this.$element.is('img')) {
-      this.imageSrc = this.$element.attr('src');
-    }
-
-    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
-
-    if (positions.length < 1) {
-      positions.push('center');
-    }
-    if (positions.length == 1) {
-      positions.push(positions[0]);
-    }
-
-    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
-      positions = [positions[1], positions[0]];
-    }
-
-    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
-    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
-
-    self.positionX = positions[0];
-    self.positionY = positions[1];
-
-    if (this.positionX != 'left' && this.positionX != 'right') {
-      if (isNaN(parseInt(this.positionX))) {
-        this.positionX = 'center';
-      } else {
-        this.positionX = parseInt(this.positionX);
-      }
-    }
-
-    if (this.positionY != 'top' && this.positionY != 'bottom') {
-      if (isNaN(parseInt(this.positionY))) {
-        this.positionY = 'center';
-      } else {
-        this.positionY = parseInt(this.positionY);
-      }
-    }
-
-    this.position =
-      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
-      this.positionY + (isNaN(this.positionY)? '' : 'px');
-
-    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
-      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
-        this.$element.css({
-          backgroundImage: 'url(' + this.imageSrc + ')',
-          backgroundSize: 'cover',
-          backgroundPosition: this.position
-        });
-      }
-      return this;
-    }
-
-    if (navigator.userAgent.match(/(Android)/)) {
-      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
-        this.$element.css({
-          backgroundImage: 'url(' + this.imageSrc + ')',
-          backgroundSize: 'cover',
-          backgroundPosition: this.position
-        });
-      }
-      return this;
-    }
-
-    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
-
-    var slider = this.$element.find('>.parallax-slider');
-    var sliderExisted = false;
-
-    if (slider.length == 0)
-      this.$slider = $('<img />').prependTo(this.$mirror);
-    else {
-      this.$slider = slider.prependTo(this.$mirror)
-      sliderExisted = true;
-    }
-
-    this.$mirror.addClass('parallax-mirror').css({
-      visibility: 'hidden',
-      zIndex: this.zIndex,
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      overflow: 'hidden'
-    });
-
-    this.$slider.addClass('parallax-slider').one('load', function() {
-      if (!self.naturalHeight || !self.naturalWidth) {
-        self.naturalHeight = this.naturalHeight || this.height || 1;
-        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
-      }
-      self.aspectRatio = self.naturalWidth / self.naturalHeight;
-
-      Parallax.isSetup || Parallax.setup();
-      Parallax.sliders.push(self);
-      Parallax.isFresh = false;
-      Parallax.requestRender();
-    });
-
-    if (!sliderExisted)
-      this.$slider[0].src = this.imageSrc;
-
-    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
-      this.$slider.trigger('load');
-    }
-
-  }
-
-
-  // Parallax Instance Methods
-
-  $.extend(Parallax.prototype, {
-    speed:    0.2,
-    bleed:    0,
-    zIndex:   -100,
-    iosFix:   true,
-    androidFix: true,
-    position: 'center',
-    overScrollFix: false,
-    mirrorContainer: 'body',
-
-    refresh: function() {
-      this.boxWidth        = this.$element.outerWidth();
-      this.boxHeight       = this.$element.outerHeight() + this.bleed * 2;
-      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
-      this.boxOffsetLeft   = this.$element.offset().left;
-      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
-
-      var winHeight = Parallax.winHeight;
-      var docHeight = Parallax.docHeight;
-      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
-      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
-      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
-      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
-      var margin;
-
-      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
-        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
-        this.imageHeight   = imageHeightMin;
-        this.offsetBaseTop = imageOffsetMin;
-
-        margin = this.imageWidth - this.boxWidth;
-
-        if (this.positionX == 'left') {
-          this.offsetLeft = 0;
-        } else if (this.positionX == 'right') {
-          this.offsetLeft = - margin;
-        } else if (!isNaN(this.positionX)) {
-          this.offsetLeft = Math.max(this.positionX, - margin);
-        } else {
-          this.offsetLeft = - margin / 2 | 0;
-        }
-      } else {
-        this.imageWidth    = this.boxWidth;
-        this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
-        this.offsetLeft    = 0;
-
-        margin = this.imageHeight - imageHeightMin;
-
-        if (this.positionY == 'top') {
-          this.offsetBaseTop = imageOffsetMin;
-        } else if (this.positionY == 'bottom') {
-          this.offsetBaseTop = imageOffsetMin - margin;
-        } else if (!isNaN(this.positionY)) {
-          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
-        } else {
-          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
-        }
-      }
-    },
-
-    render: function() {
-      var scrollTop    = Parallax.scrollTop;
-      var scrollLeft   = Parallax.scrollLeft;
-      var overScroll   = this.overScrollFix ? Parallax.overScroll : 0;
-      var scrollBottom = scrollTop + Parallax.winHeight;
-
-      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
-        this.visibility = 'visible';
-        this.mirrorTop = this.boxOffsetTop  - scrollTop;
-        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
-        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
-      } else {
-        this.visibility = 'hidden';
-      }
-
-      this.$mirror.css({
-        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
-        visibility: this.visibility,
-        height: this.boxHeight,
-        width: this.boxWidth
-      });
-
-      this.$slider.css({
-        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
-        position: 'absolute',
-        height: this.imageHeight,
-        width: this.imageWidth,
-        maxWidth: 'none'
-      });
-    }
-  });
-
-
-  // Parallax Static Methods
-
-  $.extend(Parallax, {
-    scrollTop:    0,
-    scrollLeft:   0,
-    winHeight:    0,
-    winWidth:     0,
-    docHeight:    1 << 30,
-    docWidth:     1 << 30,
-    sliders:      [],
-    isReady:      false,
-    isFresh:      false,
-    isBusy:       false,
-
-    setup: function() {
-      if (this.isReady) return;
-
-      var self = this;
-
-      var $doc = $(document), $win = $(window);
-
-      var loadDimensions = function() {
-        Parallax.winHeight = $win.height();
-        Parallax.winWidth  = $win.width();
-        Parallax.docHeight = $doc.height();
-        Parallax.docWidth  = $doc.width();
-      };
-
-      var loadScrollPosition = function() {
-        var winScrollTop  = $win.scrollTop();
-        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
-        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
-        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
-        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
-        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
-      };
-
-      $win.on('resize.px.parallax load.px.parallax', function() {
-          loadDimensions();
-          self.refresh();
-          Parallax.isFresh = false;
-          Parallax.requestRender();
-        })
-        .on('scroll.px.parallax load.px.parallax', function() {
-          loadScrollPosition();
-          Parallax.requestRender();
-        });
-
-      loadDimensions();
-      loadScrollPosition();
-
-      this.isReady = true;
-
-      var lastPosition = -1;
-
-      function frameLoop() {
-        if (lastPosition == window.pageYOffset) {   // Avoid overcalculations
-          window.requestAnimationFrame(frameLoop);
-          return false;
-        } else lastPosition = window.pageYOffset;
-
-        self.render();
-        window.requestAnimationFrame(frameLoop);
-      }
-
-      frameLoop();
-    },
-
-    configure: function(options) {
-      if (typeof options == 'object') {
-        delete options.refresh;
-        delete options.render;
-        $.extend(this.prototype, options);
-      }
-    },
-
-    refresh: function() {
-      $.each(this.sliders, function(){ this.refresh(); });
-      this.isFresh = true;
-    },
-
-    render: function() {
-      this.isFresh || this.refresh();
-      $.each(this.sliders, function(){ this.render(); });
-    },
-
-    requestRender: function() {
-      var self = this;
-      self.render();
-      self.isBusy = false;
-    },
-    destroy: function(el){
-      var i,
-          parallaxElement = $(el).data('px.parallax');
-      parallaxElement.$mirror.remove();
-      for(i=0; i < this.sliders.length; i+=1){
-        if(this.sliders[i] == parallaxElement){
-          this.sliders.splice(i, 1);
-        }
-      }
-      $(el).data('px.parallax', false);
-      if(this.sliders.length === 0){
-        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
-        this.isReady = false;
-        Parallax.isSetup = false;
-      }
-    }
-  });
-
-
-  // Parallax Plugin Definition
-
-  function Plugin(option) {
-    return this.each(function () {
-      var $this = $(this);
-      var options = typeof option == 'object' && option;
-
-      if (this == window || this == document || $this.is('body')) {
-        Parallax.configure(options);
-      }
-      else if (!$this.data('px.parallax')) {
-        options = $.extend({}, $this.data(), options);
-        $this.data('px.parallax', new Parallax(this, options));
-      }
-      else if (typeof option == 'object')
-      {
-        $.extend($this.data('px.parallax'), options);
-      }
-      if (typeof option == 'string') {
-        if(option == 'destroy'){
-            Parallax.destroy(this);
-        }else{
-          Parallax[option]();
-        }
-      }
-    });
-  }
-
-  var old = $.fn.parallax;
-
-  $.fn.parallax             = Plugin;
-  $.fn.parallax.Constructor = Parallax;
-
-
-  // Parallax No Conflict
-
-  $.fn.parallax.noConflict = function () {
-    $.fn.parallax = old;
-    return this;
-  };
-
-
-  // Parallax Data-API
-
-  $( function () { 
-    $('[data-parallax="scroll"]').parallax(); 
-  });
-
-}(jQuery, window, document));
diff --git a/user/themes/epau-antimatter/js/parallax.min.js b/user/themes/epau-antimatter/js/parallax.min.js
deleted file mode 100644
index 8d85c99..0000000
--- a/user/themes/epau-antimatter/js/parallax.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*!
- * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
- * @copyright 2016 PixelCog, Inc.
- * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
- */
-!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];if(r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),"top"!=r[0]&&"bottom"!=r[0]&&"left"!=r[1]&&"right"!=r[1]||(r=[r[1],r[0]]),this.positionX!==s&&(r[0]=this.positionX.toLowerCase()),this.positionY!==s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(isNaN(parseInt(this.positionX))?this.positionX="center":this.positionX=parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(isNaN(parseInt(this.positionY))?this.positionY="center":this.positionY=parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/))return this.imageSrc&&this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;if(navigator.userAgent.match(/(Android)/))return this.imageSrc&&this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;this.$mirror=t("<div />").prependTo(this.mirrorContainer);var a=this.$element.find(">.parallax-slider"),n=!1;0==a.length?this.$slider=t("<img />").prependTo(this.$mirror):(this.$slider=a.prependTo(this.$mirror),n=!0),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),n||(this.$slider[0].src=this.imageSrc),(this.naturalHeight&&this.naturalWidth||this.$slider[0].complete||a.length>0)&&this.$slider.trigger("load")}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s<e.length&&!i.requestAnimationFrame;++s)i.requestAnimationFrame=i[e[s]+"RequestAnimationFrame"],i.cancelAnimationFrame=i[e[s]+"CancelAnimationFrame"]||i[e[s]+"CancelRequestAnimationFrame"];i.requestAnimationFrame||(i.requestAnimationFrame=function(e){var s=(new Date).getTime(),o=Math.max(0,16-(s-t)),h=i.setTimeout(function(){e(s+o)},o);return t=s+o,h}),i.cancelAnimationFrame||(i.cancelAnimationFrame=function(t){clearTimeout(t)})}(),t.extend(o.prototype,{speed:.2,bleed:0,zIndex:-100,iosFix:!0,androidFix:!0,position:"center",overScrollFix:!1,mirrorContainer:"body",refresh:function(){this.boxWidth=this.$element.outerWidth(),this.boxHeight=this.$element.outerHeight()+2*this.bleed,this.boxOffsetTop=this.$element.offset().top-this.bleed,this.boxOffsetLeft=this.$element.offset().left,this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var t,i=o.winHeight,e=o.docHeight,s=Math.min(this.boxOffsetTop,e-i),h=Math.max(this.boxOffsetTop+this.boxHeight-i,0),r=this.boxHeight+(s-h)*(1-this.speed)|0,a=(this.boxOffsetTop-s)*(1-this.speed)|0;r*this.aspectRatio>=this.boxWidth?(this.imageWidth=r*this.aspectRatio|0,this.imageHeight=r,this.offsetBaseTop=a,t=this.imageWidth-this.boxWidth,"left"==this.positionX?this.offsetLeft=0:"right"==this.positionX?this.offsetLeft=-t:isNaN(this.positionX)?this.offsetLeft=-t/2|0:this.offsetLeft=Math.max(this.positionX,-t)):(this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0,t=this.imageHeight-r,"top"==this.positionY?this.offsetBaseTop=a:"bottom"==this.positionY?this.offsetBaseTop=a-t:isNaN(this.positionY)?this.offsetBaseTop=a-t/2|0:this.offsetBaseTop=a+Math.max(this.positionY,-t))},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.boxOffsetBottom>t&&this.boxOffsetTop<=s?(this.visibility="visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed)):this.visibility="hidden",this.$mirror.css({transform:"translate3d("+this.mirrorLeft+"px, "+(this.mirrorTop-e)+"px, 0px)",visibility:this.visibility,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d("+this.offsetLeft+"px, "+this.offsetTop+"px, 0px)",position:"absolute",height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){function s(){if(p==i.pageYOffset)return i.requestAnimationFrame(s),!1;p=i.pageYOffset,h.render(),i.requestAnimationFrame(s)}if(!this.isReady){var h=this,r=t(e),a=t(i),n=function(){o.winHeight=a.height(),o.winWidth=a.width(),o.docHeight=r.height(),o.docWidth=r.width()},l=function(){var t=a.scrollTop(),i=o.docHeight-o.winHeight,e=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(i,t)),o.scrollLeft=Math.max(0,Math.min(e,a.scrollLeft())),o.overScroll=Math.max(t-i,Math.min(t,0))};a.on("resize.px.parallax load.px.parallax",function(){n(),h.refresh(),o.isFresh=!1,o.requestRender()}).on("scroll.px.parallax load.px.parallax",function(){l(),o.requestRender()}),n(),l(),this.isReady=!0;var p=-1;s()}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;t.render(),t.isBusy=!1},destroy:function(e){var s,h=t(e).data("px.parallax");for(h.$mirror.remove(),s=0;s<this.sliders.length;s+=1)this.sliders[s]==h&&this.sliders.splice(s,1);t(e).data("px.parallax",!1),0===this.sliders.length&&(t(i).off("scroll.px.parallax resize.px.parallax load.px.parallax"),this.isReady=!1,o.isSetup=!1)}});var h=t.fn.parallax;t.fn.parallax=function(s){return this.each(function(){var h=t(this),r="object"==typeof s&&s;this==i||this==e||h.is("body")?o.configure(r):h.data("px.parallax")?"object"==typeof s&&t.extend(h.data("px.parallax"),r):(r=t.extend({},h.data(),r),h.data("px.parallax",new o(this,r))),"string"==typeof s&&("destroy"==s?o.destroy(this):o[s]())})},t.fn.parallax.Constructor=o,t.fn.parallax.noConflict=function(){return t.fn.parallax=h,this},t(function(){t('[data-parallax="scroll"]').parallax()})}(jQuery,window,document);
\ No newline at end of file
diff --git a/user/themes/epau-antimatter/package-lock.json b/user/themes/epau-antimatter/package-lock.json
index 43364e4..0ce55f3 100644
--- a/user/themes/epau-antimatter/package-lock.json
+++ b/user/themes/epau-antimatter/package-lock.json
@@ -9,9 +9,9 @@
       "version": "1.0.0",
       "license": "GPL-3.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "node-sass": "^5.0.0"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/abbrev": {
       "version": "1.1.1",
@@ -41,6 +41,11 @@
         "node": ">=0.4.2"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
@@ -1853,6 +1858,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
diff --git a/user/themes/epau-antimatter/package.json b/user/themes/epau-antimatter/package.json
index 12c1d0c..15e5d03 100644
--- a/user/themes/epau-antimatter/package.json
+++ b/user/themes/epau-antimatter/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "animate.css": "^4.1.1",
     "node-sass": "^5.0.0"
   },
   "scripts": {
@@ -12,7 +13,6 @@
   "directories": {
     "test": "tests"
   },
-  "devDependencies": {},
   "repository": {
     "type": "git",
     "url": "https://figureslibres.io/gogs/ouidade/dev-epau.archi.fr"
diff --git a/user/themes/epau-antimatter/scss/template/_custom.scss b/user/themes/epau-antimatter/scss/template/_custom.scss
index 17f2003..bda10a8 100644
--- a/user/themes/epau-antimatter/scss/template/_custom.scss
+++ b/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;
   }
 }
 
diff --git a/user/themes/epau-antimatter/templates/modular/accueil.html.twig b/user/themes/epau-antimatter/templates/modular/accueil.html.twig
new file mode 100644
index 0000000..18bc588
--- /dev/null
+++ b/user/themes/epau-antimatter/templates/modular/accueil.html.twig
@@ -0,0 +1,25 @@
+<div class="callout">
+    {% set image = page.media.images|first %}
+    {% if image %}
+        {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
+    {% endif %}
+  <div class="titre_bsn">
+
+
+  <h1>EPAU</h1>
+
+  <div class="test" >
+    <svg width="100%" height="0.5rem">
+     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
+   </svg>
+  </div>
+
+  <h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
+
+  <p>Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France</p>
+
+
+
+  {{ content|raw }}
+  </div>
+</div>
diff --git a/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig b/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig
index de45078..bfa359d 100644
--- a/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig
+++ b/user/themes/epau-antimatter/templates/modular/gouvernance.html.twig
@@ -1,7 +1,19 @@
 
 <div class="gouvernance">
+
   <div class="titre_bsn">
+
+    <h1>Gouvernance</h1>
+
+    <div class="test" >
+      <svg width="100%" height="0.5rem">
+       <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
+     </svg>
+    </div>
+    <p> Le conseil d’administration de l’Europe des projets architecturaux et urbains et les Directions de programmes de l’Europe des projets architecturaux urbains</p>
+
     {{ page.content|raw }}
+
   </div>
 </div>
 <div class="mozaique_personnes">
diff --git a/user/themes/epau-antimatter/templates/modular/ressources.html.twig b/user/themes/epau-antimatter/templates/modular/ressources.html.twig
index 6631105..fd931ac 100644
--- a/user/themes/epau-antimatter/templates/modular/ressources.html.twig
+++ b/user/themes/epau-antimatter/templates/modular/ressources.html.twig
@@ -1,15 +1,24 @@
 
 <div class="titre_nsb">
 
-  {{ content|raw }}
+  <h1>Ressources</h1>
 
-  <div class="after-h1">
+
+  <div class="test" >
+    <svg width="100%" height="0.5rem">
+     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(0,0,0)" />
+   </svg>
+  </div>
+  <!-- <div class="after-h1-finish">
     <svg width="50%" height="0.5rem">
      <rect width="100%" height="100%" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>
-  </div>
+  </div> -->
+
 </div>
 
+  {{ content|raw }}
+
 <div class="features {{ page.header.class}}">
 
   <div class="feature-items">
diff --git a/user/themes/epau-antimatter/templates/modular/text.html.twig b/user/themes/epau-antimatter/templates/modular/text.html.twig
index e760a44..87afc4d 100644
--- a/user/themes/epau-antimatter/templates/modular/text.html.twig
+++ b/user/themes/epau-antimatter/templates/modular/text.html.twig
@@ -4,6 +4,28 @@
         {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
     {% endif %}
   <div class="titre_bsn">
+
+
+  <h1>Contact</h1>
+
+
+  <h2></h2>
+
+  <p>Fabienne Dran
+Assistante de direction
+
+Fabienne.Dran@developpement-durable.gouv.fr
+
+    33 (0)1 40 81 93 27
+    +33 (0)7 86 50 33 31
+</p>
+
+
+    <div class="test" >
+      <svg width="50%" height="0.5rem">
+       <rect class="after-h1" width="3%" height="100%" style="fill:rgb(0,0,0)" />
+     </svg>
+    </div>
   {{ content|raw }}
   </div>
 </div>