.heure {
    text-align : right ;
 }
 html {
    background-color : #33CCFF ;
    max-width : device-width ;
 }
 @media only screen and (max-width: 1200px) {
   .zone {
     background-color: white ;
    border : 16px solid #E6F9FF ;
    border-radius : 32px/32px ;
    padding-left : 4px ;
    width : device-width ;
    margin-bottom : 10px ;
    max-width : 1200px ;
    height : 100vh ;
    overflow : auto ;
   }
 .actions {
      box-shadow: 0 -5px 5px -5px grey;
      padding-top : 4px ;
 }
 .informations {
        height : 60vh ;
    overflow : auto ; }
 }
 @media only screen and (min-width: 1200px) {
   .zone {
     background-color: white ;
     border : 16px solid #E6F9FF ;
     border-radius : 32px/32px ;
     padding-left : 4px ;
     height : 100vh ;
     width : device-width ;
     margin-bottom : 10px ;
      display : flex ;
 }
   .actions {
       box-shadow: -5px 0 5px -5px grey;
       padding-left : 5px ;
       width : 564px ;
 }
 }
 h2
 {
    font-size :8em ;
 }
 .inputt
 {
    background-color : white ;
 }
 .entité
 {
    font-size :0.5em ;
 }
 input
 {
    width: device-width;
    margin-bottom: 10px;
    height: 64px;
    border-radius : 8px/8px;
    font-size : 2em;
 }
 .messageLien
 {
    background-color : white ;
    border-radius : 10px/10px ;
    padding : 10px ;
    margin-left : 4mm ;
    margin-right : 4mm ;
    padding-left : 16px ;
    height : auto ;
    box-shadow: 0 0 1em grey;
    margin-top : 20px ;
 }
 .info
 {
    font-size : 2em ;
 }
 h4
 {
    font-size : 2em ;
 }
 .Knopf
 {
    display: block;
    margin: auto ;
    border-radius : 8px/8px ;
 }
 .informations
 {
    margin-bottom : 2px ;
    padding-bottom : 8px ;
    overflow: auto ;
 }
 p
 {
    font-size : 2em;
 }
 .message
 {
    background-color : #66FFB2 ;
    border-radius : 10px/10px ;
    padding : 10px ;
    margin-left : 4mm ;
    margin-right : 4mm ;
    padding-left : 16px ;
    height : auto ;
   box-shadow: 0 0 1em grey;
   margin-top : 20px ;
 }
 .progress-bar{
     height: 35px;
     width: 90%;
     margin-left : 5% ;
     border: 2px solid darkblue;
     border-radius : 8px ;
     margin-bottom : 20px ;
 }
 .progress-bar-fill{
     height: 100%;
     width: 0%;
     background: lightblue;
     display: flex;
     align-items: center;
     font-weight: bold;
     transition: width 0.25s;
     border-radius : 6px ;
 }
 .progress-bar-text{
     margin-left: 10px;
     font-weight: bold;
     text-align : center ;
 }
 .boutonConnexion {
     background-color: darkblue;
     width: 200px;
     color: white;
     border : white 2px solid;
     box-shadow: 0 0 1em grey;
 }
 .boutonConnexion:active {
     background-color: lightblue;
        box-shadow: 0 0 0em grey;
 }
 .connexionPage {
     background-color : white;
     border-radius: 10px/10px;
     border : 2px solid darkblue;
     text-align: center;
        box-shadow: 0 0 1em grey;
        padding : 8px;
 }
 .formulaire {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .texteChamp {
     border : 2px solid darkblue;
     padding-left: 4px;
 }