@import url(https://fonts.googleapis.com/css?family=Lato:300);
    .titreModalDetail {
        color: rgb(96, 175, 226);
    }
    .modal {
      width: 800px;/*530px;*/
      height: 500px;/*265px;*/
      perspective: 2000px;
      z-index: 2;
      position: absolute;
      top: calc(41% - 132.5px);
      left: calc(39% - 265px);
      display: none;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .shadow {
      box-shadow: 0 0 30px rgba(50, 49, 79, 0.5);
    }

    .wrapper {
      background: rgba(50, 49, 79, 0.5);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

    .front,
    .back,
    .opened {
      height: 500px;/*265px;*/
      position: absolute;
      box-sizing: border-box;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .front {
      background-image: -webkit-radial-gradient(circle, #ebeee6, #f5f8fd);
      background-image: -moz-radial-gradient(circle, #ebeee6, #f5f8fd);
      background-image: -ms-radial-gradient(circle, #ebeee6, #f5f8fd);
      background-image: radial-gradient(circle, #ebeee6, #f5f8fd);
      width: 500px;/*265px;*/
      text-align: center;
      padding-top: 5px;
      cursor: pointer;
      z-index: 3;
      backface-visibility: hidden;
      transform-origin: 0% 50%;
      box-shadow: 0 0 21px rgba(50, 49, 79, 0.5);
      transform: rotateY(-180deg);
    }

    .back,
    .opened {
      width: 800px;/*530px;*/
      padding: 35px 25px;
      clip: rect(auto, auto, auto, 265px);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .back {
      background: #f2f2f2;
      transform-origin: 50% 50%;
      transform: rotateY(-180deg);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .back .content {
      transform: rotateY(180deg);
    }

    .opened {
      background: #f2f2f2;
    }

    .close {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
      width: 25px;
      height: 25px;
      /*background: url(http://i63.tinypic.com/1671taq.png) no-repeat center;*/
      background-size: cover;
      opacity: 0.6;
    }

    .front-open {
      animation: front 1.1s forwards ease-in-out;
    }

    .back-open {
      animation: back 1.1s forwards ease-in-out;
    }

    .opened-open {
      animation: opened 1.1s forwards ease-in-out;
    }

    .front-close {
      animation: front 1.1s forwards reverse ease-in-out;
    }

    .back-close {
      animation: back 1.1s forwards reverse ease-in-out;
    }

    .opened-close {
      animation: opened 1.1s forwards reverse ease-in-out;
    }

    @keyframes front {
      0% {
        transform: rotateY(0deg);
        left: 132.5px;
      }

      100% {
        transform: rotateY(-180deg);
        left: 265px;
      }
    }

    @keyframes back {
      0% {
        transform: rotateY(0deg);
        left: -132.5px;
        background: #4d4d4d;
      }

      100% {
        transform: rotateY(-180deg);
        left: 0;
        background: #f2f2f2;
      }
    }

    @keyframes opened {
      0% {
        left: -132.5px;
        background: #a6a6a6;
      }

      100% {
        left: 0;
        background: #f2f2f2;
      }
    }