footer

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -91,7 +91,7 @@ function isotope() {
   $('.cat-list li').on( 'click', function(evt) {
     var filterValue = $(this).attr('data-filter');
     $grid.isotope({ filter: filterValue });
-    
+
     if ($('.cat-list li').hasClass('is-active')) {
       $('.cat-list li').removeClass('is-active');
     }
@@ -113,6 +113,19 @@ function click_nav() {
   })
 }
 
+function scrollto(){
+
+  $(window).scroll(function() {
+    var scroll = $(window).scrollTop();
+    if (scroll >= 100) {
+        $(".logo a").addClass("reduct");
+    } else {
+        $(".logo a").removeClass("reduct");
+    }
+  });
+
+}
+
 $( document ).ready(function() {
   burger();
   slides();
@@ -121,4 +134,5 @@ $( document ).ready(function() {
   isotope();
   // drag();
   click_nav();
+  scrollto();
 });

web/app/themes/la_mine/src/assets/scss/components/_footer.scss

@@ -0,0 +1,151 @@
+body{
+    & > footer{
+        section{
+            & > .row{
+                margin-bottom: 1rem;
+            }
+        }
+        p,a{
+          font-size: 0.9rem;
+          line-height: 1.5;
+          text-align: center;
+          @media screen and (min-width: 768px) {
+            text-align: left;
+          }
+        }
+        figure{
+            max-width: 100px;
+            width: 100px;
+            a{
+                display: block;
+                width: 100%;
+                height: 100%;
+                max-width: 100%;
+            }
+            figcaption{
+                text-align: center;
+            }
+            &.rs{
+                display: flex;
+                justify-content: center;
+                margin:0!important;
+                width: 100%;
+                max-width: 100%;
+                @media screen and (min-width: 768px) {
+                    justify-content: start;
+                }
+                a{
+                    display: contents;
+                    img{
+                        padding: 0 0.25rem;
+                    }
+                }
+                figcaption{
+                    display: none;
+                }
+            }
+        }
+        &.row{
+            #mc_embed_signup_scroll{
+                margin-bottom:1rem;
+                flex-direction: column;
+                flex-wrap: wrap;
+                @media screen and (min-width: 568px) {
+                    flex-direction: row;
+                    justify-content: center;
+                }
+                & > div{
+                    border: 1px solid black;
+                    background:white;
+                    text-transform: uppercase;
+                    width: 100%;
+                    margin-bottom: 1rem;
+                    @media screen and (min-width: 568px) {
+                        width: 50%;
+                        margin-bottom: 0rem;
+                    }
+                    @media screen and (min-width: 768px) {
+                        width: calc(100% / 3);
+                        height: 40px;
+                    }
+                    @media screen and (min-width: 768px) {
+                      width: max-content;
+                    }
+                    p{
+                        margin-bottom:0;
+                        padding: 0.5rem;
+                    }
+                }
+                & > input{
+                    width: 100%;
+                    border: 1px solid black;
+                    padding: 0.5rem;
+                    border-left: 1px solid black;
+                    @media screen and (min-width: 568px) {
+                      border-left: none;
+                        width: 50%;
+                        margin-bottom: 0rem;
+                    }
+                    @media screen and (min-width: 768px) {
+                        width: 50%;
+                        height: 40px;
+                    }
+                }
+                .clear{
+                    width: 100%;
+                    margin-top: 1rem;
+                    @media screen and (min-width: 768px) {
+                      margin-top: 0rem
+                    }
+                    @media screen and (min-width: 768px) {
+                        width: auto;
+                        height: 40px;
+                        margin-top: 0;
+                    }
+                    input{
+                        line-height: 2.3;
+                        border: 0px solid black;
+                        width: 100%;
+                        background:white;
+                        text-transform: uppercase;
+                    }
+                }
+            }
+            .add_assos{
+                background: white;
+                color: black;
+                margin: 2rem auto;
+                border: 5px solid black;
+                display: block;
+                width: max-content;
+                text-transform: uppercase;
+                &:hover{
+                    border: 5px solid black;
+                    background: black;
+                    color: white;
+                }
+            }
+            h3{
+                font-family: 'millimetre-regular';
+                text-align: center;
+                font-size: 1.2rem;
+                line-height: 1;
+            }
+            .part{
+                margin-top: 1rem;
+            }
+            .main-carousel{
+                margin-top: 1rem;
+                a{
+                    width: 100px;
+                    height: 100px;
+                }
+                img{
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+    }
+}

web/app/themes/la_mine/src/assets/scss/components/_header.scss

@@ -1,9 +1,11 @@
 header{
+  pointer-events: none;
     section{
         &.logo{
             position: relative;
             figure{
                 a{
+                  pointer-events: auto;
                     position: relative;
                     display: block;
                     width: max-content;
@@ -21,27 +23,27 @@ header{
                     }
                     #lumiR_logo{
                         @include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
-                    
+
                         @media screen and (min-width: 576px) {
                             @include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
                         }
                     }
                     #fond_logo{
                         @include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
-                        
+
                         @media screen and (min-width: 576px) {
                             @include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
                         }
                     }
-                    &:hover{
+                    &:hover, &.reduct{
                         height: $heightLogoHover;
                         transition: 0.5s all ease;
                         #lumiR_logo{
-                            @include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px); 
+                            @include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px);
                         }
                         #fond_logo{
                             @include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
-                        }  
+                        }
                     }
                 }
             }
@@ -55,6 +57,7 @@ header{
             }
             figure{
                 justify-content: end;
+                pointer-events: auto;
                 & > div{
                     width: 30px;
                     height: 100%;
@@ -64,6 +67,7 @@ header{
                 }
             }
             .burger{
+              pointer-events: auto;
                 position: relative;
                 margin-left: 0.5rem;
                 .fond-burger{
@@ -75,6 +79,7 @@ header{
                 }
             }
             nav{
+              pointer-events: auto;
                 display: none;
                 position: fixed;
                 right: 0rem;
@@ -126,12 +131,12 @@ header{
                                 & > ul{
                                     height: 0px;
                                     overflow: hidden;
-                                }   
+                                }
                                 &:hover{
                                     & > ul{
                                         height: 100%;
                                         overflow: hidden;
-                                    }   
+                                    }
                                 }
                             }
                             &:not(:first-of-type){
@@ -150,4 +155,4 @@ header{
             }
         }
     }
-}
+}

