ajustement zoom in image

web/themes/custom/quartiers_de_demain/css/animated_logo.css

@@ -0,0 +1,66 @@
+#logo-animated-container {
+    width: 60%;
+    margin-left: 20%;
+    margin-right: 20%;
+}
+  @media (max-width:810px) { 
+    #logo-animated-container {
+        width: 74%;
+        margin-left: 13%;
+        margin-right: 13%;
+    }
+  }
+  @media (max-width:640px) { 
+    #logo-animated-container {
+        width: 80%;
+        margin-left: 10%;
+        margin-right: 10%;
+    }
+  }
+#logo-animated {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    max-width: 1300px;
+    max-height: 1000px;
+    overflow: hidden;
+    
+}
+
+  #logo-animated svg {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    max-width: 1030px;
+    top: 0;
+    left: 0;
+  }
+  #logo-animated  img {
+    position: absolute;
+    opacity: 0;
+  }
+  #consultation-couleur {
+    left: min(17%, 180px);
+    top: 0.5%;
+    width: 32%;
+    max-width: 330px;
+  }
+  #consultation-noir {
+    left: min(17%, 180px);
+    top: 0.5%;
+    width: 32%;
+    max-width: 330px;
+  }
+  #quartier-couleur {
+    width: 60%;
+    max-width: 620px;
+    left: min(30%, 310px);
+    top: 3%;
+  }
+  #quartier-noir {
+    width: 60%;
+    max-width: 620px;
+    left: min(30%, 310px);
+    top: 3%;
+  }

web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css

@@ -118,7 +118,7 @@
 
 .layout-content {
   grid-column: 1 / span 12;
-  padding-top: 150px; }
+  padding-top: 125px; }
 
 /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
 ul {
@@ -150,7 +150,7 @@ header {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  height: 150px;
+  height: 125px;
   background-color: white;
   z-index: 99;
   width: 100vw;
@@ -185,15 +185,16 @@ header {
       header .header_left_container #block-quartiers-de-demain-logorepu-2 {
         height: 110px; } }
     header .header_left_container #block-quartiers-de-demain-logoepau-2 {
-      height: 150px; }
+      height: 125px; }
       @media (max-width: 891px) {
         header .header_left_container #block-quartiers-de-demain-logoepau-2 {
           height: 110px; } }
     header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
-      margin-left: auto; }
+      margin-left: auto;
+      padding-right: 5%; }
     header .header_left_container img {
       width: auto;
-      height: 150px; }
+      height: 125px; }
       @media (max-width: 891px) {
         header .header_left_container img {
           height: 110px; } }
@@ -204,7 +205,7 @@ header {
         header .header_left_container img {
           height: 50px; } }
   header .header_right_container {
-    padding-left: calc(100% /4); }
+    margin: auto; }
     @media (max-width: 660px) {
       header .header_right_container {
         padding-right: 0; } }
@@ -213,13 +214,14 @@ header {
       header .header_right_container .language-switcher-language-url ul {
         display: flex;
         flex-direction: row;
-        font-size: 0.8rem;
+        font-size: 0.6rem;
         padding: 0; }
         @media (max-width: 660px) {
           header .header_right_container .language-switcher-language-url ul {
             margin-bottom: 0; } }
         header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
-          content: "/"; }
+          content: " / ";
+          white-space: pre; }
         header .header_right_container .language-switcher-language-url ul .is-active {
           font-weight: 600; }
   header .header_nav_container {
@@ -283,26 +285,28 @@ header {
     header .open-block.opened > div > span:nth-child(3) {
       display: none; }
 
-footer span.totop {
-  display: inline-flex;
-  width: 100vw; }
-  footer span.totop #toTop {
-    margin: auto;
-    background-color: #fff;
-    border-top-left-radius: 10%;
-    border-top-right-radius: 10%;
-    padding-bottom: 0.5rem; }
-    footer span.totop #toTop .arrow-up {
-      font-size: 1.7rem;
-      line-height: 2.5rem;
-      text-align: center;
-      width: 3rem;
-      height: 2rem;
-      display: inline-block;
-      text-align: top; }
-      footer span.totop #toTop .arrow-up::before {
-        content: url("../images/up-arrow.svg");
-        width: 50%; }
+footer {
+  z-index: 100; }
+  footer span.totop {
+    display: inline-flex;
+    width: 100vw; }
+    footer span.totop #toTop {
+      margin: auto;
+      background-color: #fff;
+      border-top-left-radius: 10%;
+      border-top-right-radius: 10%;
+      padding-bottom: 0.5rem; }
+      footer span.totop #toTop .arrow-up {
+        font-size: 1.7rem;
+        line-height: 2.5rem;
+        text-align: center;
+        width: 3rem;
+        height: 2rem;
+        display: inline-block;
+        text-align: top; }
+        footer span.totop #toTop .arrow-up::before {
+          content: url("../images/up-arrow.svg");
+          width: 50%; }
 
 .footer {
   display: grid;
@@ -326,19 +330,22 @@ footer span.totop {
       flex-wrap: nowrap; } }
   .footer #footer-left {
     grid-column: 1 /span 5;
