home + page carte

assets/app/frontend/app/app.scss

@@ -3,6 +3,10 @@
 @import "../scss/vars";
 @import "../scss/base";
 @import "../scss/home";
+@import "../scss/carto";
+@import "../scss/carto-carte";
+@import "../scss/carto-liste";
+@import "../scss/carto-int";
 @import "../scss/header";
 @import "../scss/footer";
 @import "../scss/responsive";

assets/app/frontend/scss/carto-carte.scss

@@ -0,0 +1,81 @@
+#carto-carte {
+  margin-top: 75px;
+
+  .title-carte {
+    color: $green;
+    font-size: 50px;
+    font-family: franklinregular;
+    text-align: center;
+  }
+
+  .row-contrib {
+    color: $green;
+    font-size: 20px;
+    font-family: franklinregular;
+    margin-top: 50px;
+
+    .revolt, .dream {
+      padding-top: 25px;
+      padding-left: 0;
+    }
+
+    .project-boost, .project-insp {
+      padding-top: 15px;
+      padding-left: 0;
+    }
+  }
+
+  .help-legend {
+    text-align: center;
+    color: #828282;
+    font-family: franklinregular;
+    margin-top: 50px;
+    font-size: 20px;
+  }
+
+  .map {
+    border: 2px solid $green;
+    margin-top: 20px;
+    padding: 10px 10px 40px;
+    position: relative;
+
+    .img-map {
+      img {
+        width: 75px;
+      }
+    }
+
+    .img-vosges {
+      position: absolute;
+      top: 257px;
+      left: 387px;
+    }
+
+    .img-belfort {
+      position: absolute;
+      top: 493px;
+      left: 491px;
+      width: 160px;
+    }
+
+    .img-hericourt {
+      position: absolute;
+      top: 639px;
+      left: 217px;
+      width: 160px;
+    }
+
+    .img-montbeliard {
+      position: absolute;
+      top: 1003px;
+      left: 319px;
+      width: 160px;
+    }
+
+    .img-sud {
+      position: absolute;
+      top: 798px;
+      left: 746px;
+    }
+  }
+}

assets/app/frontend/scss/carto-int.scss

@@ -0,0 +1,13 @@
+#carto-int {
+  .title-interactive {
+    color: $orange;
+    font-family: franklinregular;
+    text-align: center;
+    margin-top: 75px;
+    margin-bottom: 75px;
+  }
+
+  .carto-bulles {
+    border: 2px solid $green;
+  }
+}

assets/app/frontend/scss/carto-liste.scss

@@ -0,0 +1,3 @@
+#carto-liste {
+
+}

assets/app/frontend/scss/carto.scss