web/app/themes/la_mine/src/assets/scss/components/_index.scss

@@ -2,4 +2,5 @@
 @import "thumbnails.scss";
 @import "hero.scss";
 @import "forms.scss";
-@import "_title-page.scss";
+@import "_title-page.scss";
+@import "_footer.scss";

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -18,14 +18,14 @@
         .date{
             & > * {
                 font-family: 'universalis-regular';
-                font-size: 1rem;
+                font-size: 0.9rem;
                 line-height: 1;
             }
         }
         .places{
             padding-top: 0.5rem;
             font-family: 'universalis-regular';
-            font-size: 1rem;
+            font-size: 0.9rem;
             line-height: 1;
             text-transform: uppercase;
         }

web/app/themes/la_mine/src/assets/scss/index.scss

@@ -57,25 +57,14 @@ p{
     }
 }
 
-#section_MineVideo{
-    figure{
-        position: relative;
-        padding-bottom: 56.25%; /* 16:9 */
-        height: 0;    
-        iframe{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;        
-        }
-    }
+a{
+    text-decoration: none!important;
 }
 
 .wrap-btn{
-    margin-top: 2rem;
+    // margin-top: 2rem;
     @media screen and (min-width: 576px) {
-        margin-top: 5rem;
+        // margin-top: 5rem;
     }
     a.btn{
         border: 5px solid black;
@@ -89,14 +78,14 @@ p{
 }
 
 // @import "bootstrap/scss/bootstrap-grid.scss";
-// @import "normalize.css/normalize.css"; 
+// @import "normalize.css/normalize.css";
 
 
 // hamburgers
 // @import "./node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
 
 // Config
-// @import "scss/configs/variables.scss"; 
+// @import "scss/configs/variables.scss";
 // @import "scss/configs/mixins.scss";
 
 // body{
@@ -108,7 +97,7 @@ p{
 //     src: url('../fonts/millimetre-regular-webfont.woff2') format('woff2'),
 //          url('../fonts/millimetre-regular-webfont.woff') format('woff');
 //     font-weight: normal;
-//     font-style: normal; 
+//     font-style: normal;
 // }
 //
 // @font-face {

web/app/themes/la_mine/src/assets/scss/pages/_association.scss

@@ -25,9 +25,11 @@
     }
     aside{
         height: 100%;
-        header{
+        .__header{
           h3{
-            font-size: 1rem;
+            font-family: 'millimetre-bold';
+            font-size: 1.2rem;
+            line-height: 1;
           }
         }
         & > .wrapper{
@@ -35,22 +37,49 @@
           padding: 1rem 2rem;
         }
         .__content{
+          ul{
+            li{
+              margin: 0.5rem 0;
+            }
+          }
           a{
             color: $colorBlack;
             text-decoration: none;
+            font-family: 'universalis-regular';
+            font-size: 1.2rem;
+            line-height: 1;
+            text-transform: uppercase;
+            text-decoration: underline;
           }
         }
         #bouton_asso{
           margin: 2rem 0;
           text-align: center;
           a{
+            background: none;
+            color: black;
+            transition: 0.3s all ease;
             padding: 0.5rem 1rem;
             border:5px solid $colorYellow;
             color: $colorBlack;
             text-decoration: none;
+            font-family: 'universalis-regular';
+            font-size: 1.2rem;
+            line-height: 1;
+            &:hover{
+              background: $colorYellow;
+              color: white;
+              transition: 0.3s all ease;
+            }
           }
         }
     }
+    .wrapper__content{
+      h3{
+        font-size:1.5rem;
+        font-family: 'millimetre-bold';
+      }
+    }
     .tableau_engagements{
         &.card-columns {
             column-count: 1;
@@ -68,6 +97,12 @@
             border: 5px solid $colorYellow;
             margin-bottom: 20px;
             padding: 2rem;
+            h4{
+              text-transform: uppercase;
+              font-family: 'universalis-bold';
+              font-size: 1.5rem;
+              line-height: 1;
+            }
         }
     }
 }

web/app/themes/la_mine/src/assets/scss/pages/_benevole-zone.scss

@@ -7,6 +7,14 @@
     main{
         aside{
             margin-bottom: 2rem;
+            .title{
+                h3{
+                    font-size: 1.8rem;
+                    line-height: 1.2;
+                    font-family: 'millimetre-regular';
+                    color: $colorPurple;
+                }
+            }
             .__content{
                 padding: 1rem;
                 border: 5px solid $colorPurple;
@@ -20,6 +28,7 @@
                     text-align: center;
                     margin: 0.5rem 0;
                     a{
+
                         display: block;
                         width: max-content;
                         margin: auto;

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -9,7 +9,7 @@
                 &:first-of-type{
                     padding-top: 10rem;
                 }
-                padding: 5rem 0;    
+                padding: 5rem 0;
             }
             .container-fluid{
                 & > h3{
@@ -40,7 +40,7 @@
                 @media screen and (min-width: 576px) {
                     font-size: 1.5rem;
                     line-height: 1.2;
-                }             
+                }
             }
             &#section_proch{
                 & > .container-fluid{
@@ -63,7 +63,7 @@
                     &:hover {
                         .wrap_content{
                             margin-top: -7rem;
-                        }    
+                        }
                     }
                 }
             }
@@ -89,7 +89,7 @@
                             position: relative;
                             padding: 20px 10px;
                             background-color: white;
-                            border: 5px solid $colorYellow;    
+                            border: 5px solid $colorYellow;
                             margin: auto;
                         }
                     }