-    grid-row: 1;
-    padding-left: 5%; }
+    grid-row: 1; }
     .footer #footer-left .footer_left_container {
+      padding-left: 5%;
       display: flex;
       flex-direction: row; }
+      @media (max-width: 891px) {
+        .footer #footer-left .footer_left_container {
+          max-width: 50vw; } }
       .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
-        height: 150px; }
+        height: 125px; }
         @media (max-width: 891px) {
           .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
             height: 110px; } }
       .footer #footer-left .footer_left_container img {
         width: auto;
-        height: 150px; }
+        height: 125px; }
         @media (max-width: 891px) {
           .footer #footer-left .footer_left_container img {
             height: 110px; } }
@@ -350,7 +357,8 @@ footer span.totop {
             height: 50px; } }
   .footer #footer-middle {
     grid-column: 6 /span 7;
-    grid-row: 1; }
+    grid-row: 1;
+    font-size: 0.6rem; }
     .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li {
       padding-bottom: 0.2rem; }
     @media (max-width: 891px) {
@@ -366,13 +374,14 @@ footer span.totop {
         flex-direction: column;
         font-size: 0.8rem;
         font-weight: 400;
-        padding-bottom: 0.6rem; }
+        padding-bottom: 0.6rem;
+        font-size: 0.6rem; }
         .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before {
           content: "Nous contacter";
           padding-bottom: 0.6rem;
           font-weight: 600; }
       .footer #footer-right #block-quartiers-de-demain-socialmedialinks .fa-3x {
-        font-size: 2em; }
+        font-size: 1.5em; }
   @media (max-width: 891px) {
     .footer div {
       flex-wrap: wrap; } }
@@ -418,7 +427,7 @@ footer span.totop {
     font-weight: 400; }
     .layout-sidebar-first .sidebar_first_container .field-content {
       margin-bottom: 0.5rem;
-      font-size: 0.6rem; }
+      font-size: 0.5rem; }
     @media (max-width: 810px) {
       .layout-sidebar-first .sidebar_first_container {
         display: none; } }
@@ -528,7 +537,7 @@ footer span.totop {
     order: 2; }
     @media (max-width: 500px) {
       #presentation .layout-content, #home .layout-content {
-        padding-top: 0; } }
+        padding-top: 50px; } }
     #presentation .layout-content .content_container, #home .layout-content .content_container {
       display: flex;
       margin-bottom: 0; }
@@ -645,16 +654,14 @@ footer span.totop {
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
           width: -moz-available;
           width: 100%;
-          height: auto;
-          z-index: 100; }
+          height: auto; }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
             filter: brightness(75%);
             transition: 0.2s;
             cursor: url(../images/noun-loop-3037049.svg), auto;
             cursor: zoom-in;
             cursor: -moz-zoom-in;
-            cursor: -webkit-zoom-in;
-            z-index: 100; }
+            cursor: -webkit-zoom-in; }
             @media (max-width: 500px) {
               #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
                 filter: brightness(100%); } }
@@ -666,11 +673,15 @@ footer span.totop {
           transform: scale(1.7);
           max-width: 100vw;
           overflow-x: scroll;
-          z-index: 100; }
+          position: relative;
+          z-index: 98; }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
             filter: brightness(100%);
             transition: 0.2s;
