responsive

assets/app/frontend/app/app.scss

 @import "../scss/about";
 @import "../scss/contact";
 @import "../scss/contribuate";
+@import "../scss/page";
 @import "../scss/header";
 @import "../scss/footer";

assets/app/frontend/scss/about.scss

       position: relative;
       min-height: 750px;
 
+      @include tablet-only {
+        min-height: 600px;
+      }
+
       img {
         position: absolute;
         right: 0;
         bottom: 0;
         max-height: 80%;
+        max-width: 70%;
+
+        @include tablet-only {
+          display: none;
+        }
       }
 
       h1 {
         font-family: FranklinGothic;
         font-size: 7.5rem;
         line-height: 67px;
-        margin-top: 100px;
+        margin-top: 10rem;
         margin-bottom: 75px;
       }
 
     background-color: $yellow;
     color: $green;
 
-    img {
-      max-width: 80%;
-      max-height: 80%;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      left: 50%;
+    .col-image {
+      @include mobile-only {
+        min-height: 260px;
+      }
+
+      img {
+        max-width: 80%;
+        max-height: 80%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        left: 50%;
+      }
+
     }
 
     h2 {
       margin-top: 100px;
       margin-bottom: 40px;
       font-size: 4.0rem;
+
+      @include mobile-only {
+        margin-top: 0;
+      }
     }
 
     .description {
       display: inline-block;
       margin-top: 20px;
       font-weight: bold;
-      margin-bottom: 100px;
+      margin-bottom: 10rem;
     }
   }
 
   .container-manifeste {
-    padding-bottom: 100px;
-    padding-top: 100px;
+    padding-bottom: 10rem;
+    padding-top: 10rem;
 
     h2 {
       color: $green;
 
     .video-aac {
       text-align: center;
+
+      iframe {
+        width: 100%;
+      }
     }
   }
 
   .bloc-three-step {
     background-color: $green;
     color: #FFF;
-    padding-top: 100px;
-    padding-bottom: 100px;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
 
     h2 {
       margin-bottom: 40px;
 
       img {
         margin-right: 15px;
+
+        @include mobile-only {
+          margin-top: 30px;
+        }
       }
 
       h3 {
 
   .container-step1 {
     color: $green;
-    padding-top: 100px;
-    padding-bottom: 100px;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
 
     .logo-labourage {
       width: 90%;
+
+      @include mobile-only {
+        margin-bottom: 20px;
+      }
     }
 
     h2 {
   .bloc-recolte {
     background-color: $yellow;
     color: $green;
-    padding-top: 100px;
-    padding-bottom: 100px;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
 
     h2 {
       font-weight: bold;
       top: 50%;
       transform: translate(-50%, -50%);
       left: 50%;
+
+      @include mobile-only {
+        position: initial;
+        transform: none;
+        margin-top: 50px;
+      }
     }
   }
 
   .container-ressource {
     color: $green;
-    padding-top: 100px;
-    padding-bottom: 100px;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
 
     h2 {
       font-weight: bold;
         color: $green;
       }
     }
+
+    @include mobile-only {
+      .col-image {
+        min-height: 350px;
+        margin-bottom: 50px;
+      }
+    }
   }
 
   .bloc-coop-cit {
     color: #FFF;
 
     .container-coop {
-      padding-top: 100px;
-      padding-bottom: 100px;
+      padding-top: 10rem;
+      padding-bottom: 10rem;
 
       h2 {
         font-weight: bold;
     .container-coeur {
       background-color: $yellow;
       color: $green;
-      padding-top: 100px;
-      padding-bottom: 100px;
+      padding-top: 10rem;
+      padding-bottom: 10rem;
 
       h2 {
         font-weight: bold;
           color: $green;
         }
       }
+
+      @include mobile-only {
+        .logo-coeur {
+          margin-top: 30px;
+        }
+      }
     }
   }
 
   .container-funded {
-    padding-top: 100px;
-    padding-bottom: 100px;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
     text-align: center;
 
     h2 {
       color: $green;
       font-weight: bold;
-      margin-bottom: 70px;
+      margin-bottom: 7rem;
       font-size: 2.5rem;
     }
 
     img {
       max-width: 300px;
+      margin-bottom: 25px;
     }
 
     .logo-hericourt {

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

 #carto-liste {
   margin-top: 75px;
+  font-size: 1.6rem;
 
   .title-liste {
     color: $green;
       height: 40px;
       padding-left: 10px;
       padding-right: 10px;
+
+      @include mobile-only {
+        margin-bottom: 20px;
+      }
     }
 
     .dropdown-search {
         border-radius: 0;
         border-color: $green;
         height: 40px;
+        font-size: 1.6rem;
+        width: 100%;
 
         &:focus {
           box-shadow: none;
       }
     }
 
+    @include tablet-only {
+      .col-territory {
+        button {
+          margin-top: 20px;
+        }
+      }
+    }
+
     .search-button {
       color: #FFF;
       background-color: $green;
       height: 40px;
       padding-left: 10px;
       padding-right: 10px;
+      width: 100%;
+
+      @include large-only {
+        margin-top: 20px;
+      }
     }
   }
 

assets/app/frontend/scss/contact.scss

       font-family: FranklinGothic;
       font-size: 7.5rem;
       line-height: 67px;
-      margin-top: 100px;
+      margin-top: 10rem;
       margin-bottom: 35px;
     }
 
   }
 
   .container-contact {
-    margin-top: 100px;
-    margin-bottom: 200px;
+    margin-top: 10rem;
+    margin-bottom: 20rem;
 
     input, textarea {
       color: #797677;
       margin-bottom: 40px;
       width: 100%;
       padding: 10px;
+      font-size: 1.6rem;
     }
 
     textarea {

assets/app/frontend/scss/footer.scss

 footer {
-  margin-top: 100px;
+  margin-top: 10rem;
   color: $green;
   font-family: dinbold;
   font-size: 1.6rem;

assets/app/frontend/scss/home.scss

       background-color: $yellow;
     }
 
+    @include mobile-only {
+      .col-image {
+        text-align: center;
+      }
+    }
+
     .cartographie {
       max-width: 90%;
       margin-top: 50px;
       margin-bottom: 50px;
+
+      @include mobile-only {
+        margin-bottom: 0px;
+      }
     }
 
     h2 {
 
   .bloc-planisphere {
     color: $green;
-    padding-bottom: 100px;
-    padding-top: 100px;
+    padding-bottom: 10rem;
+    padding-top: 10rem;
+
+    @include mobile-only {
+      .col-image {
+        text-align: center;
+        margin-bottom: 20px;
+      }
+    }
 
     img {
       max-width: 70%;
       text-align: center;
       font-size: 4.0rem;
       font-weight: bold;
-      margin-bottom: 70px;
+      margin-bottom: 7rem;
 
       span {
         color: $orange;
     background-color: $green;
     color: #FFF;
     font-weight: bold;
-    padding-top: 100px;
-    padding-bottom: 100px;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
 
     h2 {
       margin-bottom: 50px;
       transform: translate(-50%, -50%);
       left: 50%;
     }
+
+    @include mobile-only {
+      .col-image {
+        min-height: 300px;
+        margin-top: 20px;
+      }
+    }
   }
 }

assets/app/frontend/scss/page.scss

+.page {
+  h1 {
+    font-family: FranklinGothic;
+    font-size: 8.0rem;
+    margin-top: 160px;
+    margin-bottom: 40px;
+  }
+}

public/build/entrypoints.json

   "entrypoints": {
     "adminlte-plugins": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
     },
     "adminlte-index": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
     },
     "adminlte-form": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
         "/build/adminlte-form.4079807b.js"
     },
     "adminlte-sort": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
     },
     "adminlte-field-filemanager": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/adminlte-field-filemanager.d8302fb7.js"
       ],
     },
     "adminlte-field-collection": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
     },
     "adminlte-main": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/adminlte-main.e8feeffc.js"
     },
     "sov-reminder": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/sov-reminder.27580486.js"
       ],
       "css": [
     },
     "sov-ticket": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/sov-ticket.df76c7a0.js"
       ]
     },
     "app-backend": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js.5b9cb885.js",
         "/build/app-backend.9246973d.js"
     },
     "app-frontend": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_jquery_src_jquery_js.2a8ff255.js",
         "/build/app-frontend.32a560b0.js"
       ],
       "css": [
-        "/build/app-frontend.2ec91b68.css"
+        "/build/app-frontend.b2baeaf4.css"
       ]
     },
     "app-bulle": {
       "js": [
-        "/build/runtime.a525a3df.js",
+        "/build/runtime.e813da34.js",
         "/build/vendors-node_modules_amcharts_amcharts4_charts_js-node_modules_amcharts_amcharts4_core_js-nod-e7c189.7a170faa.js",
         "/build/app-bulle.08404383.js"
       ]

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.9246973d.js",
-  "build/app-frontend.css": "/build/app-frontend.2ec91b68.css",
+  "build/app-frontend.css": "/build/app-frontend.b2baeaf4.css",
   "build/app-frontend.js": "/build/app-frontend.32a560b0.js",
   "build/app-bulle.js": "/build/app-bulle.08404383.js",
-  "build/runtime.js": "/build/runtime.a525a3df.js",
+  "build/runtime.js": "/build/runtime.e813da34.js",
   "build/pdfmake.js": "/build/pdfmake.fbf70324.js",
   "build/canvg.js": "/build/canvg.23051f37.js",
   "build/xlsx.js": "/build/xlsx.05855660.js",

templates/frontend/about.html.twig

         <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">
+                <div class="col-12 col-md-9">
                     <h1>Partez à la découverte d’Aux Actes Citoyens !</h1>
                 </div>
             </div>
             <div class="row">
-                <div class="col-4">
+                <div class="col-12 col-md-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">
+                <div class="col-12 col-md-3">
                     <a class="download-plaq" target="_blank"
                        href="https://www.aux-actes-citoyens.fr/assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf"
                        title="Télécharger la plaquette">Télécharger la plaquette</a>
         {% if blockStartUp %}
             <div class="container container-startup">
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-sm-6 col-image">
                         <img src="{{ 'assets/img/SUT-A-propos.png' }}" alt="start up">
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-sm-6">
                         <h2>{{ blockStartUp.title }}</h2>
                         <div class="description">
                             {{ blockStartUp.description|raw }}
             </div>
             <div class="row row-step">
                 {% if blockStep1 %}
-                    <div class="col-4">
+                    <div class="col-12 col-sm-4">
                         <img src="{{ 'assets/img/Etape1-Labourage-Blanc.png' }}" alt="Etape1">
                         <h3>{{ blockStep1.title }}</h3>
                         <div class="description">
                     </div>
                 {% endif %}
                 {% if blockStep2 %}
-                    <div class="col-4">
+                    <div class="col-12 col-sm-4">
                         <img src="{{ 'assets/img/Etape2-EvenementBlanc.png' }}" alt="Etape2">
                         <h3>{{ blockStep2.title }}</h3>
                         <div class="description">
                     </div>
                 {% endif %}
                 {% if blockStep3 %}
-                    <div class="col-4">
+                    <div class="col-12 col-sm-4">
                         <img src="{{ 'assets/img/Etape3-Accompagnement-Blanc.png' }}" alt="Etape3">
                         <h3>{{ blockStep3.title }}</h3>
                         <div class="description">
     {% if blockLabourage %}
         <div id="labourage" class="container container-step1">
             <div class="row">
-                <div class="col-6">
+                <div class="col-12 col-sm-6">
                     <img class="logo-labourage" src="{{ 'assets/img/Labourage-Img.png' }}" alt="Labourage">
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-sm-6">
                     <h2>
                         <img class="picto-labourage" src="{{ 'assets/img/Picto-Labourage-Vert.png' }}" alt="Labourage">
                         {{ blockLabourage.title }}
         <div id="recolte" class="bloc-recolte">
             <div class="container">
                 <div class="row">
-                    <div class="col-7">
+                    <div class="col-12 col-sm-7">
                         <h2>
                             <img class="picto-labourage" src="{{ 'assets/img/Picto-Evenement-Vert.png' }}"
                                  alt="Evenement vert">
                             {{ 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">
+                    <div class="col-12 col-sm-5">
                         <img class="logo-event" src="{{ 'assets/img/Evenement-Img.png' }}" alt="Evenement">
                     </div>
                 </div>
     {% if blockAccompagnement %}
         <div id="accompagnement" class="container container-ressource">
             <div class="row">
-                <div class="col-5">
+                <div class="col-12 col-sm-5 col-image">
                     <img class="logo-ressource" src="{{ 'assets/img/Ressourcerie-Img.png' }}" alt="Ressourcerie">
                 </div>
 
-                <div class="col-7">
+                <div class="col-12 col-sm-7">
                     <h2>
                         <img class="picto-ressource" src="{{ 'assets/img/Picto-Accompagnement-Vert.png' }}"
                              alt="Accompagnement vert">
         {% if blockDemarche %}
             <div class="container container-coop">
                 <div class="row justify-content-center">
-                    <div class="col-7">
+                    <div class="col-12 col-sm-7">
                         <h2>{{ blockDemarche.title }}</h2>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-8">
+                    <div class="col-12 col-sm-8">
                         <img class="logo-coop" src="{{ 'assets/img/LaCoop-Img.png' }}" alt="Coopérative des Citoyens">
                     </div>
 
-                    <div class="col-4">
+                    <div class="col-12 col-sm-4">
                         <div class="description">
                             {{ blockDemarche.description|raw }}
                         </div>
         {% if blockCoeur %}
             <div id="team-coeur" class="container container-coeur">
                 <div class="row justify-content-center">
-                    <div class="col-10">
+                    <div class="col-12 col-sm-10">
                         <h2>{{ blockCoeur.title }}</h2>
                     </div>
-                    <div class="col-5">
+                    <div class="col-12 col-sm-5">
                         <div class="description">
                             {{ blockCoeur.description|raw }}
                         </div>
                             {{ macro.email_contact("REJOINDRE L’ÉQUIPE CŒUR", "Rejoindre l'équipe coeur") }}
                         </div>
                     </div>
-                    <div class="col-5">
+                    <div class="col-12 col-sm-5">
                         <img class="logo-coeur" src="{{ 'assets/img/Equipe-Coeur-Img.png' }}" alt="coeur">
                     </div>
                 </div>

templates/frontend/carto-liste.html.twig

         <h1 class="title-liste">La liste simple... et rêvolutionnaire !</h1>
         {{ form_start(form, { 'attr' : { 'class': 'form-search' }}) }}
         <div class="row">
-            <div class="col-6">
+            <div class="col-12 col-sm-6">
                 {{ form_errors(form) }}
                 {{ form_widget(form.search, {'attr': {'class': 'input-search'}}) }}
             </div>
-            <div class="col">
+            <div class="col-6 col-sm">
                 {{ macro.dropdown_search(form.category) }}
             </div>
-            <div class="col">
+            <div class="col-6 col-sm">
                 {{ macro.dropdown_search(form.thematic) }}
             </div>
-            <div class="col">
+            <div class="col-6 col-sm col-territory">
                 {{ macro.dropdown_search(form.territory) }}
             </div>
-            <div class="col">
+            <div class="col-6 col-sm">
                 {{ form_row(form.search_button, { 'label': 'Rechercher' }) }}
             </div>
         </div>

templates/frontend/contact.html.twig

     <div class="bloc-contact">
         <div class="container">
             <div class="row row-contact">
-                <div class="col-9">
+                <div class="col-12 col-sm-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">
+                <div class="col-3 d-none d-sm-block">
                     <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 class="container bloc-address">
         <div class="row">
-            <div class="col-6">
+            <div class="col-6 d-none d-lg-block">
                 <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.png' }}" alt="Logo AAC">
             </div>
-            <div class="col-6">
+            <div class="col-12 col-lg-6">
                 <p class="background-green">
                     Vous pouvez nous joindre par courrier et par email :
                 </p>

templates/frontend/home.html.twig

         <div class="bloc-cartographie">
             <div class="container">
                 <div class="row frame-yellow">
-                    <div class="col-6 d-none d-sm-block">
+                    <div class="col-12 col-sm-6 col-image">
                         <img class="cartographie" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
                     </div>
                     <div class="col-12 col-sm-6">
                     <div class="col-12">
                         <h2>Le planisphère des <span>S</span>olutions</h2>
                         <div class="row">
-                            <div class="col-6 d-none d-sm-block">
+                            <div class="col-12 col-sm-6 col-image">
                                 <img src="{{ 'assets/img/Visuel-Affiche.png' }}" alt="affiche">
                             </div>
                             <div class="col-12 col-sm-6 col-text description">
                             {{ macro.email_contact("CONTRIBUER A LA RESSOURCERIE", "Contribuer à la ressourcerie") }}
                         </div>
                     </div>
-                    <div class="col-6 d-none d-sm-block">
+                    <div class="col-12 col-sm-6 col-image">
                         <img class="ressourcerie" src="{{ 'assets/img/Ressourcerie.png' }}" alt="ressourcerie">
                     </div>
                 </div>

templates/page/page.html.twig

 {% extends 'frontend/base.html.twig' %}
 
 {% block body %}
-    <div class="ui container">
-        <div class="logo-acc">
-            <a href="{{ path('app_homepage') }}" title="Accueil">
-                <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt="Logo le panier de daphne">
-            </a>
-        </div>
+    <div class="ui container page">
+{#        <div class="logo-acc">#}
+{#            <a href="{{ path('app_homepage') }}" title="Accueil">#}
+{#                <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt="Logo le panier de daphne">#}
+{#            </a>#}
+{#        </div>#}
         <div class="title">
             <h1>{{ page.title }}</h1>
         </div>
         <div class="description">
             {{ page.description|raw }}
         </div>
-        <footer>
-            <div class="ui grid">
-                <div class="column sixteen wide">
-                    <a href="{{ path('app_legal_mention') }}" title="Mentions légales">Mentions légales</a>
-                    - création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>
-                </div>
-            </div>
-        </footer>
+{#        <footer>#}
+{#            <div class="ui grid">#}
+{#                <div class="column sixteen wide">#}
+{#                    <a href="{{ path('app_legal_mention') }}" title="Mentions légales">Mentions légales</a>#}
+{#                    - création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>#}
+{#                </div>#}
+{#            </div>#}
+{#        </footer>#}
     </div>
 {% endblock %}