@@ -119,7 +119,7 @@
                                 position: relative;
                                 padding: 20px 10px;
                                 background-color: white;
-                                border: 5px solid $colorYellow;    
+                                border: 5px solid $colorYellow;
                                 margin-bottom: 100px;
                             }
                         }
@@ -152,7 +152,7 @@
                     }
                     & > div{
                         border:10px solid $colorRed;
-                        padding: 1rem; 
+                        padding: 1rem;
                         height: calc(100% - 4rem);
                         h4{
                             font-size: 1rem;
@@ -188,6 +188,7 @@
                 }
                 article{
                     height: auto;
+                    min-height: 500px;
                     h3{
                         color: $colorBlue;
                         font-size: 1.875rem;
@@ -222,7 +223,7 @@
                     &:hover {
                         .wrap_content{
                             margin-top: -11rem;
-                        }    
+                        }
                     }
                 }
             }
@@ -231,6 +232,19 @@
                     & > h3{
                         border: 5px solid $colorBlue  ;
                     }
+                    figure{
+                        position: relative;
+                        padding-bottom: 56.25%; /* 16:9 */
+                        height: 0;
+                        iframe{
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
                 }
             }
         }
@@ -266,7 +280,7 @@
         text-align: center;
         & * {
             color : $colorBlack;
-        }   
+        }
     }
     &:hover {
         figure{
@@ -277,6 +291,6 @@
         }
         .wrap_content{
             transition: 0.2s margin-top ease;
-        }    
+        }
     }
 }