-            overflow-x: scroll; }
+            overflow-x: scroll;
+            cursor: zoom-out;
+            cursor: -moz-zoom-out;
+            cursor: -webkit-zoom-out; }
 
 .presentation footer span.totop {
   display: inline-flex;

web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/quartiers_de_demain.scss","../scss/global/variables/_colors.scss","../scss/global/variables/_core.scss","../scss/global/_fonts.scss","../scss/global/_layout.scss","../scss/global/variables/_typography.scss","../scss/global/_reset.scss","../scss/partials/_header.scss","../scss/partials/_footer.scss","../scss/partials/_aside.scss","../scss/pages/_home.scss","../scss/pages/_partenaires.scss","../scss/pages/_presentation.scss","../scss/pages/_static.scss"],"names":[],"mappings":"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","file":"quartiers_de_demain.css"}

web/themes/custom/quartiers_de_demain/js/animated_logo.js

@@ -0,0 +1,69 @@
+
+function setLogoContainerSize() {
+    let svgContainer = document.querySelector('#logo-animated');
+    let svgElement = document.querySelector('#logo-animated svg');
+    svgContainer.style.height = `${svgElement.clientHeight}px`;
+  }
+  setLogoContainerSize();
+  window.addEventListener('resize', setLogoContainerSize);
+  console.log('animated');
+
+  let chemins = document.querySelectorAll('#logo-animated svg path');
+  for (let chemin of chemins) {
+    let length = chemin.getTotalLength();
+    chemin.style.strokeDasharray = length;
+    chemin.style.strokeDashoffset = length;
+  }
+
+  
+  let consultationCouleur = document.querySelector('#consultation-couleur');
+  let consultationNoir = document.querySelector('#consultation-noir');
+  
+  let quartierCouleur = document.querySelector('#quartier-couleur');
+  let quartierNoir = document.querySelector('#quartier-noir');
+  
+  let consultationTranslate = 200;
+  let quartierTranslate = -200;
+
+  function startCountdown() {
+    let startTime;
+    let animationTime = 800;
+
+    function animate(timestamp) {
+      if (!startTime) startTime = timestamp;
+      const elapsedTime = timestamp - startTime;
+
+      if (elapsedTime <= animationTime) {
+        const animationPercent = elapsedTime / animationTime;
+        animateLogo(animationPercent);
+        requestAnimationFrame(animate);
+      } else {
+        animateLogo(1);
+      }
+
+    }
+    requestAnimationFrame(animate);
+  }
+
+  function animateLogo(animationPercent) {
+    for (let i = 0; i < chemins.length; i++) {
+      let draw = chemins[i].getTotalLength() * animationPercent;
+      chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
+      chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
+    }
+    let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
+    let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);
+
+    consultationCouleur.style.opacity = animationPercentCouleur;
+    consultationNoir.style.opacity = animationPercentNoir;
+    quartierCouleur.style.opacity = animationPercentCouleur;
+    quartierNoir.style.opacity = animationPercentNoir;
+
+    consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;
+
+    quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
+  }
+
+
+
+  window.addEventListener('load', startCountdown);

web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js

@@ -63,3 +63,5 @@
 
 })(jQuery, window);
 
+
+

web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml

@@ -2,6 +2,8 @@
 global:
   js:
     js/quartiers_de_demain.js: {}
+    js/animated_logo.js: {}
   css:
     theme:
       css/quartiers_de_demain.css: {}
+      css/animated_logo.css: {}

web/themes/custom/quartiers_de_demain/scss/global/_layout.scss

@@ -1,5 +1,5 @@
 
-$header-height : 150px;
+$header-height : 125px;
 $header-height-pad : 110px;
 $header-height-small : 70px;
 $header-height-ultrasmall : 50px;

web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss

@@ -31,7 +31,7 @@
         grid-row: 1;
         order: 2;
         @media (max-width:500px) {
-            padding-top: 0;
+            padding-top: 50px;
         }
         .content_container{
             display: flex;
@@ -190,7 +190,7 @@
                             width: -moz-available;
                             width: 100%;
                             height: auto;   
-                            z-index: 100;
+                            // z-index: 100;
                             &:hover{
                                 filter: brightness(75%);
                                 transition: 0.2s;
@@ -198,7 +198,6 @@
                                 cursor: zoom-in;
                                 cursor: -moz-zoom-in;
                                 cursor: -webkit-zoom-in;
-                                z-index: 100;
                                 @media(max-width: 500px){
                                     filter: brightness(100%);
                                 }
@@ -211,11 +210,16 @@
                             transform: scale(1.7);
                             max-width: 100vw;
                             overflow-x: scroll;
-                            z-index: 100;
+                            position: relative;
+                            z-index: 98;
                             &:hover{
                                 filter: brightness(100%);
                                 transition: 0.2s;
                                 overflow-x: scroll;
+                                cursor: zoom-out;
+                                cursor: -moz-zoom-out;
+                                cursor: -webkit-zoom-out;
+
                             }   
                         }
                     }

web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss

