@font-face {
    font-family: "BrownFtv";
    src: url("../font/BrownFtv-Bold.ttf") format("truetype");
    font-weight: bold;
  }
  
  @font-face {
    font-family: "BrownFtv";
    src: url("../font/BrownFtv-Light.ttf") format("truetype");
    font-weight: 300;
  }
  
  @font-face {
    font-family: "BrownFtv";
    src: url("../font/BrownFtv-Regular.ttf") format("truetype");
    font-weight: normal;
  }


* {
    box-sizing: border-box;
  }

body {
    margin:0;
    padding:0;
    background-color:#e0e5e9; 
    font-family: 'Lato', sans-serif;
    height:100vh;
}

.postscriptum {
    color:black;
    font-size: 14px;
    font-style: italic;
}
  .header {
      background-color: #003F69;
      height: 70px;
      line-height:70px;
      color: #fff;
      font-family: "poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 32px;
      text-align: center;
  }
.sub-header {
    width: 100%;
    height:20px;
    left: 0;
    bottom: 0;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.container {
    width: 100%;
    display: flex;
    text-align: center;
    flex-direction: row;
    justify-items: center;
    margin-top:40px;
}

.flexbox-left {
    display: flex;
    flex:50%;
    align-items: start;
    justify-content: right;
    padding-right:20px;
    text-align: left;
}

.flexbox-right {
    display: flex;
    flex:50%;
    align-items: start;
    justify-content: left;
    text-align: left;
}

canvas {
    width:600px;
    height: auto;
}


.form {
    background-color: white;
    padding:15px 25px;
    border-radius: 10px;
    width: 600px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.form h1 {
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
}


label {
    color:#0060AC;
    font-size: 16px;
}

.form .corps-formulaire {
    display:flex;
    margin-bottom:20px;
    flex-direction: column;
}

.form .corps-formulaire .groupe {
    margin-top:20px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form .corps-formulaire .groupe input {
    margin-top: 5px;
    padding:15px 10px 15px 10px;
    -webkit-padding:15px 10px 15px 10px;
    border: 1px solid #ccc;
    outline-color: #0060AC;
    border-radius: 8px;
    font-size: 20px;
}

.form .corps-formulaire .groupe input::placeholder {
    color:rgb(179, 178, 187);
}

.form .corps-formulaire .groupe select {
    margin-top: 5px;
    padding:15px 10px 15px 10px;
    -webkit-padding:15px 10px 15px 10px;
    border: 1px solid #ccc;
    outline-color: #0060AC;
    border-radius: 8px;
    font-size: 20px;
    background-color: white !important; /* Force un fond blanc */
}


.form .pied-formulaire {
    display: flex;
}

/* bloc vigilance météo aujourd'hui et demain */


.form .date-formulaire {
    display: flex;
}


.form .date-formulaire .gauche {
    width:100%;
    text-align: center;
}

.form .date-formulaire .gauche button {
    margin-top:10px;
    color:white;
    font-size: 20px;
    border:none;
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    width:98%;
    cursor: pointer; 
}


/*  pied de formulaire    */


.form .pied-formulaire .gauche {
    width:100%;
    text-align: center;
}

.form .pied-formulaire .gauche button {
    margin-top:15px;
    color:white;
    font-size: 20px;
    border:none;
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    width:98%;
    cursor: pointer; 
}


/* message d'erreur */

.erreur {
    padding:3px;
    color:red;
    font-size: 16px;
    height:15px;
}

/*   couleur des boutons  */


  .bouton-vert {
    background-color: #4CAF50; /* Green */    
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.bouton-rouge {
    background-color: #f10914; /* rouge */
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.bouton-bleu {
    background-color: #0060AC; /* bleu */ 
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.bouton-gris {
    background-color: #b5babe; /* gris */ 
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.bouton-vert:hover {
    background-color: #3e8e41;
}

.bouton-rouge:hover {
    background-color: #ca102f;
}
.bouton-bleu:hover {
    background-color: #0060ac;
}

.green {
    background-color: #218838;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
  
.gray {
    background-color: #cfcaca;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
  


@media screen and (max-width: 1721px) {

    .form {
        margin-top:20px;
    }

    .container {
        flex-direction: column;
    }

    .flexbox-left {
        justify-content: center;
        padding-right: 0;
    }
    
   
    .flexbox-right {
        justify-content: center;
        padding-left:0;
    }

 
    .navbar {
        display:none;
    }
  }


@media screen and (max-width: 564px) {

    .header {
        font-size: 22px;
    }

    .container {
        margin-top:15px;
    }
    canvas {
        display: block;
        width: 95%;  
        max-width: 95%; 
        height: auto; 
        margin: 0 auto; 
    }

    .form {
        margin-left:10px;
        margin-right:10px;
    }

    .form .corps-formulaire .groupe {
        padding-left:5px;
        padding-right: 5px;
        justify-content: center;
    }

    .form .corps-formulaire .groupe select {
        width:100%; 
        height:55px;
        line-height: 55px;
        padding:0px 0px 0px 10px;
        -webkit-padding:0px 0px 0px 10px;
    }
    
    .form .date-formulaire .gauche button {
        margin-top:5px;
    }

    .form .pied-formulaire .gauche button {
        margin-top:5px;
    }

    .form .date-formulaire {
        display: flex;
        flex-direction: column;
    }


    
    .form .pied-formulaire {
        display: flex;
        flex-direction: column;
    }


  }