carrousel

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -205,9 +205,12 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
       // padding-bottom: 3rem;
     }
     p {
-      text-transform: uppercase;
+      // text-transform: uppercase;
       padding-right: 15%;
     }
+    .chapeau{
+      text-transform: uppercase;
+    }
     @media (max-width: 442px) {
       margin-left: 30%;
       h1 {
@@ -242,25 +245,45 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
 }
 
 
-.programmes {
-  // position: relative;
-  // min-height:cover;
-  //
-  // // background-size: contain;
-  // top: -440px;
-  display: flex;
-  flex-wrap: wrap;
+
+// //présentation en mosaique//
+// .programmes {
+//   display: flex;
+//   flex-wrap: wrap;
+//   justify-content: center;
+//   padding-left: 15%;
+//   padding-right: 15%;
+//   padding-top: 8rem;
+//   padding-bottom: 8rem;
+// }
+
+
+///présentation en carroussel////
+.programmes{
   justify-content: center;
-  padding-left: 15%;
-  padding-right: 15%;
+  padding-left: 5%;
+  padding-right: 5%;
   padding-top: 8rem;
-  // padding-bottom: 40rem;
   padding-bottom: 8rem;
+
+  .slick-slider{
+
+  }
+  .slick-list{
+    width: 70%;
+    margin: auto;
+    padding: 0px 150px !important;
+    .slick-slide{
+      width: min-content;
+
+    }
+  }
+  
+
 }
 
+
 .programme {
-  // position: relative;
-  // top: 440px;
   z-index: 1;
   max-width: 35%;
   min-width: 26rem;
@@ -286,23 +309,72 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
 }
 
 
-.programme:hover {
-  background-color: #000;
-  transition:0.2s ease-in-out;
-  p {
-    color: #fff;
-  }
-  h4 {
-    color: #fff;
-  }
-}
+// .programme:hover {
+//   background-color: #000;
+//   transition:0.2s ease-in-out;
+//   p {
+//     color: #fff;
+//   }
+//   h4 {
+//     color: #fff;
+//   }
+// }
 
 
 // #ressources {
 //   position: relative;
 //   top: -440px;
 // }
+/*CSS pour afficher/masquer un texte via un bouton*/
 
+/*Style du module TEXTE*/
+.texte-cache-raisondetre {
+
+  position: relative;
+  max-height: 200px; /*Hauteur du texte visible avant le clic*/
+  overflow: hidden; /*On cache tout ce qui dépasse des 400px*/
+  transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
+  @media (max-width: 1024px) {
+    max-height: 200px;
+  }
+  @media (max-width:442px) {
+    max-height: 200px;
+  }
+
+}
+
+/*Style du module TEXTE lorsqu'il est ouvert*/
+.texte-cache-raisondetre.ouvert {
+    max-height: 300vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
+  }
+
+
+/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
+.texte-cache-raisondetre:not(.ouvert)::after {
+  content: '';
+  position: absolute;
+  top: 400px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
+
+}
+
+.bouton-raisondetre{
+    position: relative;
+    justify-content: center;
+    cursor: pointer;
+    border: solid;
+    border-radius: 0px !important;
+    background-color: transparent;
+    text-transform: uppercase;
+    left: 45%;
+    // margin-top: 3rem;
+    margin-bottom: 2rem !important;
+    @media (max-width: 442px) {left: 0%;}
+
+}
 /*CSS pour afficher/masquer un texte via un bouton*/
 
 /*Style du module TEXTE*/