nav{
    position: fixed;
    bottom: 0;
    text-align: center;
    background-color: #00a8a9;
    width: 100%;
    z-index: 30;
}
nav ul{
    list-style: none;
    margin: 10px auto;
    max-width: 700px;
    padding: 0;
}
nav li{
    display:inline-block;
    text-align: center;
    width: 30%;
}
nav li img{
    height: 32px;
    width:auto;
}
.form-control[readonly] { background-color: transparent;}

.msg_alert{ border: 1px solid red; padding: 12px; font-weight: bold; color: red; margin-bottom: 1rem;}
.msg_sys{ border: 1px solid green; padding: 12px; font-weight: bold; color: green;}

.contenu{padding: 0 20px; max-width: 1000px; margin: 0 auto; background-color: rgb(255,255,255,1); border-radius: 6px;}

#site{
    background: url("../img/header_fond-seul_ok_03.jpg") top center no-repeat;
    background-size: 110% auto;
    color:#000;
    min-height: 100vh;
}
#site header{
    max-width: 800px;
    width:100%;
    margin: 0 auto;
}
#site header img{
    max-width: 80%;
    padding:2.2rem 0 1.7rem;
    margin: 0 auto;
    display: block;
}

h1{ color: #00a8a9; margin-top:0; padding-top: 4rem;}

#tfrm{
    display: none;
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    background-color:#FFF;
    color: #FFF;
    line-height: normal;
    border: 1px solid #BBB;
    width: 98%;
}

@media (min-width: 576px) {
    #tfrm {
        width: auto;
    }
}
#tfrm{ background-color: #FFF;}
#tfrm img{ max-width: 96%; max-height: 98vh; margin: 0 auto;}

.rond{width: 18px; height: 18px; border-radius: 50%; font-size: 8px; margin-top: 2px;  float: left}
.rond_v{  background-color: #00ce35}
.rond_o{  background-color: #ff9000}
.rond_r{ background-color: #eb0028}