From 3aab5bcbcaca8017204780009faba8c1b2bd144e Mon Sep 17 00:00:00 2001
From: chloe <chloe_listrat@figureslibres.io>
Date: Fri, 19 Jun 2020 18:00:40 +0200
Subject: [PATCH] =?UTF-8?q?iport=20typo=20=C3=A0=20v=C3=A9rifier,=20config?=
 =?UTF-8?q?=20exportee,=20reglage=20forme=20event,=20apparition=20event=20?=
 =?UTF-8?q?en=20bas,=20css=20page=20accueil,=20thumbnails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/themes/la_mine/asset/dist/style.css   | 235 ++++++++++++++----
 web/app/themes/la_mine/templates/accueil.twig |  24 +-
 web/app/themes/la_mine/templates/agenda.twig  |   8 +-
 .../themes/la_mine/templates/association.twig |   2 +-
 .../buttons/bouton_ensavoir.html.twig         |   3 +-
 .../components/thumbnails/thumbnails.twig     |  12 +-
 web/app/themes/la_mine/templates/footer.twig  |  14 +-
 .../themes/la_mine/templates/les_projets.twig |   6 +-
 .../la_mine/templates/les_temps_forts.twig    |  20 +-
 .../templates/partial/section_asso.twig       |  10 +-
 .../templates/partial/section_projets.twig    |  14 +-
 .../templates/partial/section_tpsF.twig       |  21 +-
 .../la_mine/templates/privatiser_lespace.twig |   4 +-
 web/app/themes/la_mine/templates/single.twig  |  79 +++---
 14 files changed, 323 insertions(+), 129 deletions(-)

diff --git a/web/app/themes/la_mine/asset/dist/style.css b/web/app/themes/la_mine/asset/dist/style.css
index af6a9889..fa8139cc 100644
--- a/web/app/themes/la_mine/asset/dist/style.css
+++ b/web/app/themes/la_mine/asset/dist/style.css
@@ -1,9 +1,20 @@
+@font-face {
+  font-family: Universalis ADF Std, sans-serif;
+  src:  url('../fonts/UniversalisADFStd.otf') format('otf'),
+        url('../fonts/UniversalisADFStd.woff') format('woff');
+  font-family: Millimetre, sans-serif;
+  src:  url('../fonts/Millimetre.otf') format('OpenType'),
+        url('../fonts/Millimetre.otf') format('otf'),
+        url('../fonts/Millimetre.woff') format('woff');
+}
+
 body {
   width: 300px;
   margin: 0 auto;
-  font-size: 1.2rem;
+  font-size: 16px;
   font-family: Universalis ADF Std, sans-serif;
 }
+
 h1, h2, h3, h5{
   font-family: Millimetre, sans-serif;
 }
@@ -25,18 +36,21 @@ a, a:hover{
   color: black;
   text-decoration: none;
 }