@@ -45,7 +45,7 @@
         font-weight: 400;
         .field-content{
             margin-bottom: 0.5rem;
-            font-size: 0.6rem;
+            font-size: 0.5rem;
         }
         @media (max-width: 810px){
             display: none;

web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss

@@ -1,11 +1,8 @@
 footer{
-
+    z-index: 100;
     span.totop {
         display: inline-flex;
         width: 100vw;
-        // content: url(../images/up-arrow.svg);
-
-        // background: $bleu_fond_header;
         #toTop{
             margin: auto;
             background-color: #fff;
@@ -16,7 +13,6 @@ footer{
                 font-size: 1.7rem;
                 line-height: 2.5rem;
                 text-align: center;
-                // background: $footer-bg;
                 width: 3rem;
                 height: 2rem;
                 display: inline-block;
@@ -25,9 +21,6 @@ footer{
                     content:url("../images/up-arrow.svg") ;
                     width: 50%;
                 }
-                // .fa{
-                //     color: #fff;
-                // }    
             }
 
         }
@@ -43,20 +36,23 @@ footer{
     section{width: fit-content;}
     h2, ul{margin: 0;}
     border-top: 1px solid #808080;
-    @media(max-width: 891px){
+     @media(max-width: 891px){
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
     }
     @media(max-width: 600px){
         flex-wrap: nowrap;
-    }    
+    }     
 
     #footer-left{
         grid-column: 1 /span 5;
         grid-row: 1;
-        padding-left: 5%;
         .footer_left_container{
+            padding-left: 5%;
+            @media(max-width: 891px){
+                max-width: 50vw;
+            }
             display: flex;
             flex-direction: row;
 
@@ -65,6 +61,25 @@ footer{
                 @media(max-width: 891px){
                     height: $header-height-pad;
                 }
+                // > div {
+                //     width: 100%;
+                //     height: 100%;
+                //     > a {
+                //         display: flex;
+                //         align-items: center;
+                //         justify-content: center;
+                //         width: 100%;
+                //         height: 100%;
+                //         > img {
+                //             padding: 0 2rem;
+                //             width: 100%;
+                //             height: auto;
+                //             @media(max-width: 891px){
+                //                 padding: 0;
+                //             }
+                //         }
+                //     }
+                // }
             }
             img{
                 width: auto;
@@ -95,6 +110,7 @@ footer{
              }
             }
         }
+        font-size: 0.6rem;
     }
     #footer-right{
         grid-column: 10 / 12;
@@ -112,9 +128,11 @@ footer{
                     font-weight: 600;
                 }
                 padding-bottom: 0.6rem;
+                font-size: 0.6rem;
+
             }
             .fa-3x{
-                font-size: 2em;
+                font-size: 1.5em;
             }
         }
     }

web/themes/custom/quartiers_de_demain/scss/partials/_header.scss

@@ -29,8 +29,8 @@ header{
      .header_left_container{
          grid-column: 1 /span 11;
          grid-row: 1 /span 3;
-         display: flex;
-         flex-direction: row;
+        display: flex;
+        flex-direction: row;
          border-right: 1px solid #808080;
          padding-left: 2%;
          padding-right: 2%;
@@ -39,19 +39,23 @@ header{
         }
 
          #block-quartiers-de-demain-logorepu-2{
-            @media(max-width: 891px){
-                height: $header-height-pad;
-            }
+
+           @media(max-width: 891px){
+               height: $header-height-pad;
+           }
          }
          #block-quartiers-de-demain-logoepau-2{
-            height: $header-height;
+
+           height: $header-height;
             @media(max-width: 891px){
-                height: $header-height-pad;
+               height: $header-height-pad;
             }
+
          }
          #block-quartiers-de-demain-logoquartiersdedemain{
              margin-left: auto;
-            //  padding-right: 5%;
+             padding-right: 5%;
+
          }
          img{
              width: auto;
@@ -68,33 +72,34 @@ header{
          }
      }
      .header_right_container{
-        // padding-right: 30%;
-        padding-left: calc(100% /4);
+        margin: auto;
         @media(max-width: 660px){
             padding-right: 0;
         }
         .language-switcher-language-url{
-            // padding-left: 30%;
             text-transform: uppercase;
             ul{
                 display: flex;
                 flex-direction: row;   
-                font-size: $font-medium;
+                font-size: $font-normal;
                 padding: 0;
                 @media(max-width: 660px){
                     margin-bottom: 0;      
                 }
                 li:nth-child(1){
                     &::after{
-                        content: "/";
+                        content: " / ";
+                        white-space: pre;
                     }
                 }
+               
                 .is-active{
                     font-weight: 600;
     
                 }
+
             }
-            
+                        
         }
      }
 