web/app/themes/la_mine/src/assets/scss/pages/_la-collecte.scss

@@ -9,6 +9,10 @@
         header{
             h3{
                 text-align: center;
+                font-family: 'millimetre-regular';
+                font-size: 1.8rem;
+                color: $colorPink;
+                text-transform: uppercase;
             }
         }
     }

web/app/themes/la_mine/src/assets/scss/pages/_les-projets.scss

@@ -29,6 +29,8 @@
                 text-align: center;
                 text-transform: uppercase;
                 color: $colorRed;
+                font-family: 'millimetre-regular';
+                font-size: 1.8rem;                
             }
             & > div{
                 padding: 2.5rem 3rem;            
@@ -50,7 +52,13 @@
                     }
                 }
                 ._pjt{
-                    font-weight: bold;
+                    p{
+                        font-family: 'millimetre-regular';
+                        font-weight: bold;
+                        font-size: 1.3rem;
+                        line-height: 1.2;
+                        margin-bottom: 0rem;
+                    }
                 }
             }
         }

web/app/themes/la_mine/src/assets/scss/pages/_les-temps-forts.scss

@@ -55,6 +55,12 @@
         & > article{
             height: 100%;
             margin-bottom: 1rem;
+            h3{
+                font-size: 1.8rem;
+                line-height: 1.2;
+                font-family: 'millimetre-regular';
+                margin-bottom: 0;
+            }
         }
     }
 }

web/app/themes/la_mine/src/assets/scss/pages/_privatiser-lespace.scss

@@ -18,6 +18,9 @@
                 text-align: center;
                 text-transform: uppercase;
                 color: $colorGreen;
