macro contact with subject + quelques modifs de style

assets/app/frontend/scss/about.scss

       font-weight: bold;
       margin-top: 100px;
       margin-bottom: 40px;
+      font-size: 40px;
     }
 
     p {
       margin-top: 20px;
       margin-bottom: 30px;
       font-weight: bold;
-      border-bottom: 2px solid #dc5b2f;
-      text-decoration: none;
       margin-bottom: 100px;
     }
   }
     h2 {
       margin-bottom: 40px;
       font-weight: bold;
+      font-size: 40px;
     }
 
 
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
+      font-size: 40px;
 
       .picto-labourage {
         vertical-align: baseline;
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
+      font-size: 40px;
 
       .picto-labourage {
         vertical-align: baseline;
 
     .subscribe-event {
       border: 2px solid $green;
-      color: $green;
       padding: 15px;
       font-size: 22px;
       margin-top: 40px;
       display: inline-block;
+
+      a {
+        color: $green;
+      }
     }
 
     .logo-event {
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
+      font-size: 40px;
 
       .picto-ressource {
         vertical-align: baseline;
 
     .contribuate {
       border: 2px solid $yellow;
-      color: $green;
       font-size: 22px;
       padding: 15px;
       font-size: 22px;
       margin-top: 40px;
       display: inline-block;
+
+      a {
+        color: $green;
+      }
     }
   }
   
         font-weight: bold;
         text-align: center;
         margin-bottom: 50px;
+        font-size: 40px;
       }
 
       p {
       h2 {
         font-weight: bold;
         margin-bottom: 50px;
+        font-size: 40px;
       }
 
       .join-coeur {
-        color: $green;
         border: 2px solid $green;
         display: inline-block;
         padding: 15px;
         font-size: 22px;
         margin-top: 50px;
+
+        a {
+          color: $green;
+        }
       }
     }
   }

assets/app/frontend/scss/base.scss

   padding: 15px;
   margin-top: 50px;
   margin-bottom: 50px;
+}
+
+.link-slide {
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: $orange;
+    transition: opacity 300ms, transform 300ms;
+    opacity: 1;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &:hover::after,
+  &:focus::after {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 }

assets/app/frontend/scss/contact.scss

       font-weight: bold;
       padding: 15px;
       font-size: 30px;
+
+      &:hover {
+        border-color: $yellow;
+      }
     }
   }
 }

assets/app/frontend/scss/header.scss

                 color: $green;
                 font-size: 50px;
                 line-height: 50px;
+
+                &:hover {
+                  color: $yellow;
+                }
               }
 
               &.contact {

assets/app/frontend/scss/home.scss

       }
 
       h2 {
+        font-family: FranklinGothic;
         width: 50%;
         margin-top: 55px;
-        font-weight: bold;
         font-size: 27px;
+        line-height: 38px;
       }
 
       .discover {
       margin-bottom: 30px;
       color: $green;
       font-weight: bold;
-      border-bottom: 2px solid $orange;
       text-decoration: none;
     }
 
+
     .link-concert {
       color: $yellow;
       background-color: $green;
       padding: 20px 10px;
       position: absolute;
       bottom: 5%;
-      right: 10%;
+      left: 15px;
       font-family: dinbold;
       font-size: 20px;
       font-weight: bold;
     }
 
     .subscribe {
-      color: $green;
       border: 1px solid $green;
       padding: 10px 40px;
       position: absolute;
       bottom: 0;
       font-size: 23px;
+
+      a {
+        color: $green;
+      }
+
+      &:hover {
+        border-color: $yellow;
+      }
     }
   }
 
       display: inline-block;
       padding: 15px 15px;
       border: 2px solid $yellow;
-      color: #FFF;
       margin-top: 40px;
       font-size: 23px;
+
+      a {
+        color: #FFF;
+      }
     }
 
     .ressourcerie {

public/build/entrypoints.json

         "/build/app-frontend.5284a67c.js"
       ],
       "css": [
-        "/build/app-frontend.aed4cf6d.css"
+        "/build/app-frontend.8f0b3f15.css"
       ]
     }
   }