web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss

@@ -15,6 +15,7 @@
 @import "global/layout";
 @import "global/reset";
 @import "global/mediaquerries";
+// @import "global/_animated-logo";
 
 
 

web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig

@@ -1,61 +0,0 @@
-{# 
-/**
- * @file
- * Default theme implementation to display a paragraph.
- *
- * Available variables:
- * - paragraph: Full paragraph entity.
- *   Only method names starting with "get", "has", or "is" and a few common
- *   methods such as "id", "label", and "bundle" are available. For example:
- *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
- *   - paragraph.id(): The paragraph ID.
- *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
- *   - paragraph.getOwnerId(): The user ID of the paragraph author.
- *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
- *   and methods for the paragraph object.
- * - content: All paragraph items. Use {{ content }} to print them all,
- *   or print a subset such as {{ content.field_example }}. Use
- *   {{ content|without('field_example') }} to temporarily suppress the printing
- *   of a given child element.
- * - attributes: HTML attributes for the containing element.
- *   The attributes.class element may contain one or more of the following
- *   classes:
- *   - paragraphs: The current template type (also known as a "theming hook").
- *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
- *     "Image" it would result in "paragraphs--type--image". Note that the machine
- *     name will often be in a short form of the human readable label.
- *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
- *     preview would result in: "paragraphs--view-mode--preview", and
- *     default: "paragraphs--view-mode--default".
- * - view_mode: View mode; for example, "preview" or "full".
- * - logged_in: Flag for authenticated user status. Will be true when the
- *   current user is a logged-in member.
- * - is_admin: Flag for admin user status. Will be true when the current user
- *   is an administrator.
- *
- * @see template_preprocess_paragraph()
- *
- * @ingroup themeable
- */
-#}
-{%
-  set classes = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    not paragraph.isPublished() ? 'paragraph--unpublished',
-  ]
-%}
-{%
-  set ancre_href = '#paragraph-id--' ~ paragraph.id()
-%}
-{% block paragraph %}
-  {# <div{{ attributes.addClass(classes) }}> #}
-    <div{{ attributes.addClass(classes) }}>
-      {# <a href="{{ ancre_href }}"> #}
-        {% block content %}
-          {{ content }}
-        {% endblock %}
-      </a>
-  </div>
-{% endblock paragraph %}

web/themes/custom/quartiers_de_demain/templates/page--front.html.twig

@@ -61,9 +61,23 @@
 
 
     <div class="layout-content">
-      <div id="logo-animated">
+      <div id="logo-animated-container">
+        <div id="logo-animated">
 
+          <svg viewBox="0 0 1300 1000" preserveAspectRatio="xMinYMin meet" id="traits">
+            <path d="M25,25 L212,212" stroke="#2b21c8" stroke-width="65"/>
+            <path d="M120,670 310,480" stroke="#f7002b" stroke-width="65"/>
+            <path d="M1225,690 1035,500" stroke="#000000" stroke-width="65"/>
+            <path d="M520,25 Q665,140 810,25" fill="none" stroke="#000000" stroke-width="60"/>
+            <path d="M420,800 Q565,685 710,800" fill="none" stroke="#2b21c8" stroke-width="60"/>
+            <path d="M1270,25 Q1155,170 1270,315" fill="none" stroke="#f7002b" stroke-width="60"/>
+          </svg>
+          <img src="{{ directory }}/images/consultation-couleurs.png" id="consultation-couleur"/>
+          <img src="{{ directory }}/images/consultation-noir.png" id="consultation-noir"/>
+          <img src="{{ directory }}/images/quartier-couleur.png" id="quartier-couleur"/>
+          <img src="{{ directory }}/images/quartier-noir.png" id="quartier-noir"/>
 
+        </div>
       </div>
       {{ page.content }}
     </div>{# /.layout-content #}

web/themes/custom/quartiers_de_demain/templates/page.html.twig

@@ -61,10 +61,7 @@
 
     <div class="layout-content">
             
-      <div id="logo-animated">
-        <img src=url("../images/logo_accueil_QDD.svg") alt="logo animé consultation quartiers de demain" />
-      </div>
-      {{ page.content }}
+     {{ page.content }}
     </div>{# /.layout-content #}
 
     {% if page.sidebar_first %}