inté mobile

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

     .popover {
       border: 2px solid $green;
       border-radius: 0;
+      font-size: 1.4rem;
 
       .popover-body {
         color: $green;
       display: none;
 
       img {
-        width: 75px;
+        width: 7.5rem;
+
+        @include desktop-only {
+          width: 5.8rem;
+        }
 
         &:hover {
           cursor: pointer;
     .img-vosges {
       display: block;
       position: absolute;
-      top: 257px;
-      left: 387px;
+      top: 17%;
+      left: 35%;
     }
 
     .img-belfort {
       display: block;
       position: absolute;
-      top: 493px;
-      left: 491px;
+      top: 33%;
+      left: 45%;
       width: 160px;
+
+      @include desktop-only {
+        width: 110px;
+      }
     }
 
     .img-hericourt {
       display: block;
       position: absolute;
-      top: 639px;
-      left: 217px;
+      top: 44%;
+      left: 21%;
       width: 160px;
+
+      @include desktop-only {
+        top: 43%;
+        left: 19%;
+        width: 110px;
+      }
     }
 
     .img-montbeliard {
       display: block;
       position: absolute;
-      top: 1003px;
-      left: 319px;
+      top: 69%;
+      left: 29%;
       width: 160px;
+
+      @include desktop-only {
+        width: 110px;
+      }
     }
 
     .img-sud_territoire {
       display: block;
       position: absolute;
-      top: 798px;
-      left: 746px;
+      top: 54%;
+      left: 67%;
     }
   }
 }

assets/app/frontend/scss/carto.scss

       font-family: FranklinGothic;
     }
 
+    @include mobile-only {
+      .col-image-carto {
+        text-align: center;
+        .perso-aac {
+          max-width: 70%;
+        }
+      }
+    }
+
     .bloc-contrib {
       text-align: right;
 
       font-family: FranklinGothic;
       font-size: 2.0rem;
       padding: 20px;
-      height: 190px;
+      min-height: 100%;
 
       img {
         margin-bottom: 20px;

assets/app/frontend/scss/contribuate.scss

       ul {
         list-style-type: none;
         padding-left: 0;
+        font-size: 1.4rem;
+
+        @include tablet-only {
+          font-size: 2rem;
+        }
       }
 
       .list-territory {
           label {
             color: #808080;
             clear: both;
+
+            .checkmark {
+              padding-left: 5px;
+
+              @include tablet-only {
+                padding-left: 10px;
+              }
+            }
           }
         }
       }
           border-radius: 0;
           border-color: $green;
           height: 40px;
-          min-width: 300px;
+          max-width: 300px;
+          width: 100%;
           margin-bottom: 15px;
         }
 

assets/app/frontend/scss/footer.scss

 
   .logo {
     max-width: 80%;
+
+    @include mobile-only {
+      max-width: 60%;
+    }
   }
 
   ul {
   }
 
   .bloc-coop {
+    @include mobile-only {
+      text-align: center;
+      margin-top: 50px;
+    }
+
     .address {
       margin-top: 20px;
       margin-bottom: 20px;
   .row-contact {
     margin-top: 70px;
 
+    @include tablet-only {
+      text-align: center;
+    }
+
     .contact {
       font-size: 2.5rem;
       font-weight: bold;
         font-weight: bold;
         margin: 0;
         text-align: center;
+
+        @include desktop-only {
+          font-size: 1.5rem;
+        }
+
+        @include tablet-only {
+          margin-top: 50px;
+        }
       }
 
+
       input {
         border: 0;
         outline: none;
     }
 
     .col-network {
+      @include tablet-only {
+        margin-top: 50px;
+      }
+
       .stay-connect {
         font-size: 1.3rem;
         font-family: dinbold;
       }
 
       img {
-        max-width:45px;
+        max-width: 45px;
         margin-right: 10px;
       }
     }

assets/app/frontend/scss/header.scss

                 font-size: 5.0rem;
                 line-height: 5.0rem;
 
+                @include mobile-only {
+                  font-size: 4.0rem;
+                }
+
                 &:hover {
                   color: $yellow;
                 }
                   right: 30%;
                 }
               }
-
-              &.participate-mobile {
-                display: none;
-
-                @include mobile-only {
-                  display: inline-block;
-                }
-              }
             }
           }
         }