@@ -0,0 +1,95 @@
+#app_carto_interactive, #app_carto_liste, #app_carto_carte {
+  .bloc-carto-revo {
+    background-color: $yellow;
+
+    h1 {
+      color: $green;
+      font-family: franklinregular;
+      font-size: 75px;
+      line-height: 67px;
+      margin-top: 100px;
+      margin-bottom: 75px;
+
+      span {
+        color: $orange;
+      }
+    }
+
+    h2 {
+      color: $green;
+      font-family: franklinregular;
+      font-size: 28px;
+      margin-bottom: 30px;
+    }
+
+    p {
+      color: $orange;
+      font-style: italic;
+      font-size: 20px;
+      margin-bottom: 50px;
+    }
+
+    .bloc-contrib {
+      text-align: right;
+
+      .nb-contrib {
+        color: $orange;
+        font-size: 126px;
+        font-family: franklinregular;
+        height: 150px;
+      }
+
+      .contrib {
+        color: $green;
+        font-size: 70px;
+        font-family: franklinregular;
+      }
+    }
+  }
+
+  .bloc-carto {
+    margin-top: 75px;
+
+    .box-carto {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      border: 2px solid $green;
+      color: $green;
+      font-family: franklinregular;
+      font-size: 20px;
+      padding: 20px;
+      height: 190px;
+
+      img {
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .bloc-download {
+    color: $green;
+    border: 2px solid $green;
+    margin-top: 75px;
+    text-align: center;
+    font-family: franklinregular;
+    font-size: 25px;
+    padding-top: 15px;
+    padding-bottom: 25px;
+
+    .download {
+      display: block;
+      border: 2px solid $green;
+      color: $green;
+      margin-top: 30px;
+    }
+
+    .excel {
+      margin-left: 50px;
+    }
+
+    .pdf {
+      margin-right: 50px;
+    }
+  }
+}

assets/app/frontend/scss/header.scss

@@ -14,6 +14,14 @@
 
       .row-toggle {
         height: 16%;
+
+        .toggle {
+          position: absolute;
+          right: 50px;
+          top: 50px;
+          border: 0;
+          background-color: #FFF;
+        }
       }
 
       .row-list {
@@ -79,6 +87,10 @@
 
     .navbar-brand {
       width: 50%;
+
+      img {
+        max-height: 123px;
+      }
     }
 
     .participate {

assets/app/frontend/scss/home.scss

@@ -1,161 +1,163 @@
-.bloc-futur {
-  color: #FFF;
-  background-color: $green;
-  font-family: dinbold;
+#app_homepage {
+  .bloc-futur {
+    color: #FFF;
+    background-color: $green;
+    font-family: dinbold;
 
-  .row-futur {
-    min-height: 800px;
+    .row-futur {
+      min-height: 800px;
+
+      h1 {
+        font-family: franklinregular;
+        width: 70%;
+        font-size: 80px;
+        margin-top: 70px;
+      }
+
+      h2 {
+        width: 50%;
+        margin-top: 55px;
+        font-weight: bold;
+        font-size: 27px;
+      }
+
+      .discover {
+        background-color: $yellow;
+        color: $green;
+        font-size: 30px;
+        padding: 13px 50px;
+        margin-top: 150px;
+        display: inline-block;
+        font-weight: bold;
+      }
+
+      .perso-aac {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        max-width: 900px;
+      }
+
+      .startup {
+        position: absolute;
+        top: 10%;
+        right: 7%;
+        max-width: 250px;
+      }
+    }
+  }
 
-    h1 {
-      font-family: franklinregular;
-      width: 70%;
-      font-size: 80px;
-      margin-top: 70px;
+  .bloc-cartographie {
+    background-color: $green;
+    color: $green;
+
+    .frame-yellow {
+      background-color: $yellow;
     }
 
-    h2 {
-      width: 50%;
-      margin-top: 55px;
-      font-weight: bold;
-      font-size: 27px;
+    .cartographie {
+      max-width: 90%;
+      margin-top: 50px;
+      margin-bottom: 50px;
     }
 
-    .discover {
-      background-color: $yellow;
-      color: $green;
-      font-size: 30px;
-      padding: 13px 50px;
-      margin-top: 150px;
-      display: inline-block;
+    h1 {
+      margin-top: 100px;
+      margin-bottom: 40px;
       font-weight: bold;
+
+      span {
+        color: $orange;
+      }
     }
 
-    .perso-aac {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      max-width: 900px;
+    .link-carto {
+      font-size: 20px;
+      display: inline-block;
+      margin-top: 20px;
+      margin-bottom: 30px;
+      color: $green;
+      font-weight: bold;
+      border-bottom: 2px solid $orange;
+      text-decoration: none;
     }
 
-    .startup {
+    .link-concert {
+      color: $yellow;
+      background-color: $green;
+      padding: 20px 10px;
       position: absolute;
-      top: 10%;
-      right: 7%;
-      max-width: 250px;
+      bottom: 5%;
+      right: 10%;
+      font-family: dinbold;
+      font-size: 20px;
+      font-weight: bold;
     }
   }
-}
 
-.bloc-cartographie {
-  background-color: $green;
-  color: $green;
+  .bloc-planisphere {
+    min-height: 700px;
+    color: $green;
+    padding-bottom: 100px;
+    padding-top: 100px;
 
-  .frame-yellow {
-    background-color: $yellow;
-  }
+    img {
+      max-width: 70%;
+    }
 
-  .cartographie {
-    max-width: 90%;
-    margin-top: 50px;
-    margin-bottom: 50px;
-  }
+    h1 {
+      text-align: center;
+      font-size: 40px;
+      font-weight: bold;
+      margin-bottom: 70px;
 
-  h1 {
-    margin-top: 100px;
-    margin-bottom: 40px;
-    font-weight: bold;
+      span {
+        color: $orange;
+      }
+    }
 
-    span {
-      color: $orange;
+    .col-text {
+      padding: 3%;
     }
-  }
 
-  .link-carto {
-    font-size: 20px;
-    display: inline-block;
-    margin-top: 20px;
-    margin-bottom: 30px;
-    color: $green;
-    font-weight: bold;
-    border-bottom: 2px solid $orange;
-    text-decoration: none;
+    .subscribe {
+      color: $green;
+      border: 1px solid $green;
+      padding: 10px 40px;
+      position: absolute;
+      bottom: 0;
+      font-size: 23px;
+    }
   }
 
-  .link-concert {
-    color: $yellow;
+  .bloc-ressourcerie {
     background-color: $green;
-    padding: 20px 10px;
-    position: absolute;
-    bottom: 5%;
-    right: 10%;
-    font-family: dinbold;
-    font-size: 20px;
-    font-weight: bold;
-  }
-}
-
-.bloc-planisphere {
-  min-height: 700px;
-  color: $green;
-  padding-bottom: 100px;
-  padding-top: 100px;
-
-  img {
-    max-width: 70%;
-  }
-
-  h1 {
-    text-align: center;
-    font-size: 40px;
+    color: #FFF;
     font-weight: bold;
-    margin-bottom: 70px;
+    padding-top: 100px;
+    padding-bottom: 100px;
 
-    span {
-      color: $orange;
+    h1 {
+      margin-bottom: 50px;
+      font-size: 40px;
+      font-weight: bold;
     }
-  }
-
-  .col-text {
-    padding: 3%;
-  }
 
-  .subscribe {
-    color: $green;
-    border: 1px solid $green;
-    padding: 10px 40px;
-    position: absolute;
-    bottom: 0;
-    font-size: 23px;
-  }
-}
-
-.bloc-ressourcerie {
-  background-color: $green;
-  color: #FFF;
-  font-weight: bold;
-  padding-top: 100px;
-  padding-bottom: 100px;
-
-  h1 {
-    margin-bottom: 50px;
-    font-size: 40px;
-    font-weight: bold;
-  }
-
-  .contribuate {
-    display: inline-block;
-    padding: 15px 15px;
-    border: 2px solid $yellow;
-    color: #FFF;
-    margin-top: 40px;
-    font-size: 23px;
-  }
+    .contribuate {
+      display: inline-block;
+      padding: 15px 15px;
+      border: 2px solid $yellow;
+      color: #FFF;
+      margin-top: 40px;
+      font-size: 23px;
+    }
 
-  .ressourcerie {
-    max-width: 80%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    left: 50%;
+    .ressourcerie {
+      max-width: 80%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      left: 50%;
+    }
   }
 }

config/routes.yaml

@@ -18,6 +18,14 @@ app_legal_mention:
   path: /mentions-legales
   controller: App\Controller\Frontend\DefaultController::mention
 
-homepage:
-  path: /home
-  controller: App\Controller\Frontend\DefaultController::index
+app_carto_interactive:
+  path: /cartographie-interactive
+  controller: App\Controller\Frontend\DefaultController::cartoInteractive
+
+app_carto_liste:
+  path: /cartographie-list
+  controller: App\Controller\Frontend\DefaultController::cartoListe
+
+app_carto_carte:
+  path: /cartographie-carte
+  controller: App\Controller\Frontend\DefaultController::cartoCarte

public/build/entrypoints.json

@@ -120,7 +120,7 @@
         "/build/app-frontend.f50d644b.js"
       ],
       "css": [
-        "/build/app-frontend.afdbbc0b.css"
+        "/build/app-frontend.27939268.css"
       ]
     }
   }

public/build/manifest.json

@@ -17,7 +17,7 @@
   "build/sov-ticket.js": "/build/sov-ticket.df76c7a0.js",
   "build/app-backend.css": "/build/app-backend.3d882954.css",
   "build/app-backend.js": "/build/app-backend.e0a6620d.js",
-  "build/app-frontend.css": "/build/app-frontend.afdbbc0b.css",
+  "build/app-frontend.css": "/build/app-frontend.27939268.css",
   "build/app-frontend.js": "/build/app-frontend.f50d644b.js",
   "build/runtime.js": "/build/runtime.3095b250.js",
   "build/vendors-node_modules_core-js_internals_export_js.2e873f33.js": "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",

src/Controller/Frontend/DefaultController.php

@@ -2,6 +2,10 @@
 
 namespace App\Controller\Frontend;
 
+use App\Entity\Dreams;
+use App\Entity\ProjectsBoost;
+use App\Entity\ProjectsInspiring;
+use App\Entity\Revolts;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
@@ -21,14 +25,64 @@ class DefaultController extends AbstractController
         return $this->render('frontend/home.html.twig');
     }
 
+    public function cartoInteractive()
+    {
+        return $this->render(
+            'frontend/carto-int.html.twig',
+            [
+                'nbContrib' => $this->countContrib()
+            ]
+        );
+    }
+
+    public function cartoListe()
+    {
+        return $this->render(
+            'frontend/carto-liste.html.twig',
+            [
+                'nbContrib' => $this->countContrib()
+            ]
+        );
+    }
+
+    public function cartoCarte()
+    {
+        return $this->render(
+            'frontend/carto-carte.html.twig',
+            [
+                'nbContrib' => $this->countContrib()
+            ]
+        );
+    }
+
     public function mention(): Response
     {
         $pageRepository = $this->em->getRepository(Page::class);
 
-        return $this->render('page/page.html.twig', [
-            'controller_name' => 'IndexController',
-            'page' => $pageRepository->findOneByDevAlias('legal-mention')
-        ]);
+        return $this->render(
+            'page/page.html.twig',
+            [
+                'controller_name' => 'IndexController',
+                'page' => $pageRepository->findOneByDevAlias('legal-mention')
+            ]
+        );
+    }
+
+    private function countContrib(): int
+    {
+        $dreamRepository = $this->em->getRepository(Dreams::class);
+        $revoltRepository = $this->em->getRepository(Revolts::class);
+        $projectsBoostRepository = $this->em->getRepository(ProjectsBoost::class);
+        $projectsInspiringRepository = $this->em->getRepository(ProjectsInspiring::class);
+
+        $dreams = count($dreamRepository->findAll());
+        $revolts = count($revoltRepository->findAll());
+        $projectsBoost = count($projectsBoostRepository->findAll());
+        $projectsInspiring = count($projectsBoostRepository->findAll());
+
+        $nbContrib = $dreams + $revolts + $projectsBoost + $projectsInspiring;
+
+        return $nbContrib;
     }
 
 }

templates/frontend/carto-carte.html.twig

@@ -0,0 +1,144 @@
+{% extends 'frontend/carto.html.twig' %}
+
+{% block carto %}
+    <div id="carto-carte">
+        <h1 class="title-carte">Une carte du Nord Franche-Comté</h1>
+        <div class="row row-contrib">
+            <div class="col-3">
+                <div class="row">
+                    <div class="col-5">
+                        <img src="{{ 'assets/img/Picto-Revoltes.png' }}" title="">
+                    </div>
+                    <div class="col-7 revolt">
+                        <div>Nos révoltes</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-3">
+                <div class="row">
+                    <div class="col-5">
+                        <img src="{{ 'assets/img/Picto-Reve.png' }}" title="">
+                    </div>
+                    <div class="col-7 dream">
+                        Nos rêves
+                    </div>
+                </div>
+            </div>
+            <div class="col-3">
+                <div class="row">
+                    <div class="col-5">
+                        <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" title="">
+                    </div>
+                    <div class="col-7 project-boost">
+                        Les actions à booster
+                    </div>
+                </div>
+            </div>
+            <div class="col-3">
+                <div class="row">
+                    <div class="col-5">
+                        <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" title="">
+                    </div>
+                    <div class="col-7 project-insp">
+                        Les actions inspirantes
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="help-legend">Cliquer sur les pictos pour découvrir les résultats de la consultation par territoire !</div>
+
+        <div class="map">
+            <img src="{{ 'assets/img/Carte-NFC.png' }}" alt="carte">
+
+            <div class="img-map img-vosges">
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
+                </a>
+            </div>
+
+            <div class="img-map img-belfort">
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
+                </a>
+            </div>
+
+            <div class="img-map img-hericourt">
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
+                </a>
+            </div>
+
+            <div class="img-map img-montbeliard">
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
+                </a>
+            </div>
+
+            <div class="img-map img-montbeliard">
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
+                </a>
+            </div>
+
+            <div class="img-map img-sud">
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
+                </a>
+                <a href="" title="">
+                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
+                </a>
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/frontend/carto-int.html.twig

@@ -0,0 +1,11 @@
+{% extends 'frontend/carto.html.twig' %}
+
+{% block carto %}
+    <div id="carto-int">
+        <h1 class="title-interactive">La cartographie interactive Nord Franche-Comté</h1>
+
+        <div class="carto-bulles">
+            Bubulle!
+        </div>
+    </div>
+{% endblock %}

templates/frontend/carto-liste.html.twig

@@ -0,0 +1,7 @@
+{% extends 'frontend/carto.html.twig' %}
+
+{% block carto %}
+    <div id="carto-liste">
+        liste !
+    </div>
+{% endblock %}

templates/frontend/carto.html.twig

@@ -0,0 +1,96 @@
+{% extends 'frontend/base.html.twig' %}
+
+{% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %}
+
+{% block meta %}
+    <meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté"/>
+    <meta name="description"
+          content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !"/>
+{% endblock %}
+
+{% block body %}
+    <div class="bloc-carto-revo">
+        <div class="container">
+            <div class="row">
+                <div class="col-6">
+                    <h1>La cartographie r<span>ê</span>volutionnaire</h1>
+                    <h2>Partez à la découverte des besoins des citoyens du Nord Franche-Comté !</h2>
+                    <p>Cette cartographie interactive est réalisée grâce à la
+                        consultation sur le terrain et en ligne des citoyens et plus
+                        particulièrement des personnes exclues du débat public,
+                        mais aussi des acteurs institutionnels, du monde éco-
+                        nomique et de l’ESS. Avec 4 thématiques de questions
+                        : leurs révoltes, leurs rêves, les actions existantes qu’ils
+                        aimeraient voir se développer et des actions d’ailleurs qui
+                        les inspirent !</p>
+                </div>
+                <div class="col-6">
+                    <img class="perso-aac" src="{{ 'assets/img/Visuel-Cartographie.png' }}" alt="cartographie">
+                    <div class="bloc-contrib">
+                        <div class="nb-contrib">
+                            {{ nbContrib }}
+                        </div>
+                        <div class="contrib">
+                            contributions
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container bloc-carto">
+        <div class="row">
+            <div class="col-4">
+                <a href="{{ path('app_carto_interactive') }}#carto-bulles" title="cartographie interactive" class="box-carto">
+                    <div>
+                        <img src="{{ 'assets/img/Picto-Cartographie-Interactive.png' }}" alt="">
+                    </div>
+                    Une cartographie interactive
+                </a>
+            </div>
+            <div class="col-4">
+                <a href="{{ path('app_carto_liste') }}#carto-liste" title="une simple liste" class="box-carto">
+                    <div>
+                        <img src="{{ 'assets/img/Picto-Simple-Liste.png' }}" alt="">
+                    </div>
+                    Une simple liste
+                </a>
+            </div>
+            <div class="col-4">
+                <a href="{{ path('app_carto_carte') }}#carto-carte" title="Une carte du Nord Franche-Comté interactive " class="box-carto">
+                    <div>
+                        <img src="{{ 'assets/img/Picto-Carto-Territoire.png' }}" alt="">
+                    </div>
+                    Une carte du Nord Franche-Comté interactive
+                </a>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-12">
+                <div class="bloc-download">
+                    Télécharger la liste des ressources
+
+                    <div class="row">
+                        <div class="col-6">
+                            <a class="download excel" href="" title="Télécharger">
+                                EXCEL
+                            </a>
+                        </div>
+                        <div class="col-6">
+                            <a class="download pdf" href="" title="Télécharger">
+                                PDF
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                {% block carto %}{% endblock %}
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/frontend/header.html.twig

@@ -4,7 +4,7 @@
             <div class="row row-toggle">
                 <div class="col-12">
                     <button class="toggle" type="button">
-                        CLOSE
+                        <img src="{{ 'assets/img/Croix-Menu.png' }}" alt="">
                     </button>
                 </div>
             </div>
@@ -45,7 +45,7 @@
                     </ul>
                 </nav>
                 <div class="col-6 col-logo">
-                    <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt="Logo AAC">
+                    <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.png' }}" alt="Logo AAC">
                 </div>
             </div>
         </div>
@@ -53,7 +53,7 @@
     <div class="fixed-top menu-fixed">
         <nav class="navbar">
             <a class="navbar-brand" href="#">
-                <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt="Logo AAC">
+                <img src="{{ 'assets/img/Logo-AAC-Seul.png' }}"  alt="Logo AAC">
             </a>
             <a class="participate" href="">
                 PARTICIPER