a propos + contact + un peu tout

assets/app/frontend/app/app.scss

@@ -7,6 +7,9 @@
 @import "../scss/carto-carte";
 @import "../scss/carto-liste";
 @import "../scss/carto-int";
+@import "../scss/about";
+@import "../scss/contact";
+@import "../scss/contribuate";
 @import "../scss/header";
 @import "../scss/footer";
 @import "../scss/responsive";

assets/app/frontend/scss/about.scss

@@ -0,0 +1,220 @@
+#app_about {
+  .bloc-discover {
+    background-color: $green;
+
+    .container-discover {
+      position: relative;
+      min-height: 750px;
+
+      img {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        max-height: 80%;
+      }
+
+      h1 {
+        color: #FFF;
+        font-family: franklinregular;
+        font-size: 75px;
+        line-height: 67px;
+        margin-top: 100px;
+        margin-bottom: 75px;
+      }
+
+      p {
+        color: #FFF;
+        font-size: 20px;
+        margin-bottom: 50px;
+      }
+
+      .download-plaq {
+        background-color: $yellow;
+        color: $green;
+        text-transform: uppercase;
+        padding: 10px;
+        font-size: 25px;
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+
+  .container-startup {
+    background-color: $yellow;
+    color: $green;
+
+    img {
+      max-width: 80%;
+      max-height: 80%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      left: 50%;
+    }
+
+    h2 {
+      font-weight: bold;
+      margin-top: 100px;
+      margin-bottom: 40px;
+    }
+
+    p {
+      font-size: 17px;
+    }
+
+    .other-startup {
+      color: $green;
+      font-size: 20px;
+      display: inline-block;
+      margin-top: 20px;
+      margin-bottom: 30px;
+      font-weight: bold;
+      border-bottom: 2px solid #dc5b2f;
+      text-decoration: none;
+      margin-bottom: 100px;
+    }
+  }
+
+  .container-manifeste {
+    padding-bottom: 100px;
+    padding-top: 100px;
+
+    h2 {
+      color: $green;
+      text-align: center;
+      font-size: 40px;
+      font-weight: bold;
+      margin-bottom: 70px;
+
+      span {
+        color: $orange;
+      }
+
+    }
+  }
+
+  .bloc-three-step {
+    background-color: $green;
+    color: #FFF;
+    padding-top: 100px;
+    padding-bottom: 100px;
+
+    h2 {
+      margin-bottom: 40px;
+      font-weight: bold;
+    }
+
+
+    .row-step {
+      text-align: center;
+
+      img {
+        margin-right: 15px;
+      }
+
+      h3 {
+        color: $yellow;
+        font-family: franklinregular;
+        margin-top: 30px;
+      }
+
+      p {
+        width: 80%;
+        display: inline-block;
+      }
+    }
+  }
+
+  .container-step1 {
+    color: $green;
+    padding-top: 100px;
+    padding-bottom: 100px;
+
+    .logo-labourage {
+      width: 90%;
+    }
+
+    h2 {
+      font-weight: bold;
+      margin-bottom: 30px;
+
+      .picto-labourage {
+        vertical-align: baseline;
+      }
+    }
+
+    .participate {
+      color: $yellow;
+      background-color: $green;
+      padding: 15px;
+      font-size: 22px;
+      margin-top: 30px;
+      display: inline-block;
+    }
+  }
+
+  .bloc-recolte {
+    background-color: $yellow;
+    color: $green;
+    padding-top: 100px;
+    padding-bottom: 100px;
+
+    h2 {
+      font-weight: bold;
+      margin-bottom: 30px;
+
+      .picto-labourage {
+        vertical-align: baseline;
+      }
+    }
+
+    .subscribe-event {
+      border: 2px solid $green;
+      color: $green;
+      padding: 15px;
+      font-size: 22px;
+      margin-top: 40px;
+      display: inline-block;
+    }
+
+    .logo-event {
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      left: 50%;
+    }
+  }
+
+  .container-ressource {
+    color: $green;
+    padding-top: 100px;
+    padding-bottom: 100px;
+
+    h2 {
+      font-weight: bold;
+      margin-bottom: 30px;
+
+      .picto-ressource {
+        vertical-align: baseline;
+      }
+    }
+
+    .logo-ressource {
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      left: 50%;
+    }
+
+    .contribuate {
+      border: 2px solid $yellow;
+      color: $green;
+      font-size: 22px;
+      padding: 15px;
+      font-size: 22px;
+      margin-top: 40px;
+      display: inline-block;
+    }
+  }
+}

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

@@ -1,3 +1,10 @@
 #carto-liste {
+  margin-top: 75px;
 
+  .title-liste {
+    color: $green;
+    font-size: 50px;
+    font-family: franklinregular;
+    text-align: center;
+  }
 }

assets/app/frontend/scss/contact.scss

@@ -0,0 +1,62 @@
+#app_contact {
+
+  .bloc-contact {
+    background-color: $yellow;
+
+    h1 {
+      color: $green;
+      font-family: franklinregular;
+      font-size: 75px;
+      line-height: 67px;
+      margin-top: 100px;
+      margin-bottom: 35px;
+    }
+
+    p {
+      color: $orange;
+      font-style: italic;
+      font-size: 20px;
+      margin-bottom: 50px;
+      width: 50%;
+    }
+
+    .perso-contact {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+
+    .sut-contact {
+      margin-top: 15%;
+    }
+
+    .row-contact {
+      position: relative;
+      min-height: 750px;
+    }
+  }
+
+  .bloc-address {
+    margin-top: 75px;
+
+    .background-green {
+      color: #FFF;
+      background-color: #83A775;
+      display: inline-block;
+      padding: 5px;
+      margin-top: 42px;
+    }
+
+    .address-contact {
+      color: $green;
+      font-size: 37px;
+      margin-bottom: 5px;
+    }
+
+    .link-contact a {
+      color: $green;
+      text-decoration: underline;
+      font-size: 37px;
+    }
+  }
+}

assets/app/frontend/scss/contribuate.scss

@@ -0,0 +1,68 @@
+#app_contribuate {
+  .bloc-revolt-dream {
+    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;
+    }
+
+    .carto-dream {
+      margin-top: 50px;
+    }
+
+    .bloc-contrib {
+      text-align: right;
+      font-family: franklinregular;
+      color: $green;
+
+      .you-are {
+        font-size: 40px;
+        height: 20px;
+      }
+
+      .nb-contrib {
+        color: $orange;
+        font-size: 126px;
+        height: 150px;
+      }
+
+      .contrib {
+        font-size: 70px;
+      }
+    }
+  }
+
+  .bloc-form {
+    margin-top: 75px;
+
+    .title-form {
+      color: $green;
+      font-size: 50px;
+      font-family: franklinregular;
+      text-align: center;
+    }
+  }
+}

