debut responsive

assets/app/frontend/app/app.scss

 @import "./node_modules/bootstrap/scss/bootstrap";
 
 @import "../scss/vars";
+@import "../scss/mixin_responsive";
 @import "../scss/base";
 @import "../scss/home";
 @import "../scss/carto";
 @import "../scss/contact";
 @import "../scss/contribuate";
 @import "../scss/header";
-@import "../scss/footer";
-@import "../scss/responsive";
+@import "../scss/footer";

assets/app/frontend/scss/about.scss

       h1 {
         color: #FFF;
         font-family: FranklinGothic;
-        font-size: 75px;
+        font-size: 7.5rem;
         line-height: 67px;
         margin-top: 100px;
         margin-bottom: 75px;
 
       p {
         color: #FFF;
-        font-size: 20px;
+        font-size: 2.0rem;
         margin-bottom: 50px;
       }
 
         color: $green;
         text-transform: uppercase;
         padding: 10px;
-        font-size: 25px;
+        font-size: 2.5rem;
         display: inline-block;
         text-align: center;
       }
       font-weight: bold;
       margin-top: 100px;
       margin-bottom: 40px;
-      font-size: 40px;
+      font-size: 4.0rem;
     }
 
     .description {
-      font-size: 17px;
+      font-size: 1.7rem;
     }
 
     .other-startup {
       color: $orange;
-      font-size: 20px;
+      font-size: 2.0rem;
       display: inline-block;
       margin-top: 20px;
       font-weight: bold;
     h2 {
       color: $green;
       text-align: center;
-      font-size: 40px;
+      font-size: 4.0rem;
       font-weight: bold;
       margin-bottom: 70px;
 
     h2 {
       margin-bottom: 40px;
       font-weight: bold;
-      font-size: 40px;
+      font-size: 4.0rem;
     }
 
 
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
-      font-size: 40px;
+      font-size: 4.0rem;
 
       .picto-labourage {
         vertical-align: baseline;
       color: $yellow;
       background-color: $green;
       padding: 15px;
-      font-size: 22px;
+      font-size: 2.2rem;
       margin-top: 30px;
       display: inline-block;
     }
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
-      font-size: 40px;
+      font-size: 4.0rem;
 
       .picto-labourage {
         vertical-align: baseline;
     .subscribe-event {
       border: 2px solid $green;
       padding: 15px;
-      font-size: 22px;
+      font-size: 2.2rem;
       margin-top: 40px;
       display: inline-block;
 
     h2 {
       font-weight: bold;
       margin-bottom: 30px;
-      font-size: 40px;
+      font-size: 4.0rem;
 
       .picto-ressource {
         vertical-align: baseline;
 
     .contribuate {
       border: 2px solid $yellow;
-      font-size: 22px;
+      font-size: 2.2rem;
       padding: 15px;
-      font-size: 22px;
       margin-top: 40px;
       display: inline-block;
 
         font-weight: bold;
         text-align: center;
         margin-bottom: 50px;
-        font-size: 40px;
+        font-size: 4.0rem;
       }
 
       .description {
         color: $green;
         background-color: $yellow;
         padding: 10px;
-        font-size: 23px;
+        font-size: 2.3rem;
         display: inline-block;
         text-align: center;
         margin-top: 30px;
       h2 {
         font-weight: bold;
         margin-bottom: 50px;
-        font-size: 40px;
+        font-size: 4.0rem;
       }
 
       .join-coeur {
         border: 2px solid $green;
         display: inline-block;
         padding: 15px;
-        font-size: 22px;
+        font-size: 2.2rem;
         margin-top: 50px;
 
         a {
       color: $green;
       font-weight: bold;
       margin-bottom: 70px;
-      font-size: 25px;
+      font-size: 2.5rem;
     }
 
     img {

assets/app/frontend/scss/base.scss

+html {
+  font-size: 62.5%;
+
+  @include large-only {
+    font-size: 60%;
+  }
+
+  @include desktop-only {
+    font-size: 55%;
+  }
+
+  @include tablet-only {
+    font-size: 50%;
+  }
+
+  @include mobile-only {
+    font-size: 45%;
+  }
+}
+
 #content-page {
   margin-top: $headerheight;
+
+  @include mobile-only {
+    margin-top: 80px;
+  }
 }
 
 img {
 }
 
 p, .description {
-  font-size: 20px;
+  font-size: 2.0rem;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: Georgia;
 }
 
+h2 {
+  font-size: 3.3rem;
+}
+
 .bold {
   font-weight: bold;
 }
   color: $green;
   text-transform: uppercase;
   font-family: dinbold;
-  font-size: 20px;
+  font-size: 2.0rem;
   padding: 15px;
   display: inline-block;
 
   color: $yellow;
   background-color: $green;
   padding: 15px;
-  font-size: 22px;
+  font-size: 2.2rem;
   margin-top: 30px;
   display: inline-block;
   border: none;

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

 
   .title-carte {
     color: $green;
-    font-size: 50px;
+    font-size: 5.0rem;
     font-family: FranklinGothic;
     text-align: center;
   }
 
   .row-contrib {
     color: $green;
-    font-size: 20px;
+    font-size: 2.0rem;
     font-family: FranklinGothic;
     margin-top: 50px;
 

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

 
   .title-liste {
     color: $green;
-    font-size: 50px;
+    font-size: 5.0rem;
     font-family: FranklinGothic;
     text-align: center;
   }
           label {
             color: #808080;
             font-family: dinbold;
-            font-size: 14px;
+            font-size: 1.4rem;
             display: inline-block;
             padding: 3px 10px;
             font-weight: normal;

assets/app/frontend/scss/carto.scss

     h1 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 75px;
+      font-size: 7.5rem;
       line-height: 67px;
       margin-top: 100px;
       margin-bottom: 75px;
     h2 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 28px;
+      font-size: 2.8rem;
       margin-bottom: 30px;
     }
 
     .description {
       color: $orange;
       font-style: italic;
-      font-size: 20px;
+      font-size: 2.0rem;
       margin-bottom: 50px;
       font-family: FranklinGothic;
     }
 
       .nb-contrib {
         color: $orange;
-        font-size: 126px;
+        font-size: 12.6rem;
         font-family: FranklinGothic;
         height: 150px;
       }
 
       .contrib {
         color: $green;
-        font-size: 70px;
+        font-size: 7.0rem;
         font-family: FranklinGothic;
       }
     }
       border: 2px solid $green;
       color: $green;
       font-family: FranklinGothic;
-      font-size: 20px;
+      font-size: 2.0rem;
       padding: 20px;
       height: 190px;
 
     margin-top: 75px;
     text-align: center;
     font-family: FranklinGothic;
-    font-size: 25px;
+    font-size: 2.5rem;
     padding-top: 15px;
     padding-bottom: 25px;
 

assets/app/frontend/scss/contact.scss

     h1 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 75px;
+      font-size: 7.5rem;
       line-height: 67px;
       margin-top: 100px;
       margin-bottom: 35px;
     p {
       color: $orange;
       font-style: italic;
-      font-size: 20px;
+      font-size: 2.0rem;
       margin-bottom: 50px;
       width: 50%;
     }
 
     .address-contact {
       color: $green;
-      font-size: 37px;
+      font-size: 3.7rem;
       margin-bottom: 5px;
     }
 
     .link-contact a {
       color: $green;
       text-decoration: underline;
-      font-size: 37px;
+      font-size: 3.7rem;
     }
   }
 
       border: 2px solid $green;
       font-weight: bold;
       padding: 15px;
-      font-size: 30px;
+      font-size: 3.0rem;
 
       &:hover {
         border-color: $yellow;

assets/app/frontend/scss/contribuate.scss

     h1 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 75px;
+      font-size: 7.5rem;
       line-height: 67px;
       margin-top: 100px;
       margin-bottom: 75px;
     h2 {
       color: $green;
       font-family: FranklinGothic;
-      font-size: 28px;
+      font-size: 2.8rem;
       margin-bottom: 30px;
     }
 
     .description {
       color: $orange;
       font-style: italic;
-      font-size: 20px;
+      font-size: 2.0rem;
       margin-bottom: 50px;
       font-family: FranklinGothic;
     }
       color: $green;
 
       .you-are {
-        font-size: 40px;
+        font-size: 4.0rem;
         height: 20px;
       }
 
       .nb-contrib {
         color: $orange;
-        font-size: 126px;
+        font-size: 12.6rem;
         height: 150px;
       }
 
       .contrib {
-        font-size: 70px;
+        font-size: 7.0rem;
       }
     }
   }
 
     .title-form {
       color: $green;
-      font-size: 50px;
+      font-size: 5.0rem;
       font-family: FranklinGothic;
       text-align: center;
       margin-bottom: 50px;
       .label {
         color: $green;
         font-family: FranklinGothic;
-        font-size: 18px;
+        font-size: 1.8rem;
       }
 
       button {
-        font-size: 15px;
+        font-size: 1.5rem;
         padding: 10px;
       }
 
       h2 {
         color: $green;
         font-family: FranklinGothic;
-        font-size: 27px;
+        font-size: 2.7rem;
         margin-top: 70px;
 
         img {
         margin-top: 100px;
         border-radius: 0;
         padding: 15px 40px;
-        font-size: 27px;
+        font-size: 2.7rem;
       }
     }
   }

assets/app/frontend/scss/footer.scss

   margin-top: 100px;
   color: $green;
   font-family: dinbold;
+  font-size: 1.6rem;
 
   a {
     color: $green;
 
     li {
       list-style: none;
-      font-size: 25px;
+      font-size: 2.5rem;
       margin-bottom: 20px;
 
       &.title-list {
       }
 
       a {
-        font-size: 16px;
+        font-size: 1.6rem;
         text-decoration: underline;
       }
     }
     margin-top: 70px;
 
     .contact {
-      font-size: 25px;
+      font-size: 2.5rem;
       font-weight: bold;
       border: 2px solid $yellow;
       padding: 10px 30px;
 
     .newsletter {
       .lettre-infos {
-        font-size: 22px;
+        font-size: 2.2rem;
         font-family: Georgia;
         font-weight: bold;
         margin: 0;
 
     .col-network {
       .stay-connect {
-        font-size: 13px;
+        font-size: 1.3rem;
         font-family: dinbold;
         margin-bottom: 5px;
       }
     background-color: $yellow;
     line-height: 50px;
     text-align: center;
-    font-size: 15px;
+    font-size: 1.5rem;
   }
 }

assets/app/frontend/scss/header.scss

           border: 0;
           background-color: #FFF;
           z-index: 100;
+
+          @include mobile-only {
+            width: 100px;
+          }
         }
       }
 
               margin-bottom: 6%;
               display: inline-block;
 
+              @include mobile-only {
+                padding: 0;
+              }
+
               a {
                 color: $green;
-                font-size: 50px;
-                line-height: 50px;
+                font-size: 5.0rem;
+                line-height: 5.0rem;
 
                 &:hover {
                   color: $yellow;
                 a {
                   border: 2px solid $yellow;
                   padding: 10px 45px;
-                  font-size: 25px;
+                  font-size: 2.5rem;
                 }
               }
 
                 top: 0;
                 right: 0;
                 background-color: $yellow;
+
+                @include mobile-only {
+                  right: 30%;
+                }
+              }
+
+              &.participate-mobile {
+                display: none;
+
+                @include mobile-only {
+                  display: inline-block;
+                }
               }
             }
           }
         }
 
         .col-logo {
+          @include mobile-only {
+            display: none;
+          }
+
           .logo {
             position: absolute;
             top: 50%;
     z-index: 2;
     border-bottom: 1px solid lightgrey;
 
+    @include mobile-only {
+      height: 80px;
+    }
+
     .navbar-brand {
-      width: 50%;
+      width: 45%;
+
+      @include large-only {
+        width: 30%;
+      }
 
       img {
-        max-height: 85px;
+        max-height: 80px;
       }
     }
 
     .participate {
-      font-size: 30px;
+      font-size: 3.0rem;
       color: #568b6f;
       font-family: dinbold;
       border: 2px solid #568b6f;
       padding: 8px 10px;
       font-weight: bold;
 
+      @include mobile-only {
+        display: none;
+      }
+
       &:hover {
         text-decoration: none;
         border-color: $yellow;
 
     .space-collab {
       color: $yellow;
-      font-size: 22px;
+      font-size: 2.2rem;
       font-family: FranklinGothic;
 
+      @include desktop-only {
+        display: none;
+      }
+
       img {
         height: 50px;
         margin-right: 10px;
 
       img {
         max-width: 140px;
+
+        @include mobile-only {
+          max-width: 80px;
+        }
       }
     }
   }

assets/app/frontend/scss/home.scss

     .row-futur {
       min-height: 800px;
 
+      @include large-only {
+        min-height: 720px;
+      }
+
+      @include tablet-only {
+        min-height: auto;
+        padding-bottom: 30px;
+      }
+
+      @include tablet-only {
+        img {
+          display: none;
+        }
+      }
+
       h1 {
         font-family: FranklinGothic;
         width: 70%;
-        font-size: 80px;
+        font-size: 8.0rem;
         margin-top: 70px;
+
+        @include tablet-only {
+          width: auto;
+        }
       }
 
       h2 {
         font-family: FranklinGothic;
         width: 50%;
         margin-top: 55px;
-        font-size: 27px;
+        font-size: 2.7rem;
         line-height: 38px;
+
+        @include tablet-only {
+          width: auto;
+        }
       }
 
       .discover {
         background-color: $yellow;
         color: $green;
-        font-size: 30px;
+        font-size: 3.0rem;
         padding: 13px 50px;
         margin-top: 150px;
         display: inline-block;
         font-weight: bold;
+
+        @include large-only {
+          margin-top: 50px;
+        }
       }
 
       .perso-aac {
         position: absolute;
         bottom: 0;
         right: 0;
-        max-width: 900px;
+        max-width: 78%;
+
+        @include large-only {
+          max-width: 60%;
+        }
       }
 
       .startup {
         top: 10%;
         right: 7%;
         max-width: 250px;
+
+        @include large-only {
+          right: 0;
+        }
       }
     }
   }
     }
 
     h2 {
-      margin-top: 100px;
-      margin-bottom: 40px;
+      margin-top: 18%;
+      margin-bottom: 7%;
       font-weight: bold;
 
       span {
     }
 
     .link-carto {
-      font-size: 20px;
+      font-size: 2.0rem;
       display: inline-block;
       margin-top: 20px;
       margin-bottom: 30px;
       bottom: 5%;
       left: 15px;
       font-family: dinbold;
-      font-size: 20px;
+      font-size: 2.0rem;
       font-weight: bold;
+
+      @include large-only {
+        position: unset;
+        display: inline-block;
+        margin-bottom: 20px;
+      }
     }
   }
 
 
     h2 {
       text-align: center;
-      font-size: 40px;
+      font-size: 4.0rem;
       font-weight: bold;
       margin-bottom: 70px;
 
       padding: 10px 40px;
       position: absolute;
       bottom: 0;
-      font-size: 23px;
+      font-size: 2.3rem;
 
       a {
         color: $green;
 
     h2 {
       margin-bottom: 50px;
-      font-size: 40px;
+      font-size: 4.0rem;
       font-weight: bold;
     }
 
       padding: 15px 15px;
       border: 2px solid $yellow;
       margin-top: 40px;
-      font-size: 23px;
+      font-size: 2.3rem;
 
       a {
         color: #FFF;

assets/app/frontend/scss/mixin_responsive.scss

+@mixin mobile-only {
+  @media screen and (max-width: $sm) {
+    @content;
+  }
+}
+
+@mixin tablet-only {
+  @media screen and (max-width: $md) {
+    @content;
+  }
+}
+
+@mixin desktop-only {
+  @media screen and (max-width: $lg) {
+    @content;
+  }
+}
+
+@mixin large-only {
+  @media screen and (max-width: $xl) {
+    @content;
+  }
+}

assets/app/frontend/scss/vars.scss

 $green: #568b6f;
 $maron: #925038;
 
+//taille du menu
 $headerheight: 122px;
 
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+
+//Bootstrap
+$grid-columns: 12;
+$grid-gutter-width: 30px;
+
+$grid-breakpoints: (
+  // Extra small screen / phone
+        xs: 0,
+  // Small screen / phone
+        sm: $sm,
+  // Medium screen / tablet
+        md: $md,
+  // Large screen / desktop
+        lg: $lg,
+  // Extra large screen / wide desktop
+        xl: $xl
+);
+
 @font-face {
   font-family: 'dinregular';
   src: url($dir-fonts + 'din_regular-webfont.eot');

public/build/entrypoints.json

   "entrypoints": {
     "adminlte-plugins": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/vendors-node_modules_core-js_internals_export_js.a0c0cb57.js",
         "/build/adminlte-field-filemanager.d8302fb7.js"
       ],
     },
     "adminlte-field-collection": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/sov-reminder.27580486.js"
       ],
       "css": [
     },
     "sov-ticket": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.js",
         "/build/sov-ticket.df76c7a0.js"
       ]
     },
     "app-backend": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.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.56247ca7.js",
+        "/build/runtime.f492d833.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.ec892e82.css"
+        "/build/app-frontend.8f351579.css"
       ]
     },
     "app-bulle": {
       "js": [
-        "/build/runtime.56247ca7.js",
+        "/build/runtime.f492d833.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.ec892e82.css",
+  "build/app-frontend.css": "/build/app-frontend.8f351579.css",
   "build/app-frontend.js": "/build/app-frontend.32a560b0.js",
   "build/app-bulle.js": "/build/app-bulle.08404383.js",
-  "build/runtime.js": "/build/runtime.56247ca7.js",
+  "build/runtime.js": "/build/runtime.f492d833.js",
   "build/pdfmake.js": "/build/pdfmake.fbf70324.js",
   "build/canvg.js": "/build/canvg.5e04b23d.js",
   "build/xlsx.js": "/build/xlsx.05855660.js",

templates/frontend/header.html.twig

                 </div>
             </div>
             <div class="row row-list">
-                <nav class="col-6">
+                <nav class="col-12 col-sm-6">
                     <ul>
                         <li>
                             <span class="yellow-trait"></span>
                                 Accueil
                             </a>
                         </li>
+                        <li class="participate-mobile">
+                            <a class="participate" href="{{ path('app_contribuate') }}">
+                                Participer
+                            </a>
+                        </li>
                         <li>
                             <a href="{{ path('app_carto_interactive') }}" title="Cartographie rêvolutionnaire">
                                 Cartographie rêvolutionnaire
                         </li>
                     </ul>
                 </nav>
-                <div class="col-6 col-logo">
+                <div class="col-6 d-none d-sm-block col-logo">
                     <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.png' }}" alt="Logo AAC">
                 </div>
             </div>

templates/frontend/home.html.twig

         <div class="bloc-cartographie">
             <div class="container">
                 <div class="row frame-yellow">
-                    <div class="col-6">
+                    <div class="col-6 d-none d-sm-block">
                         <img class="cartographie" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-sm-6">
                         <h2>La cartographie r<span>ê</span>volutionnaire</h2>
                         <div class="description">
                             {{ blockCarto.description|raw }}
                         </div>
                         <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>
+                            <a class="link-concert" href="" title="Participer à la concertation">Participer à la
+                                concertation</a>
+                        </div>
                     </div>
                 </div>
             </div>

webpack.config.js

     })
 
 
-// enables Sass/SCSS support
-//.enableSassLoader()
-
 // uncomment if you use TypeScript
 // .enableTypeScriptLoader()