public/build/manifest.json

   "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.aed4cf6d.css",
+  "build/app-frontend.css": "/build/app-frontend.8f0b3f15.css",
   "build/app-frontend.js": "/build/app-frontend.5284a67c.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/Twig/AppExtension.php

+<?php
+
+namespace App\Twig;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class AppExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('rot13', [$this, 'rot13']),
+        ];
+    }
+
+    public function rot13(string $string): string
+    {
+        return str_rot13($string);
+    }
+}

templates/frontend/about.html.twig

 {% 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 %}
 
                         solutions qui ont émergé en France et qui sont inspirantes
                         pour le territoire.
                     </p>
-                    <a class="other-startup" target="_blank" href="http://startupdeterritoire.fr" title="Les autres start up">Découvrir les autres Start Up de
+                    <a class="other-startup link-slide" target="_blank" href="http://startupdeterritoire.fr" title="Les autres start up">Découvrir les autres Start Up de
                         Territoires</a>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="container container-step1">
+    <div id="labourage" class="container container-step1">
         <div class="row">
             <div class="col-6">
                 <img class="logo-labourage" src="{{ 'assets/img/Labourage-Img.png' }}" alt="Labourage">
                     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>
+                <a class="participate" href="{{ path('app_contribuate') }}" title="Participer à la concertation">Participer à la concertation</a>
             </div>
         </div>
     </div>
 
-    <div class="bloc-recolte">
+    <div id="recolte" class="bloc-recolte">
         <div class="container">
             <div class="row">
                 <div class="col-7">
                         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 class="subscribe-event">
+                        {{ macro.email_contact("S'INSCRIRE A L’ÉVÉNEMENT", "S'inscrire à l'événement (La récolte des solutions)") }}
+                    </div>
                 </div>
                 <div class="col-5">
                     <img class="logo-event" src="{{ 'assets/img/Evenement-Img.png' }}" alt="Evenement">
         </div>
     </div>
 
-    <div class="container container-ressource">
+    <div id="accompagnement" class="container container-ressource">
         <div class="row">
             <div class="col-5">
                 <img class="logo-ressource" src="{{ 'assets/img/Ressourcerie-Img.png' }}" alt="Ressourcerie">
                     et bénéficier des ressources facilitant le montage de
                     projets.
                 </p>
-                <a class="contribuate" href="" title="">CONTRIBUER A LA RESSOURCERIE</a>
+                <div class="contribuate">
+                    {{ macro.email_contact("CONTRIBUER A LA RESSOURCERIE", "Contribuer à la ressourcerie") }}
+                </div>
             </div>
         </div>
     </div>
             </div>
         </div>
 
-        <div class="container container-coeur">
+        <div id="team-coeur" class="container container-coeur">
             <div class="row justify-content-center">
                 <div class="col-10">
                     <h2>... et accompagnée par l’équipe cœur</h2>
                         participer à la mise en oeuvre de cette concertation,
                         n’hésitez pas à nous rejoindre !
                     </p>
-                    <a class="join-coeur" href="" title="ÉQUIPE CŒUR">REJOINDRE L’ÉQUIPE CŒUR</a>
+                    <div class="join-coeur">
+                        {{ macro.email_contact("REJOINDRE L’ÉQUIPE CŒUR", "Rejoindre l'équipe coeur") }}
+                    </div>
                 </div>
                 <div class="col-5">
                     <img class="logo-coeur" src="{{ 'assets/img/Equipe-Coeur-Img.png' }}" alt="coeur">

templates/frontend/carto-liste.html.twig

                 <a href="" class="export export-pdf" title="Exporter au format PDF">Exporter au format PDF</a>
             </div>
         </div>
-
-        <table class="table-search">
-            <thead>
-            <tr>
-                <th>Catégorie</th>
-                <th>Thématique</th>
-                <th>Contribution</th>
-                <th>Lieu</th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for result in resultArray %}
+        {% if resultArray %}
+            <table class="table-search">
+                <thead>
                 <tr>