assets/app/frontend/scss/home.scss

@@ -61,7 +61,7 @@
       margin-bottom: 50px;
     }
 
-    h1 {
+    h2 {
       margin-top: 100px;
       margin-bottom: 40px;
       font-weight: bold;
@@ -105,7 +105,7 @@
       max-width: 70%;
     }
 
-    h1 {
+    h2 {
       text-align: center;
       font-size: 40px;
       font-weight: bold;
@@ -137,7 +137,7 @@
     padding-top: 100px;
     padding-bottom: 100px;
 
-    h1 {
+    h2 {
       margin-bottom: 50px;
       font-size: 40px;
       font-weight: bold;

config/routes.yaml

@@ -28,4 +28,16 @@ app_carto_liste:
 
 app_carto_carte:
   path: /cartographie-carte
-  controller: App\Controller\Frontend\DefaultController::cartoCarte
+  controller: App\Controller\Frontend\DefaultController::cartoCarte
+
+app_contact:
+  path: /contact
+  controller: App\Controller\Frontend\DefaultController::contact
+
+app_about:
+  path: /a-propos
+  controller: App\Controller\Frontend\DefaultController::about
+
+app_contribuate:
+  path: /contribution-individuel
+  controller: App\Controller\Frontend\DefaultController::contribuate

public/build/entrypoints.json

@@ -120,7 +120,7 @@
         "/build/app-frontend.f50d644b.js"
       ],
       "css": [
-        "/build/app-frontend.27939268.css"
+        "/build/app-frontend.d3c2f7e8.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.27939268.css",
+  "build/app-frontend.css": "/build/app-frontend.d3c2f7e8.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

@@ -55,6 +55,26 @@ class DefaultController extends AbstractController
         );
     }
 
+    public function contact()
+    {
+        return $this->render('frontend/contact.html.twig');
+    }
+
+    public function about()
+    {
+        return $this->render('frontend/about.html.twig');
+    }
+
+    public function contribuate()
+    {
+        return $this->render(
+            'frontend/contribuate.html.twig',
+            [
+                'nbContrib' => $this->countContrib()
+            ]
+        );
+    }
+
     public function mention(): Response
     {
         $pageRepository = $this->em->getRepository(Page::class);

templates/frontend/about.html.twig

@@ -0,0 +1,167 @@
+{% 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-discover">
+        <div class="container container-discover">
+            <img class="carto-dream" src="{{ 'assets/img/Accueil-A-Propos.png' }}" alt="cartographie">
+            <div class="row">
+                <div class="col-9">
+                    <h1>Partez à la découverte d’Aux Actes Citoyens !</h1>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-4">
+                    <p>Une démarche inédite de concertation pour imaginer ensemble le futur du Nord Franche-Comté !</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-3">
+                    <a class="download-plaq" href="" title="Télécharger la plaquette">Télécharger la plaquette</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="container container-startup">
+            <div class="row">
+                <div class="col-6">
+                    <img src="{{ 'assets/img/SUT-A-propos.png' }}" alt="start up">
+                </div>
+                <div class="col-6">
+                    <h2>Une démarche labellisée Start Up de Territoire</h2>
+                    <p>
+                        Aux Actes Citoyens est labelissé Start Up de Territoire pour le
+                        Nord Franche-Comté. Cette démarche bénéficie donc du soutient des autres territoires en France, mais également des
+                        solutions qui ont émergé en France et qui sont inspirantes
+                        pour le territoire.
+                    </p>
+                    <a class="other-startup" href="" title="Les autres start up">Découvrir les autres Start Up de Territoires</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container container-manifeste">
+        <div class="row">
+            <div class="col-12">
+                <h2>Le manifeste <span>Aux Actes Citoyens</span></h2>
+            </div>
+        </div>
+    </div>
+
+    <div class="bloc-three-step">
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <h2>Les trois étapes</h2>
+                </div>
+            </div>
+            <div class="row row-step">
+                <div class="col-4">
+                    <img src="{{ 'assets/img/Etape1-Labourage-Blanc.png' }}" alt="Etape1">
+                    <h3>LE LABOURAGE</h3>
+                    <p>
+                        (sept. 2021 à février 2022)
+                        Collecte des besoins, grâce à
+                        des ateliers sur les différents
+                        territoires ainsi qu’une démarche en ligne.
+                    </p>
+                </div>
+                <div class="col-4">
+                    <img src="{{ 'assets/img/Etape2-EvenementBlanc.png' }}" alt="Etape2">
+                    <h3>LA RÉCOLTE DES SOLUTIONS</h3>
+                    <p>(avril 2022)
+                        Organisation d’un grand événement à l’échelle du Nord
+                        Franche-Comté pour inventer les
+                        solutions de demain.</p>
+                </div>
+                <div class="col-4">
+                    <img src="{{ 'assets/img/Etape3-Accompagnement-Blanc.png' }}" alt="Etape3">
+                    <h3>L’ACCOMPAGNEMENT</h3>
+                    <p>
+                        (à partir de juin 2022)
+                        Compagnonnage des solutions
+                        par un réseau d’acteurs de l’accompagnement.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container container-step1">
+        <div class="row">
+            <div class="col-6">
+                <img class="logo-labourage" src="{{ 'assets/img/Labourage-Img.png' }}" alt="Labourage">
+            </div>
+            <div class="col-6">
+                <h2>
+                    <img class="picto-labourage" src="{{ 'assets/img/Picto-Labourage-Vert.png' }}" alt="Labourage">
+                    Le labourage
+                </h2>
+                <p>
+                    Etape permettant de aire émerger “des Révoltes et des
+                    Rêves” pour chaque territoire en se rapprochant d’un
+                    maximum de personnes les plus diverses possibles et
+                    en s’appuyant sur les acteurs en place pour mobiliser et
+                    concerter les publics. L’objectif : faire émerger les thé-
+                    matiques des ateliers de recherche de solutions.
+                </p>
+                <a class="participate" href="" title="Participer à la concertation">Participer à la concertation</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="bloc-recolte">
+        <div class="container">
+            <div class="row">
+                <div class="col-7">
+                    <h2>
+                        <img class="picto-labourage" src="{{ 'assets/img/Picto-Evenement-Vert.png' }}" alt="Evenement vert">
+                        La récolte des solutions
+                    </h2>
+                    <p>
+                        Un événement d’une journée pour faire émerger
+                        des solutions sous forme d’initiatives nouvelles sur
+                        chaque territoire. Au cours de cet événement, des
+                        ateliers rassemblant citoyens, entreprises acteurs de
+                        l’ESS et institutions, pour un territoire qui invente collectivement son avenir.
+                    </p>
+                    <a class="subscribe-event" href="" title="">S’INSCRIRE A L’ÉVÉNEMENT</a>
+                </div>
+                <div class="col-5">
+                    <img class="logo-event" src="{{ 'assets/img/Evenement-Img.png' }}" alt="Evenement">
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="container container-ressource">
+        <div class="row">
+            <div class="col-5">
+                <img class="logo-ressource" src="{{ 'assets/img/Ressourcerie-Img.png' }}" alt="Ressourcerie">
+            </div>
+
+            <div class="col-7">
+                <h2>
+                    <img class="picto-ressource" src="{{ 'assets/img/Picto-Accompagnement-Vert.png' }}" alt="Accompagnement vert">
+                    L’accompagnement
+                </h2>
+                <p>
+                    A partir de juin 2022, toutes les solutions qui ont émergé pourront être accompagné par les acteurs de l’accompagnement à la création d’entreprise. Vous pourrez
+                    consulter la ressourcerie pour connaître ses acteurs
+                    et bénéficier des ressources facilitant le montage de
+                    projets.
+                </p>
+                <a class="contribuate" href="" title="">CONTRIBUER A LA RESSOURCERIE</a>
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/frontend/carto-liste.html.twig

@@ -2,6 +2,7 @@
 
 {% block carto %}
     <div id="carto-liste">
-        liste !
+        <h1 class="title-liste">La liste simple... et rêvolutionnaire !</h1>
+
     </div>
 {% endblock %}

templates/frontend/contact.html.twig

@@ -0,0 +1,52 @@
+{% extends 'frontend/base.html.twig' %}
+{% import 'frontend/macro.html.twig' as macro %}
+
+{% 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-contact">
+        <div class="container">
+            <div class="row row-contact">
+                <div class="col-9">
+                    <h1>Contactez l’équipe d’Aux Actes Citoyens !</h1>
+                    <p>Des questions, une envie de s’engager avec nous, n’hésitez pas à nous contacter !</p>
+                </div>
+                <div class="col-3">
+                    <img class="sut-contact" src="{{ 'assets/img/SUT-Contacts.png' }}" alt="SUT contact">
+                </div>
+                <img class="perso-contact" src="{{ 'assets/img/Perso-Feuilles-Contacts.png' }}" alt="Perso contact">
+            </div>
+        </div>
+    </div>
+
+    <div class="container bloc-address">
+        <div class="row">
+            <div class="col-6">
+                <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.png' }}" alt="Logo AAC">
+            </div>
+            <div class="col-6">
+                <p class="background-green">
+                    Vous pouvez nous joindre par courrier et par email :
+                </p>
+                <p class="address-contact">
+                    La Coopérative des Citoyens
+                </p>
+                <p class="address-contact">
+                    150 avenue Jean Jaurès
+                </p>
+                <p class="address-contact">
+                    90000 Belfort
+                </p>
+                <div class="link-contact">
+                    {{ macro.email_contact() }}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/frontend/contribuate.html.twig

@@ -0,0 +1,54 @@
+{% 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-revolt-dream">
+        <div class="container">
+            <div class="row">
+                <div class="col-6">
+                    <h1>Nos révoltes et nos rêves pour notre territoire</h1>
+                    <h2>Afin de rechercher des solutions concrètes pour ...</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore ma-
+                        gna aliqua. Ut enim ad minim veniam, quis nostrud exer-
+                        citation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in volup-
+                        tate velit esse cillum dolore eu fugiat nu. mco laboris nisi
+                        ut aliquip ex ea commodo consequat. Duis aute irure do-
+                        lor in reprehenderit in voluptate velit esse cillum dolore eu
+                        fugiat nu.</p>
+                </div>
+                <div class="col-6">
+                    <img class="carto-dream" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
+                    <div class="bloc-contrib">
+                        <div class="you-are">
+                            Vous êtes le :
+                        </div>
+                        <div class="nb-contrib">
+                            {{ nbContrib }}
+                        </div>
+                        <div class="contrib">
+                            contributeurs
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container bloc-form">
+        <div class="row">
+            <div class="col-12">
+                <h1 class="title-form">Formulaire de contribution individuel</h1>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}

templates/frontend/footer.html.twig

@@ -5,7 +5,7 @@
             <div class="col-3">
                 <ul>
                     <li class="title-list">Aux Actes Citoyens</li>
-                    <li><a href="" title="A propos">A propos</a></li>
+                    <li><a href="{{ path('app_about') }}" title="A propos">A propos</a></li>
                     <li><a href="" title="Devenez partenaire">Devenez partenaire</a></li>
                     <li><a href="" title="L’équipe coeur">L’équipe coeur</a></li>
                 </ul>

templates/frontend/header.html.twig

@@ -13,32 +13,32 @@
                     <ul>
                         <li>
                             <span class="yellow-trait"></span>
-                            <a href="" title="Accueil">
+                            <a href="{{ path('app_homepage') }}" title="Accueil">
                                 Accueil
                             </a>
                         </li>
                         <li>
-                            <a href="" title="Cartographie rêvolutionnaire">
+                            <a href="{{ path('app_carto_interactive') }}" title="Cartographie rêvolutionnaire">
                                 Cartographie rêvolutionnaire
                             </a>
                         </li>
                         <li>
-                            <a href="" title="Planisphère des solutions">
+                            <a href="{{ path('app_homepage') }}#planisphere" title="Planisphère des solutions">
                                 Planisphère des solutions
                             </a>
                         </li>
                         <li>
-                            <a href="" title="Ressourcerie">
+                            <a href="{{ path('app_homepage') }}#ressourcerie" title="Ressourcerie">
                                 Ressourcerie
                             </a>
                         </li>
                         <li>
-                            <a href="" title="A propos">
+                            <a href="{{ path('app_about') }}" title="A propos">
                                 A propos
                             </a>
                         </li>
                         <li class="contact">
-                            <a href="" title="Contacts">
+                            <a href="{{ path('app_contact') }}" title="Contacts">
                                 CONTACTS
                             </a>
                         </li>
@@ -52,7 +52,7 @@
     </div>
     <div class="fixed-top menu-fixed">
         <nav class="navbar">
-            <a class="navbar-brand" href="#">
+            <a class="navbar-brand" href="{{ path('app_homepage') }}">
                 <img src="{{ 'assets/img/Logo-AAC-Seul.png' }}"  alt="Logo AAC">
             </a>
             <a class="participate" href="">

templates/frontend/home.html.twig

@@ -30,24 +30,24 @@
                     <img class="cartographie" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
                 </div>
                 <div class="col-6">
-                    <h1>La cartographie r<span>ê</span>volutionnaire</h1>
+                    <h2>La cartographie r<span>ê</span>volutionnaire</h2>
                     <p>Pour mieux comprendre les besoins du Nord Franche-Comté,
                         cette cartographie 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 économique et de l’ESS.</p>
-                    <a class="link-carto" href="" title="Découvrir la cartographie">Découvrir la cartographie</a>
+                    <a class="link-carto" href="{{ path('app_carto_interactive') }}" title="Découvrir la cartographie">Découvrir la cartographie</a>
                     <a class="link-concert" href="" title="Participer à la concertation">Participer à la concertation</a>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="bloc-planisphere">
+    <div id="planisphere" class="bloc-planisphere">
         <div class="container">
             <div class="row">
                 <div class="col-12">
-                    <h1>Le planisphère des <span>S</span>olutions</h1>
+                    <h2>Le planisphère des <span>S</span>olutions</h2>
                     <div class="row">
                         <div class="col-6">
                             <img src="{{ 'assets/img/Visuel-Affiche.png' }}" alt="affiche">
@@ -76,11 +76,11 @@
         </div>
     </div>
 
-    <div class="bloc-ressourcerie">
+    <div id="ressourcerie" class="bloc-ressourcerie">
         <div class="container">
             <div class="row">
                 <div class="col-6">
-                    <h1>Ressourcerie</h1>
+                    <h2>Ressourcerie</h2>
                     <p>A partir de juin 2022, vous pourrez découvrir la Res-
                         sourcerie «Aux Actes Citoyens» qui permettra à tous de
                         connaître la manière de créer un projet, de l’animer,