diff --git a/format.js b/format.js
index ab865fc34f1c11bad8e231f9d0f7a534de428034..047ad7aea60508619ab206b876c59be8b099394a 100644
--- a/format.js
+++ b/format.js
@@ -73,10 +73,35 @@ M.course.format.process_sections = function(Y, sectionlist, response, sectionfro
 };
 
 (function () {
+    $(".description-inner").each(function(index){
+        if(parseInt($( this ).css('height'))<=144){
+            $(this).parent().next().hide();
+        }
+    })
+    //Gère les animations sur les descriptions des sections pour agrandir/rétrecir les infos
     $('.section').find('a[href="#"].voir-plus').on('click', function (e) {
         e.preventDefault();
         this.expand = !this.expand;
         $(this).text(this.expand?"Réduire la description":"Voir la description complète");
-        $(this).closest('.section').find('.small, .big').toggleClass('small big');
+        //$(this).closest('.section').find('.small, .big').toggleClass('small big');
+        //
+     
+        if($(this).prev().hasClass('small')){
+            $(this).prev().toggleClass('small big');
+            var height= $(this).prev().find(".description-inner").css("height");
+            $(this).prev().animate({ "max-height": height }, "slow" );
+
+        } 
+        else if($(this).prev().hasClass('big')){
+
+            $(this).prev().toggleClass('small big');
+            $(this).prev().animate({ "max-height": '144px' }, "slow" );
+        }
+        else{
+            $(this).prev().addClass("big");
+            var height= $(this).prev().find(".description-inner").css("height");
+            $(this).prev().animate({ "max-height": height }, "slow" );
+        }
+        
     });
 }(jQuery));
\ No newline at end of file
diff --git a/styles.css b/styles.css
index bc671b4c599d1f4487b08a40c966a79dc5a699b2..64679250316e7d8c43fe51e09d5d68f589ce14cd 100644
--- a/styles.css
+++ b/styles.css
@@ -55,6 +55,12 @@ ul.iena-editing .voir-plus {
     border-bottom-right-radius: 7px;
 }
 
+
+.voir-plus{
+    margin-left: 3%;
+margin-top: 14px;
+}
+
 .iena-section .instancename {
     font-size: 1rem;
 }
@@ -272,13 +278,28 @@ ul.nav.navbar-nav.ml-auto {
 }
 
 .iena-description {
-	background: #EEE;
+	
 	color: #323232;
 	padding: 1rem;
 	clear: both;
-	margin-bottom: 0.5rem;
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    border-top: 1px solid #dee2e6;
 }
 
+.iena-description i{
+    color:#2a657d;
+    flex-basis: 3%;
+}
+.course-description-item.summarytext{
+    flex-basis: 97%;
+    overflow:hidden;
+    max-height: 144px;
+}
+
+
+
 /* iENA course format header with progression */
 
 
@@ -354,7 +375,7 @@ ul.nav.navbar-nav.ml-auto {
 .iena-course-header > .iena-course-header-bottom {
 	margin-bottom: 40px;
     background: #eaeaea;
-    padding: 15px;
+    padding: 1.5rem;
     border-radius:10px;
 }
 
diff --git a/templates/courseformat/content/section/content.mustache b/templates/courseformat/content/section/content.mustache
index 2df530d73bba2331c54a151ed597bededdef3184..6e1fe9a1d9d230faf4bdeea6b30258b9885d5294 100644
--- a/templates/courseformat/content/section/content.mustache
+++ b/templates/courseformat/content/section/content.mustache
@@ -130,9 +130,18 @@
     {{/iscoursedisplaymultipage}}">
     <div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
     {{#summary}}
-        {{$ core_courseformat/local/content/section/summary }}
-            {{> core_courseformat/local/content/section/summary }}
-        {{/ core_courseformat/local/content/section/summary }}
+        {{#summarytext}}
+        <div class="iena-summary">
+            <div class="iena-description">
+                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                {{$ core_courseformat/local/content/section/summary }}
+                    {{> core_courseformat/local/content/section/summary }}
+                {{/ core_courseformat/local/content/section/summary }}
+                <a href="#" class="voir-plus">Voir la description complète</a>
+            </div>
+     
+        </div>
+        {{/summarytext}}
     {{/summary}}
     {{#availability}}
         {{$ core_courseformat/local/content/section/availability }}