-                    <td>{{ result }}</td>
-                    <td>{{ result }}</td>
-                    <td>{{ result }}</td>
-                    <td>{{ result }}</td>
+                    <th>Catégorie</th>
+                    <th>Thématique</th>
+                    <th>Contribution</th>
+                    <th>Lieu</th>
                 </tr>
-            {% endfor %}
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                {% for result in resultArray %}
+                    <tr>
+                        <td>{{ result }}</td>
+                        <td>{{ result }}</td>
+                        <td>{{ result }}</td>
+                        <td>{{ result }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
     </div>
 {% endblock %}

templates/frontend/footer.html.twig

                     <li class="title-list">Aux Actes Citoyens</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>
+                    <li><a href="{{ path('app_about') }}#team-coeur" title="L’équipe coeur">L’équipe coeur</a></li>
                 </ul>
             </div>
             <div class="col-5">
                 <ul>
                     <li class="title-list">Les trois étapes</li>
-                    <li><a href="" title="Le labourage">Le labourage</a></li>
-                    <li><a href="" title="La récolte des solutions">La récolte des solutions</a></li>
-                    <li><a href="" title="Le Compagnonnage">Le Compagnonnage</a></li>
+                    <li><a href="{{ path('app_about') }}#labourage" title="Le labourage">Le labourage</a></li>
+                    <li><a href="{{ path('app_about') }}#recolte" title="La récolte des solutions">La récolte des solutions</a></li>
+                    <li><a href="{{ path('app_about') }}#accompagnement" title="Le Compagnonnage">Le Compagnonnage</a></li>
                 </ul>
             </div>
             <div class="col-4 bloc-coop">

templates/frontend/home.html.twig

 {% 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 %}
 
                         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="{{ path('app_carto_interactive') }}" title="Découvrir la cartographie">Découvrir la cartographie</a>
+                    <a class="link-carto link-slide" 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>
                                 rejoignez-nous et inscrivez-vous à ce rendez-vous
                                 unique !
                             </p>
-                            <a class="subscribe" href="" title="S’INSCRIRE A L’ÉVÉNEMENT">S’INSCRIRE A L’ÉVÉNEMENT</a>
+                            <div class="subscribe">
+                                {{ macro.email_contact("S'INSCRIRE A L’ÉVÉNEMENT", "S'inscrire à l'événement (Le planisphère des Solutions)") }}
+                            </div>
                         </div>
                     </div>
                 </div>
                         plein d’autres choses ! Vous souhaitez contriber à cette
                         ressourcerie, n’hésitez pas à nous contacter
                     </p>
-                    <a class="contribuate" href="" title="CONTRIBUER A LA RESSOURCERIE">CONTRIBUER A LA RESSOURCERIE</a>
+                    <div class="contribuate">
+                        {{ macro.email_contact("CONTRIBUER A LA RESSOURCERIE", "Contribuer à la ressourcerie") }}
+                    </div>
                 </div>
                 <div class="col-6">
                     <img class="ressourcerie" src="{{ 'assets/img/Ressourcerie.png' }}" alt="ressourcerie">

templates/frontend/macro.html.twig

-{% macro email_contact() %}
+{% macro email_contact(text, subject) %}
     {# rot13 : https://rot13.com/ #}
     <script>
-        document.write("<n uers=\"znvygb:ntve@ynpbbcrengvirqrfpvgblraf.se\" ery=\"absbyybj\">ntve@ynpbbcrengvirqrfpvgblraf.se</n>".replace(/[a-zA-Z]/g, function (c) {
+        {% if text is empty %}
+        var text = "ntve@ynpbbcrengvirqrfpvgblraf.se";
+        {% else %}
+        var text = "{{ text|rot13 }}";
+        {% endif %}
+        var subject = "";
+        {% if subject is not empty %}
+        var subject = "?fhowrpg={{ subject|rot13 }}";
+        {% endif %}
+        document.write(("<n uers=\"znvygb:ntve@ynpbbcrengvirqrfpvgblraf.se" + subject + "\" ery=\"absbyybj\">" + text + "</n>").replace(/[a-zA-Z]/g, function (c) {
             return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
         }));
     </script>