suite

app/assets/stylesheets/popover.scss

@@ -89,22 +89,42 @@
     box-sizing:border-box;
     text-align: center;
 
-
+    .overlay{
+      display:none;
+    }
     img{
       width:100%;
     }
   }
 
   a{
+    position:relative;
+    &:hover{
+      .overlay{
+        display:block;
+        background:url('/icones+.png') no-repeat center center ;
+        position:absolute;
+        top:0;
+        left:0;
+        right:0;
+        bottom:0;
         
         
+      }
       
       
-    img:hover{
+      img{
         opacity:0.6;
  
   
       }
+      
+      
+      
+    }
+   
+
+    
   }
 }
 img{

app/assets/stylesheets/public.scss

@@ -56,7 +56,7 @@ $blue :#2dadb1;
     background:white;
     
     margin:auto;
-    max-width:900px;
+    max-width:800px;
     
     position:relative;
     
@@ -81,6 +81,16 @@ $blue :#2dadb1;
     margin-left: 0px;
     margin-right: 0px;
 }
+
+.no-padding{
+
+.center{
+  padding:0;
+}  
+  
+  
+}
+
 #nous-bloc{
   .center{
     max-width:1250px;
@@ -115,7 +125,7 @@ $blue :#2dadb1;
     max-width:950px;
   }
   .service-inner{
-    max-width:350px;
+    max-width:320px;
     margin:auto;
     img{
       margin-bottom:10px;
@@ -145,11 +155,11 @@ $blue :#2dadb1;
 }
 
 body{
-  font-family:Helvetica, Arial, sans-serif;
+  font-family:'Open Sans', Helvetica, Arial, sans-serif;
   
   line-height:1.4em;
   text-align:left;
-  font-weight:300;
+  font-weight:400;
   padding:0;
   margin:0;
 
@@ -157,7 +167,7 @@ body{
   font-size: 16px;
   line-height: 22px;
   color: black;
-  font-weight: 300;
+  
   padding-top:120px;
   
   
@@ -208,7 +218,7 @@ h3{
     text-transform:uppercase;
     font-size:20px;
     padding-right:15px;
-    
+    font-weight:300;
     a{
       color:black;
       text-decoration:none;
@@ -277,13 +287,15 @@ h3{
     max-width: 650px;
     h1{
       text-transform:none;
-      font-weight:500;
-      font-size:26px;
+      font-weight:600;
+      font-size:30px;
       color:black;
       span{
         display:block;
-        font-weight:500;
-        font-size:1.6em;
+        margin-top:5px;
+        margin-bottom:20px;
+        font-weight:700;
+        font-size:40px;
         color:black;
         
       }
@@ -419,6 +431,78 @@ h3{
   }
 }
 
+.contact_links{
+  text-align:right;
+
+  position:fixed;
+  
+  right:0px;
+  top:300px;
+  
+  
+  .right_td
+  {
+    padding-left:5px;
+    text-align:left;
+    display:none;
+  }
+  
+  
+  a, .top_link{
+    background:$blue;
+    display:block;
+    padding:5px 0px;
+    text-align:center;
+    width:60px;
+    
+    color:white;
+    
+    
+    
+    
+    margin:0;
+    cursor:pointer;
+    
+    
+    table{
+      width:100%;
+      td{
+        padding:0;
+      }
+      
+    }
+    .left_td{
+      width:60px;
+    }
+    
+    
+    
+    
+    
+    
+    
+  }
+  
+  &:hover{
+    a{
+      width:210px;
+      color:white;
+    
+      .right_td
+      {
+  
+        display:table-cell;
+      }
+    }
+  }
+  
+  
+  .top_link{
+  
+    //display:inline;
+  }
+}
+
 .tag-gal{
   .element{
     float:left;

app/views/layouts/public.html.haml

@@ -24,8 +24,7 @@
     = stylesheet_link_tag 'public' 
     = stylesheet_link_tag '/fonts/Stylograph/stylesheet.css' 
     
-    <script src="https://use.typekit.net/hia2kxp.js"></script>
-    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
     
 
     =javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false&region=FR"
@@ -80,10 +79,14 @@
                 l’agence de communication globale, 
                 %span créateur d’ondes positives ! 
               %p
-                Nous travaillons de la conception à la réalisation de votre identité visuelle
+                Nous travaillons de la conception à la réalisation de votre identité 
                 %br
-                adaptée à votre positionnement, afin de communiquer de manière
+                visuelle
+                
+                adaptée à votre positionnement, afin de communiquer 
                 %br
+                de manière
+                
                 cohérente sur vos différents supports Print & Digitaux
 
               
@@ -151,6 +154,30 @@
       .top_link
         =i(:"arrow-up")
     
+    .contact_links
+      
+      =link_to "#", :target => "_blank",:onclick => "$('html,body').animate({scrollTop: ($('#contact-bloc').offset().top - 50)},'slow');return false;",  :class => "link facebook" do
+      
+        %table
+          %tr
+            %td.left_td
+              =image_tag "/icone-telephone-w.png"
+            %td.right_td
+              09 50 11 76 71
+              %br
+              06 62 95 47 70
+            
+        
+
+      =link_to "#", :target => "_blank",:onclick => "$('html,body').animate({scrollTop: ($('#contact-bloc').offset().top - 50)},'slow');return false;", :class => "link twitter" do
+        %table
+          %tr
+            %td.left_td
+              =image_tag "/icone-mail-w.png"
+            %td.right_td
+              Contact / Devis
+        
+
   .popup_overlay
   .popup_container
     

app/views/portlets/render_public/_gallerycontent.html.haml

@@ -76,6 +76,8 @@
             -if !gallery_images.more
               =link_to (gallery_images.big_image_file ? gallery_images.big_image_file.file.large.url : gallery_images.image_file.file.large.url), :title => gallery_images.title, :class => "real_gal_link" do
                 =image_tag(gallery_images.image_file.file.large.medium.url, :alt => "#{gallery_images.title}")
+                .overlay
+          
                 -if input.show_title
                   .title=gallery_images.title
                 -if input.show_description