carousel now take the text to choose his height

Yavsc/Views/Home/Index.cshtml

@@ -22,19 +22,21 @@
             i=0;
             foreach (var act in Model) { 
                 string cls = (i==0) ? "item active":"item";
-        <div class="@cls">
-            <img src="@act.Photo" alt="@act.Name" class="img-responsive" />
-            <div class="carousel-caption">
+        <div class="@cls"  style="background-image: url('@act.Photo');  ">
+          <!-- <img src="@act.Photo" alt="@act.Name" class="img-responsive" />  -->
+            <div class="carousel-caption-s" >
                 
                 <p><em>@act.Name</em><br/>
                 @act.Description </p>
-                <p>
+
+                 <p>
                 @foreach (var form in act.Forms) {
                     <a class="btn btn-default" asp-controller="FrontOffice" asp-action="@form.Action" asp-route-id="@act.Code">
                     @form.Title
                     </a>
                 }
-                </p>
+            </p>
+                
             </div>
         </div>
             i++; }
@@ -49,3 +51,7 @@
         <span class="sr-only">Suivant</span>
     </a>
 </div>
+<environment names="Lua,Development">
+<div class="change-embed-petition" data-petition-id="9084164"></div>
+<script src="https://static.change.org/product/embeds/v1/change-embeds.js" type="text/javascript"></script>
+</environment>

Yavsc/wwwroot/css/site.css

@@ -19,7 +19,7 @@ textarea {
  
 /* Carousel */
 
-.carousel-caption p {    
+.carousel-caption-s p {    
     font-family: "jubilat";
     font-weight: 600;
     font-size: large;
@@ -33,6 +33,31 @@ textarea {
     padding:.5em;
     animation: mymove 3s infinite;
 }
+
+.carousel-caption-s {
+  right: 3em;
+  top: 1em;
+  left: 3em;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
+}
+.carousel-caption-s .btn {
+  text-shadow: none;
+}
+.carousel-indicators {
+    position: absolute;
+    z-index: 15;
+    padding-left: 0;
+    text-align: center;
+    list-style: none;
+    top: .2em;
+    bottom: initial;
+}
+
 @-webkit-keyframes mymove {
     from {text-decoration-color: red;}
     50% {text-decoration-color: blue;}
@@ -54,10 +79,6 @@ ul.actiongroup li a:hover {
     color: red;
 }
 
-input, select, textarea {
-    max-width: 100%;
-}
-
 footer {
     vertical-align: bottom;
     padding: 1.5em;
@@ -109,3 +130,7 @@ footer {
     float: left;
     margin: 1em;
 }
+
+
+
+