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

@@ -1,66 +0,0 @@
-#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: 125px; }
+  padding-top: 150px; }
 
 /* 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: 125px;
+  height: 150px;
   background-color: white;
   z-index: 99;
   width: 100vw;
@@ -185,16 +185,15 @@ header {
       header .header_left_container #block-quartiers-de-demain-logorepu-2 {
         height: 110px; } }
     header .header_left_container #block-quartiers-de-demain-logoepau-2 {
-      height: 125px; }
+      height: 150px; }
       @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: 125px; }
+      height: 150px; }
       @media (max-width: 891px) {
         header .header_left_container img {
           height: 110px; } }
@@ -205,7 +204,7 @@ header {
         header .header_left_container img {
           height: 50px; } }
   header .header_right_container {
-    margin: auto; }
+    padding-left: calc(100% /4); }
     @media (max-width: 660px) {
       header .header_right_container {
         padding-right: 0; } }
@@ -214,14 +213,13 @@ header {
       header .header_right_container .language-switcher-language-url ul {
         display: flex;
         flex-direction: row;
-        font-size: 0.6rem;
+        font-size: 0.8rem;
         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 {
@@ -285,28 +283,26 @@ header {
     header .open-block.opened > div > span:nth-child(3) {
       display: none; }
 
-footer {
+footer span.totop {
-  z-index: 100; }
+  display: inline-flex;
-  footer span.totop {
+  width: 100vw; }
-    display: inline-flex;
+  footer span.totop #toTop {
-    width: 100vw; }
+    margin: auto;
-    footer span.totop #toTop {
+    background-color: #fff;
-      margin: auto;
+    border-top-left-radius: 10%;
-      background-color: #fff;
+    border-top-right-radius: 10%;
-      border-top-left-radius: 10%;
+    padding-bottom: 0.5rem; }
-      border-top-right-radius: 10%;
+    footer span.totop #toTop .arrow-up {
-      padding-bottom: 0.5rem; }
+      font-size: 1.7rem;
-      footer span.totop #toTop .arrow-up {
+      line-height: 2.5rem;
-        font-size: 1.7rem;
+      text-align: center;
-        line-height: 2.5rem;
+      width: 3rem;
-        text-align: center;
+      height: 2rem;
-        width: 3rem;
+      display: inline-block;
-        height: 2rem;
+      text-align: top; }
-        display: inline-block;
+      footer span.totop #toTop .arrow-up::before {
-        text-align: top; }
+        content: url("../images/up-arrow.svg");
-        footer span.totop #toTop .arrow-up::before {
+        width: 50%; }
-          content: url("../images/up-arrow.svg");
-          width: 50%; }
 
 .footer {
   display: grid;
@@ -330,22 +326,19 @@ footer {
       flex-wrap: nowrap; } }
   .footer #footer-left {
     grid-column: 1 /span 5;
-    grid-row: 1; }
+    grid-row: 1;
+    padding-left: 5%; }
     .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: 125px; }
+        height: 150px; }
         @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: 125px; }
+        height: 150px; }
         @media (max-width: 891px) {
           .footer #footer-left .footer_left_container img {
             height: 110px; } }
@@ -357,8 +350,7 @@ footer {
             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) {
@@ -374,14 +366,13 @@ footer {
         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: 1.5em; }
+        font-size: 2em; }
   @media (max-width: 891px) {
     .footer div {
       flex-wrap: wrap; } }
@@ -427,7 +418,7 @@ footer {
     font-weight: 400; }
     .layout-sidebar-first .sidebar_first_container .field-content {
       margin-bottom: 0.5rem;
-      font-size: 0.5rem; }
+      font-size: 0.6rem; }
     @media (max-width: 810px) {
       .layout-sidebar-first .sidebar_first_container {
         display: none; } }
@@ -537,7 +528,7 @@ footer {
     order: 2; }
     @media (max-width: 500px) {
       #presentation .layout-content, #home .layout-content {
-        padding-top: 50px; } }
+        padding-top: 0; } }
     #presentation .layout-content .content_container, #home .layout-content .content_container {
       display: flex;
       margin-bottom: 0; }
@@ -654,14 +645,16 @@ footer {
         #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; }
+          height: auto;
+          z-index: 100; }
           #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; }
+            cursor: -webkit-zoom-in;
+            z-index: 100; }
             @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%); } }
@@ -673,15 +666,11 @@ footer {
           transform: scale(1.7);
           max-width: 100vw;
           overflow-x: scroll;
-          position: relative;
+          z-index: 100; }
-          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

@@ -1 +0,0 @@
-{"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

@@ -1,69 +0,0 @@
-
-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,5 +63,3 @@
 
 })(jQuery, window);
 
-
-

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

@@ -2,8 +2,6 @@
 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 : 125px;
+$header-height : 150px;
 $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: 50px;
+            padding-top: 0;
         }
         .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,6 +198,7 @@
                                 cursor: zoom-in;
                                 cursor: -moz-zoom-in;
                                 cursor: -webkit-zoom-in;
+                                z-index: 100;
                                 @media(max-width: 500px){
                                     filter: brightness(100%);
                                 }
@@ -210,16 +211,11 @@
                             transform: scale(1.7);
                             max-width: 100vw;
                             overflow-x: scroll;
-                            position: relative;
+                            z-index: 100;
-                            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.5rem;
+            font-size: 0.6rem;
         }
         @media (max-width: 810px){
             display: none;

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

@@ -1,8 +1,11 @@
 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;
@@ -13,6 +16,7 @@ footer{
                 font-size: 1.7rem;
                 line-height: 2.5rem;
                 text-align: center;
+                // background: $footer-bg;
                 width: 3rem;
                 height: 2rem;
                 display: inline-block;
@@ -21,6 +25,9 @@ footer{
                     content:url("../images/up-arrow.svg") ;
                     width: 50%;
                 }
+                // .fa{
+                //     color: #fff;
+                // }    
             }
 
         }
@@ -36,23 +43,20 @@ 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;
 
@@ -61,25 +65,6 @@ 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;
@@ -110,7 +95,6 @@ footer{
              }
             }
         }
-        font-size: 0.6rem;
     }
     #footer-right{
         grid-column: 10 / 12;
@@ -128,11 +112,9 @@ footer{
                     font-weight: 600;
                 }
                 padding-bottom: 0.6rem;
-                font-size: 0.6rem;
-
             }
             .fa-3x{
-                font-size: 1.5em;
+                font-size: 2em;
             }
         }
     }

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;
+         display: flex;
-        flex-direction: row;
+         flex-direction: row;
          border-right: 1px solid #808080;
          padding-left: 2%;
          padding-right: 2%;
@@ -39,23 +39,19 @@ header{
         }
 
          #block-quartiers-de-demain-logorepu-2{
-
+            @media(max-width: 891px){
-           @media(max-width: 891px){
+                height: $header-height-pad;
-               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;
@@ -72,34 +68,33 @@ header{
          }
      }
      .header_right_container{
-        margin: auto;
+        // padding-right: 30%;
+        padding-left: calc(100% /4);
         @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-normal;
+                font-size: $font-medium;
                 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,7 +15,6 @@
 @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

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