diff --git a/app/assets/javascripts/popover.coffee b/app/assets/javascripts/popover.coffee
new file mode 100644
index 0000000..eded834
--- /dev/null
+++ b/app/assets/javascripts/popover.coffee
@@ -0,0 +1,270 @@
+bottom = 0
+prev_link = ""
+
+$("document").ready ->
+  
+  position_img_now = ->
+    
+    
+    
+   # alert $("#large .large-img").outerHeight(false)
+    
+    imgheight = $("#large .large-img").outerHeight(false) + $("#large h3").outerHeight(false) 
+    
+     
+    margintop = (( $(window).height() - imgheight) / 2 )
+   
+    $("#large .large-img").css
+      "margin-top" :(margintop+"px")
+      #"width" : "100px"
+
+    
+    
+  position_img = ->
+    $("#large .large-img").one "load", ->
+      
+      position_img_now()
+    
+  
+  
+  $("#video").click ->
+    maxwidth = 1000
+    maxheight = 900
+
+    
+    
+    
+    prev_link = $(this)
+    $("body").append "<div id='large'></div>"
+    title = false
+    
+    
+    
+    $("#large").append "<div class='img_container first' style='width:90%;margin:auto;'></div>"
+    $("#large").append "<img src='/close.png' class='close_link' />"
+    $(".img_container.first").append '<iframe width="1000" height="563" src="//www.youtube.com/embed/ED4b38n4d-U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>'
+    
+    
+    $(".img_container.first").append "<h3>Vidéo de présentation</h3>"
+      
+    
+    $("#large").fadeIn(500)
+    position_img();
+    if $(window).height() > (maxheight+100)
+      $("#large .large-img").css
+        "max-height" : maxheight
+    else
+      $("#large .large-img").css
+        "max-height" : "85%"
+        
+    if $(window).width() > (maxwidth+100)
+      $("#large .large-img").css
+        "max-width" : maxwidth
+    else
+      $("#large .large-img").css
+        "max-width" : "85%"
+    resize();
+    
+    $("#large .img_container.first").css
+      "padding-top": (($(window).height()- $("#large .img_container.first iframe").height()-50)/ 2)+"px"
+    #position_img();
+    
+    
+    false
+  
+  
+  $(".expandable_image").click ->
+    maxwidth = 1000
+    maxheight = 900
+    
+
+    
+    
+    prev_link = $(this)
+    $("body").append "<div id='large'></div>"
+    title = false
+    
+    
+    
+    $("#large").append "<div class='img_container first'></div>"
+    $("#large").append "<img src='/close.png' class='close_link' />"
+    $(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
+    
+    if $(this).attr "title"
+      title = $(this).attr "title"
+      $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+    $("#large .large-img").one "load", ->
+      $("#large").fadeIn(500)
+    position_img();
+    if $(window).height() > (maxheight+100)
+      $("#large .large-img").css
+        "max-height" : maxheight
+    else
+      $("#large .large-img").css
+        "max-height" : "85%"
+        
+    if $(window).width() > (maxwidth+100)
+      $("#large .large-img").css
+        "max-width" : maxwidth
+    else
+      $("#large .large-img").css
+        "max-width" : "85%"
+    
+    position_img();
+    
+    
+    false
+  
+  
+  $(".rea-gal a").click ->
+    maxwidth = 1000
+    maxheight = 900
+    
+    
+    prev_link = $(this)
+    $("body").append "<div id='large'></div>"
+    title = false
+    
+        
+    $("#large").append "<img src='/arrow-next.png' class='next' />"
+    $("#large").append "<img src='/arrow-prev.png' class='prev' />"
+    $("#large").append "<img src='/close.png' class='close_link' />"
+    
+    $("#large").append "<div class='img_container first'></div>"
+    $(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
+    
+    if $(this).attr "title"
+      title = $(this).attr "title"
+      $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+    $("#large .large-img").one "load", ->
+      $("#large").fadeIn(500)
+    position_img();
+    if $(window).height() > (maxheight+100)
+      $("#large .large-img").css
+        "max-height" : maxheight
+    else
+      $("#large .large-img").css
+        "max-height" : "85%"
+        
+    if $(window).width() > (maxwidth+100)
+      $("#large .large-img").css
+        "max-width" : maxwidth
+    else
+      $("#large .large-img").css
+        "max-width" : "85%"
+    
+    position_img();
+    
+    
+    false
+  
+  
+  
+  $("body").on "click", "#large", ->
+    $(this).fadeOut 300, ->
+      $(this).remove()
+    
+    
+  $("body").on "click" ,"#large .prev",->
+    
+    if prev_link.prev("a").length > 0
+      link = prev_link.closest("a").prev("a")
+      
+      
+      
+    else
+      link = prev_link.closest("div").children("a:last")
+    
+   
+    #titre = photo.find("h3")
+    $(".img_container.first").fadeOut 300, ->
+      $("#large h3").remove()
+      if link.attr "title"
+        title = link.attr "title"
+        $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+      
+      $('#large .large-img').attr("src", link.attr("href"))
+      $("#large .large-img").one "load", ->
+        $(".img_container.first").fadeIn()
+      position_img();
+    prev_link = link
+    
+    false
+  
+  
+  $("body").on "click" ,"#large .next",->
+    
+    if prev_link.next("a").length > 0
+      link = prev_link.closest("a").next("a")
+      
+      
+      
+    else
+      link = prev_link.closest("div").children("a:first")
+    
+   
+    #titre = photo.find("h3")
+    
+    $(".img_container.first").fadeOut 300, ->
+      $("#large h3").remove()
+      if link.attr "title"
+        title = link.attr "title"
+        $(".img_container.first").append "<h3>"+title+"</h3>"
+      
+      $('#large .large-img').attr("src", link.attr("href"))
+      $("#large .large-img").one "load", ->
+        $(".img_container.first").fadeIn()
+      position_img();
+    prev_link = link
+    
+    false
+  
+  
+
+  left =0
+  
+  top = 0
+  offset= 0
+  
+  resize = ->
+    
+    pos = $(".center:first-child").offset().left
+    $(".menu").css
+      "padding-right" : pos+"px"
+    
+ 
+    
+
+        
+    $(".rea-gal").each ->
+      
+      $(this).find("img").css "width", Math.floor(((100) )/ 5)+"%"
+    
+    
+    $("#large").css "min-height", ($(window).height()-30)+"px"
+  
+    $(".slider").each ->
+      $(this).css({"width": $(window).width()+"px"})
+    
+      height = ($(window).height())
+      optimal_height = Math.round($(this).width()/ 1.66)
+      if optimal_height < height
+        height = optimal_height
+  
+      $(this).css({"height": height+"px"})
+
+    
+    position_img_now();
+  
+ 
+  
+  
+  resize()
+  
+  $(window).on "resize", ->
+    resize()
+  
+    
\ No newline at end of file
diff --git a/app/assets/stylesheets/popover.scss b/app/assets/stylesheets/popover.scss
new file mode 100644
index 0000000..f73fd7d
--- /dev/null
+++ b/app/assets/stylesheets/popover.scss
@@ -0,0 +1,76 @@
+#large{
+  display:none;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background:rgba(0,0,0,0.8);
+  z-index:10;
+
+   h3{
+     color:white;
+     text-align:center;
+     margin-top:5px;
+     margin-bottom:0;
+     font-weight:300;
+     font-size:0.95em;
+ 
+   }
+  .next, .prev{
+    width:20px;
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    cursor:pointer;
+
+  }
+  .prev{
+    left:15px;
+  }
+  .next{
+    right:15px;
+  }
+  
+  .close_link{
+    position:absolute;
+    top:10px;
+    left:10px;
+    width:40px;
+    
+  }
+ 
+  .img_container{
+    height:100%;
+    width:100%;
+    box-sizing: border-box;
+
+   .large-img{
+      cursor:pointer;
+      padding:10px;
+      background:rgba(250, 250, 250, 0.9);
+      display:block;
+      margin:auto;
+    }
+  }
+}
+
+
+
+.rea-gal{
+  padding-left:0px;
+
+  margin-right:-5px;
+  margin-bottom:-5px;
+  img{
+  padding-right:5px;
+  padding-bottom:5px;
+    width:200px;
+    float:left;
+    box-sizing: border-box;
+    &:hover{
+      opacity:0.8;
+      
+    }
+  }
+}
diff --git a/app/assets/stylesheets/qi_grids.scss b/app/assets/stylesheets/qi_grids.scss
new file mode 100644
index 0000000..7f21ff1
--- /dev/null
+++ b/app/assets/stylesheets/qi_grids.scss
@@ -0,0 +1,73 @@
+.columns{
+
+
+display:block;
+
+box-sizing: border-box;
+float:left;
+display:inline-block;
+padding:0 5px;
+
+&:first-child{
+padding-left:0px;
+
+}
+&:last-child{
+padding-right:0px;
+
+}
+
+&.span_12{
+width:100%;
+
+}
+
+&.span_11{
+width:100/12*11;
+
+}
+&.span_10{
+width:percentage(1/12*10);
+
+}
+&.span_9{
+width:percentage(1/12*9);
+
+}
+&.span_8{
+width:percentage(1/12*8);
+
+}
+&.span_7{
+width:percentage(1/12*7);
+
+}
+
+&.span_6{
+width:percentage(1/12*6);
+
+}
+&.span_5{
+width:percentage(1/12*5);
+
+}
+&.span_4{
+width:percentage(1/12*4);
+
+}
+&.span_3{
+width:percentage(1/12*3);
+
+}
+&.span_2{
+width:percentage(1/12*2);
+
+}
+
+&.span_1{
+width:percentage(1/12*1);
+
+}
+
+
+}