assets/app/frontend/scss/home.scss

   }
 
   .bloc-planisphere {
-    min-height: 700px;
     color: $green;
     padding-bottom: 100px;
     padding-top: 100px;
     .subscribe {
       border: 1px solid $green;
       padding: 10px 40px;
-      position: absolute;
-      bottom: 0;
       font-size: 2.3rem;
+      display: inline-block;
+      margin-top: 30px;
 
       a {
         color: $green;

assets/app/frontend/scss/mixin_responsive.scss

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

package-lock.json

             "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
             "dev": true
         },
+        "errno": {
+            "version": "0.1.8",
+            "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+            "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+            "dev": true,
+            "requires": {
+                "prr": "~1.0.1"
+            }
+        },
         "error-ex": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
                 "fs-monkey": "1.0.3"
             }
         },
+        "memory-fs": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+            "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+            "dev": true,
+            "requires": {
+                "errno": "^0.1.3",
+                "readable-stream": "^2.0.1"
+            }
+        },
         "merge-descriptors": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
                 }
             }
         },
+        "prr": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+            "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+            "dev": true
+        },
         "punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
             "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
             "dev": true
         },
+        "ts-loader": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-8.3.0.tgz",
+            "integrity": "sha512-MgGly4I6cStsJy27ViE32UoqxPTN9Xly4anxxVyaIWR+9BGxboV4EyJBGfR3RePV7Ksjj3rHmPZJeIt+7o4Vag==",
+            "dev": true,
+            "requires": {
+                "chalk": "^4.1.0",
+                "enhanced-resolve": "^4.0.0",
+                "loader-utils": "^2.0.0",
+                "micromatch": "^4.0.0",
+                "semver": "^7.3.4"
+            },
+            "dependencies": {
+                "enhanced-resolve": {
+                    "version": "4.5.0",
+                    "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+                    "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+                    "dev": true,
+                    "requires": {
+                        "graceful-fs": "^4.1.2",
+                        "memory-fs": "^0.5.0",
+                        "tapable": "^1.0.0"
+                    }
+                },
+                "tapable": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+                    "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+                    "dev": true
+                }
+            }
+        },
         "tslib": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
             "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
             "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
         },