-
+section{
+  position: relative;
+}
 .titre_page, .titre {
+  position: absolute;
+  top: -100px;
+  left: -70px;
   text-transform: uppercase;
   font-weight: bold;
   text-align: center;
   align-items: center;
   border: 8px solid blue;
   transform: rotate(-10deg);
-  padding: 1%;
-  width: 30%;
+  padding: 0.5rem;
   background-color: white;
-  margin: 4% 0 8% -20%;
 }
 
 .titre_1{
@@ -47,12 +61,12 @@ a, a:hover{
   font-style: italic;
   text-transform: uppercase;
 }
-.sidebar_left .title, .__organisation .title {
+.title, .cat {
   color: blue;
   text-align: center;
   text-transform: uppercase;
 }
-.sidebar_left .__content, .sider_left_form, .__organisation .__item {
+.sidebar_left .__content, .sider_left_form, .__organisation .__item, .content_zone {
   border: 8px solid blue;
   padding: 1em;
 }
@@ -65,39 +79,155 @@ a, a:hover{
 }
 
 /*sections page accueil*/
+.item {
+  margin-top: 50px;
+}
+
+.wrap__content_proch {
+  position: relative;
+  width: 80%;
+  padding: 10px;
+  margin: -50px auto -20px auto;
+  align-items: center;
+  text-align: center;
+  background-color: white;
+  border: 4px solid black;
+}
+
+.colonne_section{
+  margin-top: 4%;
+}
 .colonne_section .wrap_content {
   border: 8px solid blue;
   padding: 1em;
 }
-.colonne_section h3{
+.colonne_section h3 {
   color: blue;
   text-transform: uppercase;
   text-align: center;
+}
+.image_sectionasso {
+  position: absolute;
+  width: 500px;
+}
+.content_asso {
+  position: relative;
+  margin: 150px auto auto 200px;
+  padding: 10px;
+  background-color: white;
+  border: 8px solid yellow;
 
 }
+
+.projet .colonne_section .header{
+  height: 80px;
+  display: flex;
+  align-items: flex-end ;
+}
+.projet .colonne_section .header h3{
+  text-align: center;
+  width: 100%;
+}
+
+.item .__img{
+  width: 100%;
+  height: 300px;
+}
+
+.item img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+._content_tpsF {
+  position: relative;
+  width: 80%;
+  padding: 10px;
+  margin: -50px auto -20px auto;
+  align-items: center;
+  text-align: center;
+  background-color: white;
+  border: 4px solid black;
+}
+
 .video iframe {
-  width: 100vh;
-  margin-left: auto;
-  margin-right: auto;
-  height: auto;
+  margin: 40px auto 0 auto;
+  width:100%;
+
 }
 /*fin sections page accueil*/
 
 /*page évent*/
+.titre_event {
+  position: absolute;
+  top: -450px;
+  left: 18vw;
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: center;
+  align-items: center;
+  border: 8px solid blue;
+  transform: rotate(-10deg);
+  padding: 0.5rem;
+  background-color: white;
+}
+.voir_aussi {
+  position: absolute;
+  top: 1300px;
+  left: -50px;
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: center;
+  align-items: center;
+  border: 8px solid blue;
+  transform: rotate(-10deg);
+  padding: 0.5rem;
+  background-color: white;
+}
+.__img_event {
+  position: relative;
+  width: 100%;
+  height: 500px;
+  top: 50px;
+}
+.__img_event img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .partager img {
   width: 50px;
   height: auto;
   margin-right: 2%;
 }
-.post-type img {
-  object-fit: cover;
-  width: 100%;
+.data {
+  border: 8px solid blue;
+  padding: 1em;
+}
+.tarif h3, .partager h3, .inscription h3{
+  color: blue;
 }
 .tarif, .partager, .inscription {
-  margin-top: 4%;
+  margin-top: 8%;
 }
 /*fin page event*/
 
+/*page les projets*/
+.projet img {
+  margin: 5% 0 5% 0;
+}
+._pjt{
+  margin-top: 8%
+}
+.cat-list{
+align-items: baseline;
+}
+.cat_name{
+  margin: 0 4% 0 4%;
+}
+
+/*fin page les projets*/
+
 /*privatiser l'espace*/
 .legendes{
   background-color: white;
@@ -109,66 +239,84 @@ a, a:hover{
   padding-top: 2%;
 }
 .__organisation {
-  margin-top: 8%;
+  margin-top: 4%;
   text-align: center;
 }
+._orga {
+  margin-top: 4%;
+}
+
 /*fin privatiser l'espace*/
 
 /*BOUTONS*/
-.__bouttons{
-  text-align : center;
-}
-.telechargement_plaquette {
-  margin-top: 4%;
-  border: 4px solid black;
-  border-radius: 0%;
-  padding: 1%;
-}
 .__bouttons div {
-  margin-top: 4%;
+  position: relative;
+  text-align : center;
+  margin-top: 20px;
   border: 4px solid blue;
   border-radius: 0%;
-  padding: 1%;
-  background-color: white;
+  padding: 5px;
+  /*background-color: white;*/
 }
-
-.__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover {
+.tout_voir a {
+/*penser à mettre le lien sur toute la surface du bouton*/
+}
+.telechargement_plaquette, .redirection_page, .tout_voir {
+  position: relative;
+  margin: 50px auto 10px auto;
+  display:flex;
+  border: 4px solid black;
+  border-radius: 0%;
+  text-align: center;
+  padding: 5px;
+}
+.__bouttons #bouton_asso {
+  position: relative;
+  top: 100px;
+}
+.__bouttons #bouton_contact {
+  position: relative;
+  top: -30px;
+}
+.__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover, .redirection_page:hover, .tout_voir:hover {
   text-decoration-color: white;
   transform: rotate(-10deg);
 }
-.redirection_page {
+.group_link {
+  margin-top: 2%;
+  width: 100%;
   color: black;
   text-decoration: underline;
   border: none;
   border-radius: 0%;
 }
-.redirection_page:hover {
+.group_link:hover, .cat_name:hover {
   color: black;
   background-color: grey;
   text-decoration: underline;
   border: none;
   border-radius: 0%;
 }
-/*  .tout_voir, .tout_voir:hover {
-    margin-left: auto;
-    margin-right: auto;
-    width: 20%;
-}*/
+.hero .slide .flickity-button{
 
+}
 /*FIN BOUTON*/
 footer{
-  background-color: rgba(255, 0, 0, 0.5);
+  background-color: rgba(240, 240, 240, 240);
   width: 100%;
   padding: 5%;
-  margin: 10% auto 0 auto;
+  margin-top: 10%;
 }
 footer div{
-  margin-right: 1%;
+  margin-right: 20px;
 }
 footer img {
   width: 50px;
   height: auto;
 }
+._rs{
+  margin-left: 5%;
+}
 
 /* START KEVIN */
   header{
@@ -213,8 +361,11 @@ footer img {
 
   .wrapper  section{
     margin: 150px 0;
+    padding: 100px 0;
+  }
+  .wrapper section > div {
+    position: relative;
   }
-
   .tpsF .img{
     width: 100%;
     height: 400px;
diff --git a/web/app/themes/la_mine/templates/accueil.twig b/web/app/themes/la_mine/templates/accueil.twig
index 419cb2f4..414c50ca 100644
--- a/web/app/themes/la_mine/templates/accueil.twig
+++ b/web/app/themes/la_mine/templates/accueil.twig
@@ -2,16 +2,22 @@
 
 {% block content %}
 <section>
-	<h3 class="titre">Prochainement</h3>
-	<div class="coming_soon row align-items-start">
-		{% for item in posts %}
-			{% include 'components/thumbnails/thumbnails.twig' %}
-		{% endfor %}
-
-		<div class="btn redirection_page">
-			<a class="tout_voir" href="{{agenda.url}}">Tout voir</a>
+	<div class="">
+		<div class="header">
+			<h3 class="titre">Prochainement</h3>
 		</div>
+		<div class="__body">
+			<div class="coming_soon row align-items-start">
 
+			{% for item in posts %}
+				{% include 'components/thumbnails/thumbnails.twig' %}
+			{% endfor %}
+
+			<div class="btn tout_voir">
+				<a href="{{agenda.url}}">Tout voir</a>
+			</div>
+		</div>
+		</div>
 	</div>
 </section>
 
@@ -36,7 +42,7 @@
 <section id="section_MineVideo">
 	<div class="video">
 		<div class="__header">
-			<h1 class="titre">La Mine en vidéo</h1>
+			<h3 class="titre">La Mine en vidéo</h3>
 		</div>
 		<div class="__body">
 			<div class="wrapper__content">
diff --git a/web/app/themes/la_mine/templates/agenda.twig b/web/app/themes/la_mine/templates/agenda.twig
index 5f284a4a..362ab132 100644
--- a/web/app/themes/la_mine/templates/agenda.twig
+++ b/web/app/themes/la_mine/templates/agenda.twig
@@ -4,11 +4,11 @@
 	<section>
 		<ul class="cat-list d-flex flex-wrap">
 		  {% for cat in terms %}
-		    <a data-filter=".{{cat.slug}}" href="#">
-		      <li>{{cat.name}}</li>
-		    </a>
+			<p>|<a data-filter=".{{cat.slug}}" href="#">
+		      <li class="cat_name">{{cat.name}}</li>
+		    </a></p>
 		  {% endfor %}
-		</ul>
+		|</ul>
 
 		<div class="row align-items-start">
 			{% for item in posts %}
diff --git a/web/app/themes/la_mine/templates/association.twig b/web/app/themes/la_mine/templates/association.twig
index 87d87de2..ea817ee8 100644
--- a/web/app/themes/la_mine/templates/association.twig
+++ b/web/app/themes/la_mine/templates/association.twig
@@ -32,7 +32,7 @@
 
 				<div class="tableau_engagements row align-items-start">
 					{% for item in post.meta('type_engagement') %}
-						<div class="engagement">
+						<div class="engagement col-sm"> <!--semble pas marcher (à cause de massonery ?)-->
 							<div class="__head">
 								<h4>{{item.titre_engagement}}</h4>
 							</div>
diff --git a/web/app/themes/la_mine/templates/components/buttons/bouton_ensavoir.html.twig b/web/app/themes/la_mine/templates/components/buttons/bouton_ensavoir.html.twig
index b824afa7..0046e26a 100644
--- a/web/app/themes/la_mine/templates/components/buttons/bouton_ensavoir.html.twig
+++ b/web/app/themes/la_mine/templates/components/buttons/bouton_ensavoir.html.twig
@@ -1,3 +1,4 @@
 <div id="bouton_en_savoir">
-  <a href="{{post.meta('bouton_en_savoir').lien_bouton_en_savoir}}">{{post.meta('bouton_en_savoir').texte_bouton_en_savoir}}</a>
+  <a href="{{post.meta('bouton_en_savoir').lien_bouton_en_savoir}}">
+  {{post.meta('bouton_en_savoir').texte_bouton_en_savoir}}</a>
 </div>
diff --git a/web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig b/web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig
index b8dbd29f..1166b1fe 100644
--- a/web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig
+++ b/web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig
@@ -12,8 +12,8 @@
       </div>
     </div>
 
-    <div class="wrap__content">
-      <div class="__title"><h2>{{item.titre}}</h2></div>
+    <div class="wrap__content_proch">
+      <div class="__title"><h5>{{item.titre}}</h5></div>
       <div class="__content">
         <div class="__date">
           <div class="__day">
@@ -22,7 +22,7 @@
 
             {% if start == end %}
               <span class="start">
-                Le <time>{{item.debut_event|date("j l Y") }}</time>
+                Le <time>{{item.debut_event|date("j F Y") }}</time>
                 de <time>{{item.debut_event|date("G:i")}}</time>
               </span>
               <span class="end">
@@ -32,12 +32,12 @@
             {% else %}
 
               <span class="start">
-                Du <time>{{item.debut_event|date("j l Y") }}</time>
+                Du <time>{{item.debut_event|date("j F Y") }}</time>
                 à <time>{{item.debut_event|date("G:i")}}</time>
               </span>
               <span class="end">
-                Au <time>{{item.fin_event|date("j l Y") }}</time>
-                à <time>{{item.fin_event|date("G:i")}}</time>
+                <br>Au <time>{{item.fin_event|date("j F Y") }}</time>
+                à <time>{{item.fin_event|date("G:i")}}</time></br>
               </span>
 
             {% endif %}
diff --git a/web/app/themes/la_mine/templates/footer.twig b/web/app/themes/la_mine/templates/footer.twig
index 4e9244b9..b9e2d3c3 100644
--- a/web/app/themes/la_mine/templates/footer.twig
+++ b/web/app/themes/la_mine/templates/footer.twig
@@ -17,14 +17,18 @@
   <div class="collecte">
     {{options.texte_collecte }}
   </div>
-  <div class="reseaux_sociaux">
+  <div class="reseaux_sociaux align-items">
     <div class="facebook d-flex">
-      <a href="{{options.facebook.lien_facebook}}"><img src="{{ Image(options.facebook.logo_facebook).src }}" /></a>
-      <p>{{options.facebook.texte_facebook}}</p>
+      <a href="{{options.facebook.lien_facebook}}">
+        <img src="{{ Image(options.facebook.logo_facebook).src }}" />
+      </a>
+      <p class="_rs">{{options.facebook.texte_facebook}}</p>
     </div>
     <div class="insta d-flex">
-      <a href="{{options.instagram.lien_instagram}}"><img src="{{ Image(options.instagram.logo_instagram).src }}" /></a>
-      <p>{{options.instagram.texte_instagram}}</p>
+      <a href="{{options.instagram.lien_instagram}}">
+        <img src="{{ Image(options.instagram.logo_instagram).src }}" />
+      </a>
+      <p class="_rs">{{options.instagram.texte_instagram}}</p>
     </div>
   </div>
 </div>
diff --git a/web/app/themes/la_mine/templates/les_projets.twig b/web/app/themes/la_mine/templates/les_projets.twig
index fa0ee5a3..ecf4ec9a 100644
--- a/web/app/themes/la_mine/templates/les_projets.twig
+++ b/web/app/themes/la_mine/templates/les_projets.twig
@@ -9,18 +9,18 @@
 				<div class="title">
 					<h3>{{item.title}}</h3>
 				</div>
-				<div class="content">
+				<div class="content_zone">
 					{{item.text}}
 				</div>
 			</div>
 			<div class="projet row">
 				{% for projet in item.meta("projets") %}
-					<div class="wrap_content col-4">
+					<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">
+							<div class="title _pjt">
 								{{projet.titre}}
 							</div>
 
diff --git a/web/app/themes/la_mine/templates/les_temps_forts.twig b/web/app/themes/la_mine/templates/les_temps_forts.twig
index ccd78201..cdfbfbb7 100644
--- a/web/app/themes/la_mine/templates/les_temps_forts.twig
+++ b/web/app/themes/la_mine/templates/les_temps_forts.twig
@@ -9,8 +9,8 @@
 			<div class="title">
 				<h3>{{item.title}}</h3>
 				<div class="next_edition">
-					<p>Prochaine Édition</p>
-					<time>{{item.next_edition}}</time>
+					<p>Prochaine Édition : <time>{{item.next_edition|date("F Y") }}</time>
+					</p>
 				</div>
 			</div>
 			<div class="content">
@@ -20,12 +20,16 @@
 		<div class="wrap_content col-md-8">
 			<div class="slide">
 		    {% for media in item.meta('slide') %}
-				<div class="img">
-					<img src="{{ Image(media.image).src }}" alt="{{ Image(media.image).title }}">
-				</div>
-				<div class="video">
-					<iframe width="560" height="315" src="//www.youtube.com/embed/{{ media.video }}" frameborder="0" allowfullscreen></iframe>
-				</div>
+					{% if Image(media.image).src %}
+						<div class="img">
+							<img src="{{ Image(media.image).src }}" alt="{{ Image(media.image).title }}">
+						</div>
+					{% endif %}
+					{% if media.video %}
+						<div class="video">
+							<iframe width="560" height="315" src="//www.youtube.com/embed/{{ media.video }}" frameborder="0" allowfullscreen></iframe>
+						</div>
+					{% endif %}
 				{% endfor %}
 			</div>
 		</div>
diff --git a/web/app/themes/la_mine/templates/partial/section_asso.twig b/web/app/themes/la_mine/templates/partial/section_asso.twig
index ceac67fd..0bdf4812 100644
--- a/web/app/themes/la_mine/templates/partial/section_asso.twig
+++ b/web/app/themes/la_mine/templates/partial/section_asso.twig
@@ -7,15 +7,15 @@
 	<div class="image_sectionasso">
 		<img src="{{ Image(post.meta('image')).src }}" />
 	</div>
-	<div class="content row">
-	<div class="col-6">
+	<div class="content_asso row">
+	<div class="col-md-6">
 		{{ post.meta('paragraphe_descriptif') }}
 	</div>
-	<div class="col-6">
+	<div class="col-md-6">
 		{{ post.meta('paragraphe_descriptif_2') }}
-		<div class="btn redirection_page">
+	</div>
+	<div class="btn redirection_page">
 		{% include 'components/buttons/bouton_ensavoir.html.twig' %}
-		</div>
 	</div>
 	</div>
 </div>
diff --git a/web/app/themes/la_mine/templates/partial/section_projets.twig b/web/app/themes/la_mine/templates/partial/section_projets.twig
index 3d1b56db..c2a2629a 100644
--- a/web/app/themes/la_mine/templates/partial/section_projets.twig
+++ b/web/app/themes/la_mine/templates/partial/section_projets.twig
@@ -10,25 +10,25 @@
 				<div class="header">
 					<h3>{{item.title}}</h3>
 				</div>
-				<div class="wrap_content">
+				<div class="wrap_content d-flex flex-wrap">
 				{{item.text}}
 					<div class="projet">
 						{% for projet in item.meta("projets") %}
-							<div class="wrap__content">
-									<div class="title">
+							<!--<div class="wrap__content">
+									<div class="title_pjt">
 										<h4>{{projet.titre}}</h4>
 									</div>
-									<div class="content">
+									<div class="content_pjt">
 										{{projet.text}}
 									</div>
-							</div>
+							</div>--> <!--les titres a utilisé pour faire les patch qui se drag-->
 						{% endfor %}
 					</div>
 				</div>
 			</div>
 		{% endfor %}
-		<div class="btn redirection_page">
-			<a class="tout_voir" href="{{les-projets.twig.url }}">Tout voir</a>
+		<div class="btn tout_voir">
+			<a href="/les-projets">Tout voir</a>
 		</div>
 	</div>
 </div>
diff --git a/web/app/themes/la_mine/templates/partial/section_tpsF.twig b/web/app/themes/la_mine/templates/partial/section_tpsF.twig
index c4b65c47..ad2f8d6e 100644
--- a/web/app/themes/la_mine/templates/partial/section_tpsF.twig
+++ b/web/app/themes/la_mine/templates/partial/section_tpsF.twig
@@ -5,25 +5,30 @@
 	<div class="wrapper__content row">
 		{% for item in tpsF %}
 		<div class="colonne_section col-md-6 col-lg-4">
-				<div class="images">
-					<img src="{{item.thumbnail.src}}" alt="{{item.thumbnail.title}}">
-				</div>
-				<div class="wrap_content">
+			<div class="item">
+				<div class="__img">
+	        <img src="{{item.thumbnail.src}}" alt="{{item.thumbnail.title}}">
+	      </div>
+				<div class="_content_tpsF">
 					<div class="title">
 						<h3>{{item.title}}</h3>
 						<div class="next_edition">
-							<p>Prochaine Édition</p>
-							<time>{{item.next_edition}}</time>
+							<p>Prochaine Édition :
+								<br><time>{{item.next_edition|date("F Y") }}</time></br>
+							</p>
 						</div>
 					</div>
 					<div class="content">
 						{{item.text}}
 					</div>
 				</div>
+				</div>
 			</div>
 		{% endfor %}
-		<div class="btn redirection_page">
-			<a id="tout_voir" href="">Tout voir</a>
+
+			<div class="btn tout_voir">
+			<a href="/les-temps-forts">Tout voir</a>
 		</div>
+
 	</div>
 </div>
diff --git a/web/app/themes/la_mine/templates/privatiser_lespace.twig b/web/app/themes/la_mine/templates/privatiser_lespace.twig
index 9aee71b0..8f7def44 100644
--- a/web/app/themes/la_mine/templates/privatiser_lespace.twig
+++ b/web/app/themes/la_mine/templates/privatiser_lespace.twig
@@ -4,7 +4,7 @@
 {% include 'components/title_page.twig'  %}
 
 <section>
-	<div class="wrapper__content prive">
+	<div class="wrapper__content">
 
 		<div class="wrap__content">
 
@@ -40,7 +40,7 @@
 		<div class="wrap__content __organisation">
 			<div class="__body row">
 				{% for item in post.meta('type_organisation') %}
-				<div class="__content col-lg-4">
+				<div class="__content _orga col-lg-4">
 				<div class="title">
 					<h5>{{ item.titre_bloc}}</h5>
 				</div>
diff --git a/web/app/themes/la_mine/templates/single.twig b/web/app/themes/la_mine/templates/single.twig
index 08087921..aa17cdaf 100644
--- a/web/app/themes/la_mine/templates/single.twig
+++ b/web/app/themes/la_mine/templates/single.twig
@@ -2,32 +2,48 @@
 {% block content %}
 	<div class="content-wrapper">
 		<article class="post-type">
-				<img src="{{ Image(post.image_event).src |resize(600, 600) }}" />
-			<section class="article-content">
-				<div class="titre">
-				<h2>{{post.titre}}</h2>
+			<div class="__img_event">
+				<img src="{{ Image(post.image_event).src }}" />
 			</div>
-				<div class="__content">
-		      <div class="__date">
-		        <div class="__day">
-		          <span class="start">
-		            <time><p>du</p>{{post.debut_event}}</time>
-		          </span>
-		          <span class="end">
-		            <time><p>au</p>{{post.fin_event}}</time>
-		          </span>
-            </div>
-		      </div>
-		      <div class="lieu">{{post.lieu}}</div>
+			<section class="article-content">
+				<div class="header">
+					<h3 class="titre_event">{{post.titre}}</h3>
+			</div>
+			<div class="row">
+			<div class="sidebar_left col-md-4 mr-2">
 					<div class="cat {{post.category.slug}}">
-						{{post.category.name}}
+						<h3>{{post.category.name}}</h3>
 					</div>
-		    </div>
-				<div class="article-body">
-					<p>{{post.description}}</p>
+				<div class="data">
+					<div class="__date">
+	          <div class="__day">
+	            {% set start = item.debut_event|date("Ydj") %}
+	            {% set end = item.fin_event|date("Ydj") %}
+	            {% if start == end %}
+	              <span class="start">
+	                Le <time>{{item.debut_event|date("l j F Y") }}</time>
+	                <br>de <time>{{item.debut_event|date("G:i")}}</time>
+	              </span>
+	              <span class="end">
+	                à <time>{{item.fin_event|date("G:i")}}</time></br>
+	              </span>
+	            {% else %}
+	              <span class="start">
+	                Du <time>{{item.debut_event|date("l j F Y") }}</time>
+	                à <time>{{item.debut_event|date("G:i")}}</time>
+	              </span>
+	              <span class="end">
+	                <br>Au <time>{{item.fin_event|date("j l F Y") }}</time></br>
+	                à <time>{{item.fin_event|date("G:i")}}</time>
+	              </span>
+	            {% endif %}
+	          </div>
+	        </div>
+		      <div class="lieu">{{post.lieu}}</div>
 				</div>
-				<div class="inscription">
-						<h2>{{post.titre_inscription}}</h2>
+
+					<div class="inscription">
+						<h3>{{post.titre_inscription}}</h3>
 							{% for Items in post.meta('inscription') %}
 									{% for detail in Items.choose %}
 										{% if detail.acf_fc_layout == 'texte' %}
@@ -40,14 +56,13 @@
 										{% endif %}
 									{% endfor %}
 							{% endfor %}
-						</div>
-
+					</div>
 						<div class="voir_event">
 								<a href="{{post.meta('voir_evenement_facebook').lien_facebook}}">{{post.meta('voir_evenement_facebook').texte}}</a>
 						</div>
 
 						<div class="partager">
-							<h2>{{post.titre_partage}}</h2>
+							<h3>{{post.titre_partage}}</h3>
 							<a href="{{post.meta('liens_reseaux_sociaux').lien_page_facebook}}">
 								<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_facebook).src }}" />
 							</a>
@@ -60,15 +75,23 @@
 						</div>
 
 						<div class="tarif">
-							<h2>{{post.titre_tarif}}</h2>
+							<h3>{{post.titre_tarif}}</h3>
 							<p>{{post.type_tarif}}</p>
 						</div>
+					</div>
+			<div class="wrapper__content col-md-7">
+		     {{ post.meta('description') }}
+			</div>
+		</div>
 			</section>
 		</article>
 	</div>
 
-	<div class="other-posts">
-		{% for item in 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' %}
 		{% endfor %}
 	</div>