cleané

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

@@ -1,5 +1,3 @@
-
-
 function slides() {
   var Home = $('.accueil .hero .main-carousel');
   $('.main-carousel').flickity({
@@ -8,8 +6,6 @@ function slides() {
     prevNextButtons: false,
   });
 
-  
-
   // console.log('carrousell');
   // if (Home != null) {
   //   var flkty = new Flickity( Home, {
@@ -60,7 +56,7 @@ function masonry() {
       //columnWidth: '.engagement',
       columnWidth: '.engagement',
       itemSelector: '.engagement',
-      gutter: '.gutter-sizer',
+      gutter: 10,
       percentPosition: true
     });
 
@@ -96,6 +92,12 @@ 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');
+    }
+
+    $(this).toggleClass('is-active');
   });
 }
 

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

@@ -47,7 +47,7 @@ header{
             }
         }
         &.nav-main{
-            justify-content: end;
+            justify-content: flex-end;
             align-items: baseline;
             padding-top: $padTopNav;
             & > * {

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

@@ -1,3 +1,4 @@
 @import "header.scss";
 @import "thumbnails.scss";
-@import "hero.scss";
+@import "hero.scss";
+@import "forms.scss";

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

@@ -0,0 +1,28 @@
+.la-collecte{
+    aside{
+        form{
+            border: 5px solid black;
+            padding: 1rem;
+            .acf-form-submit{
+                text-align: center;
+                button {
+                    padding: 0.5rem 1rem;
+                    border: 1px solid black;
+                    background: white;
+                    &:hover{
+                        color: white;
+                        background: black;
+                        transition: all 0.3s ease;
+                    }
+                }
+            }
+            label{
+                display: none!important;
+            }
+            input{
+                border: 0px solid black!important;
+                border-bottom: 1px solid black!important;
+            }
+        }
+    }
+}

web/app/themes/la_mine/src/assets/scss/configs/_mixins.scss

@@ -19,12 +19,22 @@ body{
   align-items: center;
 }
 
-  @mixin reset-list{
+@mixin reset-list{
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+@mixin full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+
 @mixin horizontal-list {
   & > li {
     display: inline-block;

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

@@ -32,7 +32,23 @@ li,ul,ol{
     @include reset-list;
 }
 
-footer, iframe{
+
+#section_MineVideo{
+    figure{
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;    
+        iframe{
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;        
+        }
+    }
+}
+
+footer{
     display: none!important;
 }
 

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

@@ -1,4 +1,4 @@
-&.agenda{
+&.agenda, &.archive{
     main{
         padding-top: 10rem;
         section{
@@ -11,6 +11,17 @@
                 border:  5px solid black;
                 padding: 0.5rem 1rem;
                 margin-left: 1rem;
+                cursor:pointer;
+                transition: background 0.3s ease, color 0.3s ease;
+                &:hover{
+                    background:black;
+                    color: white;
+                    transition: all 0.3s ease;
+                }
+                &.is-active{
+                    background:black;
+                    color: white;
+                }
             }
         }
         .thumbnails{
@@ -30,4 +41,5 @@
         }
     }
 
-}
+}
+

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

@@ -0,0 +1,36 @@
+&.association{
+    aside{
+        height: 100%;
+        & > .wrapper{
+          border:5px solid yellow;
+          padding: 1rem 2rem;
+        }
+        #bouton_asso{
+          margin: 2rem 0;
+          text-align: center;
+          a{
+            padding: 0.5rem 1rem;
+            border:5px solid yellow;
+          }
+        }
+    }
+    .tableau_engagements{
+        &.card-columns {
+            column-count: 1;
+            @include media-breakpoint-only(md) {
+                column-count: 1;
+            }
+            @include media-breakpoint-only(lg) {
+              column-count: 2;
+            }
+            @include media-breakpoint-only(xl) {
+              column-count: 2;
+            }
+          }
+        article{
+            border: 5px solid yellow;
+            margin-bottom: 20px;
+            padding: 2rem;
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+&.la-benevole-zone{
+    main{
+        aside{ 
+            .__content{
+                padding: 1rem;
+                border: 5px solid black;
+            }
+            .__bouttons{
+                & > div{
+                    text-align: center;
+                    margin: 0.5rem 0;
+                    a{
+                        display: block;
+                        width: max-content;
+                        margin: auto;
+                        padding: 0.5rem 1em;
+                        border: 2px solid black;
+                        color: black;
+                        background: white;
+                        &:hover{
+                            color: white;
+                            background: black;
+                            transition: all 0.3s ease;
+                        }
+    
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -11,6 +11,26 @@
                 }
                 padding: 5rem 0;    
             }
+            .container-fluid{
+                & > h3{
+                    border: 5px solid black;
+                    width: max-content;
+                    display: inline-block;
+                    padding: 0.5rem 1.5rem;
+                    z-index: 999;
+                    left: -0rem;
+                    background: white;
+                    position: relative;
+                    margin-bottom: 2rem;
+                    transform: translateX(0%) rotate(-15deg);
+                    @media screen and (min-width: 576px) {
+                        transform: translateX(0%) rotate(-15deg);
+                    }
+                    @media screen and (min-width: 1200px) {
+                        transform: translateX(-50%) rotate(-15deg);
+                    }
+                }
+            }
             h4{
                 font-size: 1.2rem;
                 line-height: 1.2;
@@ -23,6 +43,9 @@
                 & > div{
                     & > .row{
                         justify-content: center;
+                        &:first-of-type{
+                            min-height: 500px;
+                        }
                     }
                 }
                 .thumbnails{
@@ -37,14 +60,27 @@
                 }
             }
             &#section_projets{
+                .container-fluid{
+                   & > h4{
+                        text-align: center;
+                        margin: 0 0 2rem 0;
+                    }
+                }
                 .projets{
+                    margin-bottom: 2rem;
                     h3{
                         text-align: center;
                         color: red;
+                        text-transform: uppercase;
+                        height: 4rem;
+                        display: flex;
+                        align-items: flex-end;
+                        justify-content: center;
                     }
                     & > div{
                         border:10px solid red;
                         padding: 1rem; 
+                        height: calc(100% - 4rem);
                         h4{
                             font-size: 1rem;
                             line-height: 1.2;
@@ -59,7 +95,7 @@
                         }
                     }
                     &:not(:last-of-type){
-                        margin-bottom: 2rem;
+                        // margin-bottom: 2rem;
                     }
                 }
             }
@@ -105,6 +141,56 @@
                 }
 
             }
+            &#section_asso{
+                .container-fluid{
+                    & > .row{
+                        position: relative;
+                    }
+                        figure {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        margin-top: 100px;
+                        width: 70%;
+                        & ~ .row{
+                            margin-top: 2rem;
+                            left: 0;
+                            transform: translateX(0);
+                            width: 100%;
+                            position: relative;
+                            padding: 20px 10px;
+                            background-color: white;
+                            border: 8px solid yellow;    
+                            margin: auto;
+                        }
+                    }
+                }
+                @media screen and (min-width: 576px) {
+                    .container-fluid{
+                        & > .row{
+                            position: relative;
+                        }
+                            figure {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            margin-top: 100px;
+                            width: 70%;
+                            & ~ .row{
+                                margin-top: 2rem;
+                                left: 80%;
+                                transform: translateX(-100%);
+                                width: 70%;
+                                position: relative;
+                                padding: 20px 10px;
+                                background-color: white;
+                                border: 8px solid yellow;    
+                                margin-bottom: 100px;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
     a.btn{

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

@@ -1,2 +1,15 @@
 @import "home.scss";
-@import "agenda.scss";
+@import "agenda.scss";
+@import "benevole-zone";
+@import "privatiser-lespace";
+@import "les-projets";
+@import "les-temps-forts";
+@import "single";
+
+@import "association";
+
+&:not(.accueil){
+    main{
+        padding-top:10rem;
+    }
+}

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

@@ -0,0 +1,35 @@
+&.les-projets{
+    article{
+        margin: 5rem 0;
+        header{
+            margin-bottom: 1.5rem;
+            h3{
+                text-align: center;
+                text-transform: uppercase;
+            }
+            & > div{
+                padding: 2.5rem 3rem;            
+                border:5px solid black;
+                p{
+                    margin: 0;
+                }
+            }
+        }
+        .projet{
+            justify-content: center;
+            .wrap_content{
+                figure{
+                    height: 300px;
+                    img{
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                }
+                ._pjt{
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+&.les-temps-forts{
+    .img{
+        width: 100%;
+        height: 400px;
+        img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+        }
+    }
+    .video{
+        height: 400px;
+        width: 100%;
+        & > div{
+            position: relative;
+            width: 100%;
+            padding-bottom: 50%;
+            padding-top: 35px;
+            height: 100%;
+            overflow: hidden;
+            iframe{
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }        
+        }
+    }
+    main{
+        & > article{
+            height: 100%;
+            margin-bottom: 1rem;
+        }
+    }
+}

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

@@ -0,0 +1,61 @@
+&.privatiser-lespace{
+    main{
+        .main-carousel{
+            @include full-width;
+        }
+        article{
+            h5{
+                text-align: center;
+            }
+            .__item{
+                border: 5px solid green;
+                padding: 0.8rem;
+            }
+        }
+        .btn{
+            margin-top: 2rem;
+            border: 1px solid black;
+            padding: 0.5rem 1rem;
+            border-radius: 0px;
+            color: black;
+            background: white;
+            &:hover{
+                color: white;
+                background: black;
+                transition: all 0.3s ease;
+                a{
+                    color:white;
+                }
+            }
+            a{
+                color: black;
+            }
+        }
+        figure{
+            position: relative;
+            width: 100%;
+            height: 600px;
+            img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+            figcaption{
+                left: 50%;
+                transform: translateX(-50%);
+                border: 5px solid green;
+                position: absolute;
+                bottom: 2rem;
+                background: white;
+                padding: 0.5rem 1rem;
+                @media screen and (min-width: 576px) {
+                    left: 0%;
+                    transform: translateX(0%);
+                }
+                p:last-of-type{
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+&.post{
+    .other{
+        margin: 5rem 0;
+    }
+}

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

@@ -29,10 +29,10 @@
 
 <section id="section_projets" class="row">
 	<div class="container-fluid">
-	{% include 'partial/section_projets.twig' %}
-	{# <div class="paralax" data-rellax-speed="-2" data-rellax-percentage="0.5">
-		<img src="{{theme.link}}/asset/images/objet_3.svg" alt="objet 3">
-	</div> #}
+		{% include 'partial/section_projets.twig' %}
+		{# <div class="paralax" data-rellax-speed="-2" data-rellax-percentage="0.5">
+			<img src="{{theme.link}}/asset/images/objet_3.svg" alt="objet 3">
+		</div> #}
 	</div>
 </section>
 
@@ -44,14 +44,12 @@
 
 <section id="section_MineVideo" class="row">
 	<div class="container-fluid">
-		<h3>La Mine en vidéo</h3>		
-		<div class="row">
-			{% if post.video_la_mine  %}
-			<figure>
+		<h3>La Mine en vidéo</h3>				
+		{% if post.video_la_mine  %}
+			<figure class="row">
 				<iframe width="560" height="315" src="//www.youtube.com/embed/{{ post.video_la_mine }}" frameborder="0" allowfullscreen></iframe>
 			</figure>
-			{% endif %}
-		</div>
+		{% endif %}
 	</div>
 </section>
 

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

@@ -2,12 +2,13 @@
 {% block content %}
 {% include 'components/title_page.twig'  %}
 {% set now = 'now'|date('Ydj') %}
-	<section>
-		<ul class="btn_archive d-flex flex-wrap button-group filter-button-group my-0">
+
+	<section class="row filter">
+		<ul class="d-flex flex-wrap">
 			<li><a href="/agenda">Agenda</a></li>
 		</ul>
 
-      <ul class="cat-list d-flex flex-wrap button-group filter-button-group">
+	  	<ul class="cat-list col d-flex flex-wrap">
         <li data-filter="*" >
           Tous
         </li>
@@ -24,20 +25,19 @@
           {% endif %}
         {% endfor %}
       </ul>
-		<div class="grid">
-			{% for item in posts %}
-        {% set end = item.informations_fin_event|date("Ydj") %}
-        {% if now >= end %}
-
-          {% include 'components/thumbnails/thumbnails.twig'%}
+  </section>
 
-        {% endif %}
+  <section class="row grid">
+    {% for item in posts %}
+      {% set end = item.informations_fin_event|date("Ydj") %}
+      {% if now >= end %}
+        {% include 'components/thumbnails/thumbnails.twig'%}
+      {% endif %}
 
-			{% endfor %}
-		</div>
-		<div class="paralax" data-rellax-speed="-5">
-			<img src="{{theme.link}}/asset/images/objet_4.svg" alt="objet 4">
-		</div>
-	</section>
+    {% endfor %}
+    <div class="paralax" data-rellax-speed="-5">
+      <img src="{{theme.link}}/asset/images/objet_4.svg" alt="objet 4">
+    </div>
+  </section>
 
 {% endblock %}

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

@@ -4,59 +4,65 @@
 {% include 'components/title_page.twig' %}
 
 <section class="row">
+
 	<aside class="sidebar_left col-md-4 mr-2">
-		{% include '/components/sider_left.twig' with { name__template : 'association' } %}
-	</aside>
+		<div class="wrapper">
+			{% include '/components/sider_left.twig' with { name__template : 'association' } %}
+		</div>
+		{% include '/components/buttons/bouton_asso.html.twig' %}
 
-	<div class="wrapper__content col-md-7">
-		<div class="wrap__content __asso">
+	</aside>
 
-			<div class="__header">
+	<section class="wrapper__content col-md-7">
+		
+		<article class="wrap__content __asso">
+			<header>
 				<h2 class="titre_1">{{ post.meta('titre_asso') }}</h2>
-			</div>
-
-			<div class="__body">
+			</header>
+			<section class="__body">
 				{{ post.meta('paragraphe_asso') }}
-			</div>
+			</section>
+		</article>
 
-		</div>
-		<div class="wrap__content engagement">
-			<div class="__header">
+		<article class="wrap__content engagement">
+			<header>
 				<h2 class="titre_1">{{ post.meta('titre_engage') }}</h2>
-			</div>
+			</header>
 
-			<div class="__body">
-				<div class="__image">
+			<section class="__body">
+			
+				<figure class="__image">
 					<img src="{{ Image(post.meta('image_engagement')).src }}" />
-				</div>
-
-				<div class="tableau_engagements row align-items-start">
-				<div class="gutter-sizer"></div>
+				</figure>
+			
+				<section class="tableau_engagements card-columns ">
+					{# <div class="gutter-sizer"></div> #}
 					{% for item in post.meta('type_engagement') %}
-						<div class="engagement col-md-12 col-lg-6"> <!--semble pas marcher (à cause de massonery ?)-->
-							<div class="__head">
+						<article class="engagement card"> <!--semble pas marcher (à cause de massonery ?)-->
+							<header>
 								<h4>{{item.titre_engagement}}</h4>
-							</div>
+							</header>
 							<div class="__content">
 								{{item.paragraphe_engagement}}
 							</div>
-						</div>
+						</article>
 					{% endfor %}
-				</div>
+				</section>
 
-				<div class="wrap__content vie-asso">
+				<section class="wrap__content vie-asso">
 					<div class="__header">
 						<h2 class="titre_1">{{ post.meta('titre_vieasso') }}</h2>
 					</div>
-
 					<div class="__body">
 						{{ post.meta('paragraphe_vieasso') }}
 					</div>
+				</section>
 
-				</div>
-			</div>
-		</div>
-	</div>
+			</section>
+
+		</article>
+
+	</section>
 
 </section>
 

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

@@ -51,9 +51,5 @@
 				{% endfor %}
 			</ul>
 		</div>
-		<div class = "__bouttons" >
-			{% include '/components/buttons/bouton_asso.html.twig' %}
-		</div>
 	</div>
-
 {% endif %}

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

@@ -1,5 +1,5 @@
 <section class="title_page">
-<div class="{{class}}">
-	<h2 class="titre_page">{{post.title}}</h2>
-</div>
+	<div class="{{class}}">
+		<h2 class="titre_page">{{post.title}}</h2>
+	</div>
 </section>

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

@@ -6,4 +6,5 @@
 	{% endfor %}
 
 	{% include 'partial/pagination.twig' with { pagination: posts.pagination({show_all: false, mid_size: 3, end_size: 2}) } %}
+	
 {% endblock %}

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

@@ -5,26 +5,27 @@
 
 <section class="row">
 
-	<aside class="sidebar_left col-md-4 mr-2">
+	<aside class="sidebar_left col-12 col-md-12 col-lg-6 col-xl-4">
 		{% include 'components/sider_left.twig' with { name__template : 'benevole' } %}
 	</aside>
 
-	<div class="wrapper__content col-md-7">
-		<div class="wrap__content">
+	<article class="wrapper__content col-12 col-md-12 col-lg-6 col-xl-8">
 
-			<div class="__header">
+		<div class="wrap__content">
+			<header>
 				<h2 class="__chapeau">{{ post.meta('texte_chapeau') }}</h2>
-			</div>
+			</header>
 
 			<div class="__body">
 				{{ post.meta('paragraphe_descriptif') }}
 			</div>
 
 		</div>
-	</div>
-	<div class="paralax" data-rellax-speed="-2">
-		<img src="{{theme.link}}/asset/images/objet_6.svg" alt="objet 6">
-	</div>
+
+		<div class="paralax" data-rellax-speed="-2">
+			<img src="{{theme.link}}/asset/images/objet_6.svg" alt="objet 6">
+		</div>
+	</article>
 </section>
 
 

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

@@ -4,31 +4,28 @@
 {% include 'components/title_page.twig'  %}
 
 <section class="row">
-	<aside class="sidebar_left col-md-4 mr-2">
-		<div class="__header">
+	<aside class="sidebar_left col-12 col-md-6 col-lg-6 col-xl-4">
+		<header>
 			<div class="title">
 				<h3>On s'organise</h3>
 			</div>
-		</div>
+		</header>
 		{% include 'components/forms/form_lacollecte.twig' %}
 	</aside>
 
-	<div class="wrapper__content col-md-7">
+	<article class="wrapper__content col-12 col-md-12 col-lg-6 col-xl-8">
 		<div class="wrap__content">
-
-			<div class="__header">
+			<header class="__header">
 				<h2 class="__chapeau">{{ post.meta('texte_chapeau') }}</h2>
-			</div>
-
+			</header>
 			<div class="__body">
 					{{ post.meta('paragraphe_descriptif') }}
 			</div>
-
 		</div>
-	</div>
-	<div class="paralax" data-rellax-speed="5">
-		<img src="{{theme.link}}/asset/images/objet_5.svg" alt="objet 5">
-	</div>
+		<div class="paralax" data-rellax-speed="5">
+			<img src="{{theme.link}}/asset/images/objet_5.svg" alt="objet 5">
+		</div>
+	</article>
 </section>
 
 {% endblock %}

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

@@ -1,37 +1,33 @@
 {% extends "base.twig" %}
 
 {% block content %}
-{% include 'components/title_page.twig'  %}
-<div class="paralax w-30" data-rellax-speed="5">
-<img src="{{theme.link}}/asset/images/objet_2.svg" alt="objet 2">
-</div>
+	{% include 'components/title_page.twig'  %}
+	<div class="paralax w-30" data-rellax-speed="5">
+		<img src="{{theme.link}}/asset/images/objet_2.svg" alt="objet 2">
+	</div>
 
 	{% for item in posts %}
-		<section>
-			<div class="header">
-				<div class="title">
-					<h3>{{item.title}}</h3>
-				</div>
-				<div class="content_zone">
-					{{item.text}}
-				</div>
-			</div>
+		<article>
+			<header>
+				<h3>{{item.title}}</h3>
+				<div><p>{{item.text}}</p></div>
+			</header>
 			<div class="projet row">
 				{% for projet in item.meta("projets") %}
-					<div class="wrap_content col- col-md-6 col-lg-4">
-							<div class="img">
-								<img src="{{ Image(projet.image).src }}" alt="{{ Image(projet.image).title }}">
-							</div>
-
-							<div class="title _pjt">
-								{{projet.titre}}
-							</div>
-							<div class="content">
-								{{projet.text}}
-							</div>
+					<div class="wrap_content p-3 col-12 col-md-6 col-lg-4">
+						<figure class="img">
+							<img src="{{ Image(projet.image).src }}" alt="{{ Image(projet.image).title }}">
+						</figure>
+						<div class="title _pjt">
+							<p>{{projet.titre}}</p>
+						</div>
+						<div class="content">
+							{{projet.text}}
+						</div>
 					</div>
 				{% endfor %}
 			</div>
-		</section>
+		</article>
 	{% endfor %}
+
 {% endblock %}

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

@@ -4,37 +4,37 @@
 {% include 'components/title_page.twig'%}
 
 	{% for item in posts %}
-		<section class="row tpsF">
-			<div class="sidebar col-md-4">
+		<article class="row tpsF">
+			<aside class="sidebar col-md-4">
 				<div class="title">
 					<h3>{{item.title}}</h3>
 					<div class="next_edition">
-						<p>Prochaine Édition : <time>{{item.next_edition|date("F Y") }}</time>
-						</p>
+						<p>Prochaine Édition : <time>{{item.next_edition|date("F Y") }}</time></p>
 					</div>
 				</div>
 				<div class="content">
 					{{item.meta('text')}}
 				</div>
-			</div>
-			<div class="wrap_content col-md-8">
-				<div class="slide">
-			    {% for media in item.meta('slide') %}
-						{% for add in media %}
-							{% if add.acf_fc_layout == 'images' %}
-								<div class="img">
-									<img src="{{ Image(add.image).src }}" alt="{{ Image(add.image).title }}">
-								</div>
-							{% endif %}
-							{% if add.acf_fc_layout == 'video' %}
-								<div class="video">
+			</aside>
+
+			<figure class="main-carousel col-md-8">
+			{% for media in item.meta('slide') %}
+					{% for add in media %}
+						{% if add.acf_fc_layout == 'images' %}
+							<div class="img">
+								<img src="{{ Image(add.image).src }}" alt="{{ Image(add.image).title }}">
+							</div>
+						{% endif %}
+						{% if add.acf_fc_layout == 'video' %}
+							<div class="video">
+								<div class="position-relative">
 									{{ add.video }}
 								</div>
-							{% endif %}
-						{% endfor %}
+							</div>
+						{% endif %}
 					{% endfor %}
-				</div>
-			</div>
-		</section>
+				{% endfor %}
+			</figure>
+		</article>
 	{% endfor %}
 {% endblock %}

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

@@ -5,14 +5,14 @@
 		<img src="{{ Image(post.meta('image')).src }}" />
 	</figure>
 	<div class="row">
-		<div class="col-6">
+		<div class="col-12 col-md-6">
 			{{ post.meta('paragraphe_descriptif') }}
 		</div>
-		<div class="col-6">
+		<div class="col-12 col-md-6">
 			{{ post.meta('paragraphe_descriptif_2') }}
-		</div>
-		<div class="col">
-			{% include 'components/buttons/bouton_ensavoir.html.twig' %}
+			<div class="col-12 mx-0 px-0">
+				{% include 'components/buttons/bouton_ensavoir.html.twig' %}
+			</div>
 		</div>
 	</div>
 </div>

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

@@ -1,6 +1,5 @@
-<h3 class="titre">Les temps forts</h3>
+<h3>Les temps forts</h3>
 <div class="row">
-
 	{% for item in tpsF %}
 		<article class="thumbnails col-12 col-md-6 col-lg {{cat}}">	
 			<figure>
@@ -18,10 +17,9 @@
 				</div>
 			</div>
 		</article>
-
 	{% endfor %}
-
 </div>
+
 <div class="row wrap-btn">
 	<a rel="noreferrer" class="btn _all" href="/les-temps-forts">Tout voir</a>
 </div>

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

@@ -3,11 +3,9 @@
 {% block content %}
 {% include 'components/title_page.twig'  %}
 
-<section>
+<article>
 	<div class="wrapper__content prive">
-
 		<div class="wrap__content">
-
 			<div class="__header">
 				<h2 class="texte_chapeau">{{ post.meta('texte_chapeau') }}</h2>
 			</div>
@@ -18,36 +16,35 @@
 
 		</div>
 
-		<div class="wrap__content privatiser __slide">
+		<div class="wrap__content privatiser main-carousel">
 			{% for item in post.meta('slide_image') %}
-				<div class="images">
-					<div class="img">
+					<figure>
 						<img src="{{ Image(item.image).src }}" />
-					</div>
-
-					<div class="legendes col-4">
-						<div class="__head">
-							<h6>{{ item.titre_legende}}</h6>
-						</div>
-						<div class="__content">
-							<p>{{ item.texte_legende}}</p>
+						<div class="container position-relative">
+							<figcaption class="legendes col-10 col-md-6 col-lg-4">
+								<div class="__head">
+									<h6>{{ item.titre_legende}}</h6>
+								</div>
+								<div class="__content">
+									<p>{{ item.texte_legende}}</p>
+								</div>
+							</figcaption>
 						</div>
-					</div>
-				</div>
+					</figure>
 			{% endfor %}
 		</div>
 
 		<div class="wrap__content __organisation">
 			<div class="__body row">
 				{% for item in post.meta('type_organisation') %}
-				<div class="__content _orga col-lg-4">
-				<div class="title">
-					<h5>{{ item.titre_bloc}}</h5>
-				</div>
+				<article class="__content _orga col-lg-4">
+					<div class="title">
+						<h5>{{ item.titre_bloc}}</h5>
+					</div>
 					<div class="__item">
 						{{item.paragraphe_descriptif}}
 					</div>
-					</div>
+				</article>
 				{% endfor %}
 				</div>
 
@@ -64,5 +61,5 @@
 	</div>
 
 
-</section>
+</article>
 {% endblock %}

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

@@ -2,7 +2,8 @@
 {% block content %}
 {% set group = post.meta('informations') %}
 
-	<div class="content-wrapper">
+	<section class="content-wrapper">
+
 		<div class="Btn retour">
 			<a href="/agenda">Retour</a>
 			<div class="fleche"></div>
@@ -11,12 +12,11 @@
 		<article class="row">
 			<div class="header mobile col-12 d-lg-none d-block">
 				<h3 class="titre_event">{{ post.title }}</h3>
-
 			</div>
 
-			<div class="__img_event col-lg-6 col-12">
+			<figure class="__img_event col-lg-6 col-12">
 				<img src="{{ Image(post.image_event).src }}" />
-			</div>
+			</figure>
 
 			<div class="article-content col-lg-6 col-12 my-3 my-lg-0">
 				<div class="header d-none d-lg-block">
@@ -109,20 +109,23 @@
 
 			</div>
 		</article>
-	</div>
+	</section>
 
 
 {% if other %}
-	<div class="other">
-				<div class="header_other">
-						<h3 class="voir_aussi">Voir aussi</h3>
-				</div>
-				<div class="other-posts row">
-						{% for item in other %}						
-							{% include 'components/thumbnails/thumbnails.twig' with { name : 'other'} %}
-						{% endfor %}
-				</div>
+	<section class="other">
+		
+		<div class="header_other">
+			<h3 class="voir_aussi">Voir aussi</h3>
+		</div>
+
+		<div class="other-posts row">
+			{% for item in other %}						
+				{% include 'components/thumbnails/thumbnails.twig' with { name : 'other'} %}
+			{% endfor %}
 		</div>
+
+	</section>
 	{% endif %}
 
 {% endblock %}