+                font-family: 'millimetre-regular';
+                font-size: 2rem;
+                line-height: 1;
             }
             .__item{
                 border: 5px solid $colorGreen;
@@ -26,17 +29,18 @@
         }
         .btn{
             // margin-top: 2rem;
-            border: 5px solid black;
+            border: 5px solid $colorGreen;
             padding: 0.5rem 1rem;
             border-radius: 0px;
             color: black;
             background: white;
             &:hover{
                 color: white;
-                background: black;
+                background: $colorGreen;
                 transition: all 0.3s ease;
                 a{
                     color:white;
+                    text-decoration: none;
                 }
             }
             a{
@@ -77,7 +81,11 @@
                 p:last-of-type{
                     margin-bottom: 0;
                 }
-
+                h6{
+                    font-size: 1rem;
+                    text-transform: uppercase;
+                    font-family: 'universalis-bold';                    
+                }
                 &.legendes{
                     opacity: 0;
                     -webkit-transform: translateX(50px);

web/app/themes/la_mine/src/assets/scss/pages/_single.scss

@@ -53,6 +53,9 @@
     .other{
         margin: 5rem 0;
         h3{
+            font-family: 'millimetre-bold';
+            font-size: 2rem;
+            line-height: 1;
             border: 5px solid $colorYellow;
             width: max-content;
             padding: 0.5rem;

web/app/themes/la_mine/templates/accueil.twig

@@ -46,7 +46,7 @@
 	<div class="container-fluid">
 		<h3>La Mine en vidéo</h3>				
 		{% if post.video_la_mine  %}
-			<figure class="row">
+			<figure class="row mx-0">
 				<iframe width="560" height="315" src="//www.youtube.com/embed/{{ post.video_la_mine }}" frameborder="0" allowfullscreen></iframe>
 			</figure>
 		{% endif %}

web/app/themes/la_mine/templates/association.twig

@@ -16,7 +16,7 @@
 		
 		<article class="wrap__content __asso">
 			<header>
-				<h2 class="titre_1">{{ post.meta('titre_asso') }}</h2>
+				<h3 class="titre_1">{{ post.meta('titre_asso') }}</h3>
 			</header>
 			<section class="__body">
 				{{ post.meta('paragraphe_asso') }}
@@ -25,7 +25,7 @@
 
 		<article class="wrap__content engagement">
 			<header>
-				<h2 class="titre_1">{{ post.meta('titre_engage') }}</h2>
+				<h3 class="titre_1">{{ post.meta('titre_engage') }}</h3>
 			</header>
 
 			<section class="__body">
@@ -50,7 +50,7 @@
 
 				<section class="wrap__content vie-asso">
 					<div class="__header">
-						<h2 class="titre_1">{{ post.meta('titre_vieasso') }}</h2>
+						<h3 class="titre_1">{{ post.meta('titre_vieasso') }}</h3>
 					</div>
 					<div class="__body">
 						{{ post.meta('paragraphe_vieasso') }}

web/app/themes/la_mine/templates/components/footer.twig

@@ -1,44 +1,41 @@
-<section class="col">
+<section class="col-12 col-lg-12 col-xl">
   <div class="row">
-    <figure class="col">
-      <a rel="noreferrer" href="{{site.url}}"><img src="{{theme.link}}/src/assets/images/logo-lamine.png" /></a>
+    <figure class="col-6 col-sm-4 col-md-2 mx-auto">
+      <a rel="noreferrer" href="{{site.url}}"><img src="{{theme.link}}/dist/assets/images/logo_lamine_vect2.svg" /></a>
     </figure>
 
-    <div class="col">
+    <div class="col-12 col-sm-6 col-md">
       {{options.texte_horaire }}
     </div>
 
-    <div class="col">
+    <div class="col-12 col-sm-6 col-md">
       {{options.texte_adresse }}
     </div>
 
-    <div class="col">
-      <div class="">
+    <div class="col-12 col-sm-6 col-md">
+      <div>
         {{options.texte_collecte }}
       </div>
 
-      <div class="">
-        <figure class="">
-          <a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
-            <img src="{{ Image(options.facebook.logo_facebook).src }}" />
-            <figcaption>{{options.facebook.texte_facebook}}</figcaption>
-          </a>
-        </figure>
-        <div class="insta">
-          <figure rel="noreferrer" class="d-flex" target="_blank" href="{{options.instagram.lien_instagram}}">
-            <img src="{{ Image(options.instagram.logo_instagram).src }}" />
+      <figure class="mx-auto rs">
+        <a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
+				  <img src="{{theme.link}}/dist/assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>          
+          <figcaption>{{options.facebook.texte_facebook}}</figcaption>
+        </a>
+        <a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
+            <img src="{{theme.link}}/dist/assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
             <figcaption>{{options.instagram.texte_instagram}}</figcaption>
-          </figure>
-        </div>
-      </div>
+        </a>
+      </figure>
 
     </div>
   </div>
 </section>
 
-<section class="col">
+<section class="col-12 col-lg-12 col-xl">
+  <div class="row">
 
-    <div id="mc_embed_signup" class="row">
+    <div id="mc_embed_signup" class="col-12">
       <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
         <div class="d-flex" id="mc_embed_signup_scroll">
           <div><p>Recevoir l'actualité de La Mine</p></div>
@@ -49,21 +46,23 @@
       </form>
     </div>
     
-  <div class="row">
-    <a class="btn" target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
-  </div>
+    <div class="col-12">
+      <a class="btn add_assos" target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
+    </div>
+
+    <div class="col-12 part">
+      <h3>{{options.titre}}</h3>
+      <figure class="col px-0">
+        <div class="main-carousel">
+        {% for partner in options.partenaire %}
+          <a rel="noreferrer" target="_blank" href="{{partner.lien_site_partenaire}}">
+            <img src="{{ Image(partner.logo).src }}" />
+          </a>
+        {% endfor %}
+        </div>
+      </figure>
+    </div>
 
-  <div class="row">
-    <h3>{{options.titre}}</h3>    
-    <figure class="col px-0">        
-      <div class="main-carousel">
-      {% for partner in options.partenaire %}  
-        <a rel="noreferrer" target="_blank" href="{{partner.lien_site_partenaire}}">
-          <img src="{{ Image(partner.logo).src }}" />
-        </a>
-      {% endfor %}
-      </div>
-    </figure>
   </div>
 
 </section>

web/app/themes/la_mine/templates/components/header.twig

@@ -1,7 +1,7 @@
 <section class="logo col-6">
 	<figure>
 		<a href="{{site.url}}" rel="noreferrer">
-			<img src="{{theme.link}}/dist//assets/images/logo_lamine_vect.svg" alt="logo_Lamine" title="Le logo de La mine"/>
+			<img src="{{theme.link}}/dist/assets/images/logo_lamine_vect.svg" alt="logo_Lamine" title="Le logo de La mine"/>
 			<span id="lumiR_logo"></span>
 			<span id="fond_logo"></span>
 		</a>
@@ -12,12 +12,12 @@
 	<figure class="rs col-auto d-flex px-0">		
 		<div id="facebook">
 			<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
-				<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
+				<img src="{{theme.link}}/dist/assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
 			</a>
 		</div>
 		<div id="insta">
 			<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
-				<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
+				<img src="{{theme.link}}/dist/assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
 			</a>
 		</div>
 	</figure>

web/app/themes/la_mine/templates/partial/section_projets.twig

@@ -1,6 +1,6 @@
 <h3>Les Projets</h3>
 <h4>{{ post.meta('texte_chapeau_projet') }}</h4>
-<div class="row">
+<div class="row justify-content-center">
 	<!--ajout chloe drag-->
 		{# <div id="drag_1" class="group_drag">
 			<img src="{{theme.link}}/asset/images/objet_drag_1.svg">
@@ -37,7 +37,7 @@
 				{{item.meta('text')|truncate(30)}}
 				<div class="col px-0">
 					{% for projet in item.meta("projets") %}
-						<h4>{{projet.titre}}</h4>						
+						<h4>{{projet.titre}}</h4>
 						{{projet.text|truncate(20)}}
 					{% endfor %}
 				</div>

web/app/themes/la_mine/templates/privatiser_lespace.twig

@@ -35,9 +35,9 @@
 		</div>
 
 		<div class="wrap__content __organisation">
-			<div class="__body row">
+			<div class="__body row justify-content-center">
 				{% for item in post.meta('type_organisation') %}
-				<article class="__content _orga col-12 col-lg-6 col-xl-4">
+				<article class="__content _orga col-12 col-sm-6 col-md-4">
 					<div class="title">
 						<h5>{{ item.titre_bloc}}</h5>
 					</div>