/* -- Needed CSS -- */
/* -- Needed CSS -- */
 .modal-wrapper {
   display: none;
   transition: all 0.3s ease-in-out;
   background-color: transparent;
}
 .modal-wrapper.is-open {
   display: block;
   position: fixed;
   z-index: 1000;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   overflow-y: scroll;
}
 .modal-body {
   animation: pop 0.5s ease;
   width: 80%;
}


 @keyframes pop {
   0% {
     opacity: 0;
     transform: scale(0.8);
  }
   90% {
     transform: scale(1.02);
  }
   100% {
     opacity: 1;
     transform: scale(1);
  }
}
/* -- CSS from here on is not needed -- */

 [data-modal-trigger]:hover:before {
   width: 100%;
}
 .modal-body {
   margin: 40px auto;
   background-color: white;
   box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.35);
}
.contenu{
  margin-top: 40px;
  height: 300px!important;
}
.modatTitre{
  text-transform: uppercase;
  text-align: center!important;
}