html, body {
   font-family: "Open Sans", sans-serif;
}

.banniere {
   padding-top: 100px;
}

.banniere > div {
   background-color: #37424a;
   color: #fff;
   margin: 0 auto;
   min-height: 120px;
   position: relative;
   text-align: center;
}

.banniere > div:after {
   background: #fff url(../img/icoMaintenance.png) no-repeat center center;
   border-radius: 50%;
   content: '';
   display: block;
   position: absolute;
}

.banniere > div > .bulle {
   background: #fff;
   bottom: 2px;
   border-radius: 8px;
   display: block;
   height: 116px;
   left: 2px;
   position: absolute;
   top: 2px;
   width: 200px;
}

.banniere > div > .bulle:after {
   content: '';
   display: block;
   height: 0;
   position: absolute;
   width: 0;
}

.banniere > div > .bulle img {
   margin-top: 40px;
   width: 180px;
}

.banniere > div > .fr,
.banniere > div > .en {
   min-height: 50px;
   padding: 5px 0;
}

.banniere h2 {
   font-size: 1.5em;
   font-weight: 800;
   margin-bottom: 0;
}

.banniere p {
   font-size: 13px;
   margin-bottom: 0;
}

@media only screen and (min-width: 940px) {
   .banniere > div {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      max-height: 120px;
      padding-left: 225px;
      padding-right: 60px;
      width: 400px;
   }

   .banniere > div:after {
      border: 2px solid #37424a;
      border-radius: 50%;
      height: 116px;
      right: -60px;
      top: 0;
      width: 116px;
   }

   .banniere > div > .bulle:after {
      border-color: transparent transparent transparent #ffffff;
      border-style: solid;
      border-width: 9px 0 9px 15px;
      right: -14px;
      top: calc(50% - 9px);
   }
}

@media only screen and (max-width: 939px) {
   .banniere > div {
      border-radius: 0 10px 30px 10px;
      font-size: 12px;
      padding-top: 60px;
      padding-bottom: 60px;
      width: 400px;
   }

   .banniere > div:after {
      background-size: 50px;
      border-radius: 50%;
      bottom: 2px;
      content: '';
      display: block;
      height: 60px;
      position: absolute;
      right: 2px;
      width: 60px;
   }

   .banniere > div > .bulle {
      border: 2px solid #37424a;
      border-radius: 8px;
      display: block;
      height: 80px;
      left: -50px;
      position: absolute;
      top: -40px;
      width: 200px;
   }

   .banniere > div > .bulle:after {
      border-color: #ffffff transparent transparent transparent;
      border-style: solid;
      border-width: 15px 9px 0 9px;
      right: 35px;
      bottom: -14px;
   }

   .banniere > div > .bulle img {
      margin-top: 22px;
   }
}

@media only screen and (max-width: 499px) {
   .banniere > div {
      width: 280px;
   }

   .banniere > div > .bulle {
      left: -15px;
   }

   .banniere > div p {
      padding: 0 5px;
   }
}