html, body {
   color: #37424a;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   height: 100%;
   background: none;
   border: 0;
   margin: 0;
   padding: 0;
   background-color: #f0f0f0;
   box-sizing: border-box;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

.contenantBanniere {
   flex-shrink: 0;
   background-color: #0073cf;
   height: 60px;
   line-height: 60px;
}

.contenantCorps {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   height: 0;
}

.contenantPied {
   flex-shrink: 0;
   height: 90px;
   background-color: #37424a;
   color: #fff;
}

.contenu {
   width: 940px;
   margin: 0 auto;
}

.message {
   flex: 1;
   background-color: #fff;
   margin-top: 15px;
   margin-bottom: 15px;
   padding-bottom: 150px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow-y: auto;
   box-sizing: border-box;
}

.message img {
   max-width: 76px;
}

.message p {
   margin: 5px;
   text-align: center;
}

.message h2 {
   margin: 8px 0 8px 0;
}

a {
   color: #fff;
   text-decoration: none;
}

#changementLangue {
   border: 1px solid #fff;
   border-radius: 15px;
   color: #fff;
   display: inline-block;
   font-size: 0.8em;
   height: 24px;
   line-height: 24px;
   outline: none;
   padding: 2px;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   width: 24px;
   float: right;
   margin: 15px 15px;
}

#changementLangue:hover {
   background-color: #47a8f9;
   border-color: #47a8f9;
}

#politiqueConfidentialite:hover {
   text-decoration: underline;
}

.signature {
   text-align: right;
   padding-top: 20px;
   margin-right: 1px;
   margin-bottom: 15px;
}

.signature img {
   height: 30px;
   padding-right: 10px;
}

.groupeLogo {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   gap: 6px;
   font-size: 12.8px;
}

.copyright {
   font-size: 11.52px;
   padding-left: 5px;
   margin-bottom: 0;
}

.logoMozaik {
   background: left center no-repeat;
   background-size: contain;
   display: inline-block;
   height: 40px;
   margin-left: 1px;
   vertical-align: middle;
   width: 200px;
}

/* = Tablette - Portrait */
@media only screen and (min-width: 600px) and (max-width: 939px), only screen and (max-width : 1024px) and (orientation : portrait) {
   .contenu {
      width: 600px;
   }
}
/* = Mobile - Paysage */
@media only screen and (min-width:500px) and (max-width: 599px), only screen and (max-width : 767px) and (orientation : landscape) {
   .contenu {
      width: 500px;
   }
}
/* = Mobile - Portrait */
@media only screen and (max-width: 599px), only screen and (max-width : 480px) and (orientation : portrait) {
   html, body {
      min-width: 320px;
   }

   .contenu {
      width: 310px;
   }
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
   .message {
      padding-bottom: 0;
   }
}

@media only screen and (max-height: 400px) and (orientation: landscape) {
   .message img {
      max-width: 50px
   }
}