+        "typescript": {
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
+            "integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
+            "dev": true
+        },
         "uglify-js": {
             "version": "2.8.29",
             "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",

public/build/entrypoints.json

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

templates/frontend/carto-carte.html.twig

     <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="col-5 col-lg-3">
                 <div class="row">
                     <div class="col-5">
                         <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="révolte">
                     </div>
                 </div>
             </div>
-            <div class="col-3">
+            <div class="col-5 col-lg-3">
                 <div class="row">
                     <div class="col-5">
                         <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="rêve">
                     </div>
                 </div>
             </div>
-            <div class="col-3">
+            <div class="col-5 col-lg-3">
                 <div class="row">
                     <div class="col-5">
                         <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="Projet booster">
                     </div>
                 </div>
             </div>
-            <div class="col-3">
+            <div class="col-5 col-lg-3">
                 <div class="row">
                     <div class="col-5">
                         <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="Projet inspirant">

templates/frontend/carto.html.twig

         <div class="bloc-carto-revo">
             <div class="container">
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <h1>La cartographie r<span>ê</span>volutionnaire</h1>
                         <h2>{{ blockCartoInt.title }}</h2>
                         <div class="description">
                             {{ blockCartoInt.description|raw }}
                         </div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6 col-image-carto">
                         <img class="perso-aac" src="{{ 'assets/img/Visuel-Cartographie.png' }}" alt="cartographie">
                         <div class="bloc-contrib">
                             <div class="nb-contrib">

templates/frontend/contribuate.html.twig

         <div class="bloc-revolt-dream">
             <div class="container">
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <h1>Nos révoltes et nos rêves pour notre territoire</h1>
                         <h2>{{ blockContrib.title }}</h2>
                         <div class="description">{{ blockContrib.description|raw }}</div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <img class="carto-dream" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
                         <div class="bloc-contrib">
                             <div class="you-are">

templates/frontend/footer.html.twig

 <footer>
     <div class="container">
         <div class="row">
-            <div class="col-3">
+            <div class="col-6 col-sm-3">
                 <ul>
                     <li class="title-list">Aux Actes Citoyens</li>
                     <li><a href="{{ path('app_about') }}" title="A propos">A propos</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">
+            <div class="col-6 col-sm-5">
                 <ul>
                     <li class="title-list">Les trois étapes</li>
                     <li><a href="{{ path('app_about') }}#labourage" title="Le labourage">Le labourage</a></li>
                     <li><a href="{{ path('app_about') }}#accompagnement" title="Le Compagnonnage">Le Compagnonnage</a></li>
                 </ul>
             </div>
-            <div class="col-4 bloc-coop">
+            <div class="col-12 col-sm-4  bloc-coop">
                 <img class="logo" src="{{ 'assets/img/Logo-Cooperative-Citoyens.jpg' }}"
                      alt="Logo Cooperative Citoyens">
                 <div class="address">
                     <a href="{{ path('app_contact') }}" title="Contacts">CONTACTS</a>
                 </div>
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <div>Emilie Castellano</div>
                         <div>T 06 63 45 10 61</div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <div>Cédric Bernard</div>
                         <div>T 06 33 64 44 13</div>
                     </div>
             </div>
         </div>
         <div class="row row-contact">
-            <div class="col-3">
+            <div class="col-12 col-md-3">
                 <a class="contact" href="{{ path('app_contact') }}" title="Contacts">CONTACTS</a>
             </div>
-            <div class="col-5 newsletter">
+            <div class="col-12 col-md-5 newsletter">
                 <div class="row">
                     <div class="col-9">
                         <p class="lettre-infos">Recevoir la lettre d’info !</p>
                     </div>
                 </div>
             </div>
-            <div class="col-4 col-network">
+            <div class="col-12 col-md-4 col-network">
                 <p class="stay-connect">Restez connecté :</p>
                 <a href="https://www.facebook.com/laCoopCitoyens/?ref=pages_you_manage" title="Facebook" target="_blank">
                     <img src="{{ 'assets/img/Picto-Facebook.png' }}" alt="facebook">

templates/frontend/header.html.twig

                                 Accueil
                             </a>
                         </li>
-                        <li class="participate-mobile">
+                        <li class="d-sm-block d-md-none">
                             <a class="participate" href="{{ path('app_contribuate') }}">
                                 Participer
                             </a>
                         </li>
+{#                        <li class="d-sm-none d-md-block">#}
                         <li>
                             <a href="{{ path('app_carto_interactive') }}" title="Cartographie rêvolutionnaire">
                                 Cartographie rêvolutionnaire
                             </a>
                         </li>
+{#                        <li class="d-sm-block d-md-none">#}
+{#                            <a href="{{ path('app_carto_liste') }}" title="La liste rêvolutionnaire">#}
+{#                                La liste rêvolutionnaire#}
+{#                            </a>#}
+{#                        </li>#}
                         <li>
                             <a href="{{ path('app_homepage') }}#planisphere" title="Planisphère des solutions">
                                 Planisphère des solutions

templates/frontend/home.html.twig

                     <div class="col-12">
                         <h2>Le planisphère des <span>S</span>olutions</h2>
                         <div class="row">
-                            <div class="col-6">
+                            <div class="col-6 d-none d-sm-block">
                                 <img src="{{ 'assets/img/Visuel-Affiche.png' }}" alt="affiche">
                             </div>
-                            <div class="col-6 col-text description">
+                            <div class="col-12 col-sm-6 col-text description">
                                 {{ blockPlanisphere.description|raw }}
                                 <div class="subscribe">
                                     {{ macro.email_contact("S'INSCRIRE A L’ÉVÉNEMENT", "S'inscrire à l'événement (Le planisphère des Solutions)") }}
         <div id="ressourcerie" class="bloc-ressourcerie">
             <div class="container">
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-sm-6">
                         <h2>{{ blockRessourcerie.title }}</h2>
                         <div class="description">
                             {{ blockRessourcerie.description|raw }}
                             {{ macro.email_contact("CONTRIBUER A LA RESSOURCERIE", "Contribuer à la ressourcerie") }}
                         </div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-6 d-none d-sm-block">
                         <img class="ressourcerie" src="{{ 'assets/img/Ressourcerie.png' }}" alt="ressourcerie">
                     </div>
                 </div>