@font-face {
    font-family: 'mdpoublie';
    src: url('./font/mdpoublie.eot?39388766');
    src: url('./font/mdpoublie.eot?39388766#iefix') format('embedded-opentype'),
        url('./font/mdpoublie.woff?39388766') format('woff'),
        url('./font/mdpoublie.ttf?39388766') format('truetype'),
        url('./font/mdpoublie.svg?39388766#mdpoublie') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {
    --colorLight: #fafafa;
    --color: #b6b6b6;
    --colorDark: #5a5a5a;

    --colorPrimaryDark: #0165a8;
  }

img {
    max-width: 100%;
    max-height: 300px;
    display: block;
    margin: auto;
}

.banniere {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.form-container {
    max-width: 400px;
    margin: 2em auto;
    padding: 3em 2em;
    border-radius: 5px;
    background-color: var(--colorLight);
}

h1 {
    font-size: 30px;
    color: var(--colorPrimary);
    text-align: center;
    margin-bottom: 1em ;
}

label{
    text-transform: uppercase;
    color: var(--colorDark);
}


.input-password {
    position: relative;
}

.unmask {
    position: absolute;
    right: 0;
    top: 6px;
    transform: translate(-50%, 0%);
    width: 25px;
    height: 25px;
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-family: "mdpoublie";
    color: var(--colorDark);
}

.unmask:focus {
    outline: none;
}

.unmask:before {
    content: "\E800";
}

.password[type="text"]+.unmask:before {
    display: none;
}

.password[type="text"]+.unmask:after {
    content: "\E801";
}

.form-control-plaintext{
    color: var(--colorPrimary);
}

.btnValidation{
    background-color: var(--colorPrimary);
    color: white;
    width: 100%;
}

.btnValidation:hover{
    background-color: var(--colorPrimaryDark);
}

.was-validated .form-control:valid,
.was-validated .form-control:invalid
{
    background-image: none;
}

.was-validated .form-control:valid,
.was-validated .form-control:valid:focus
{
    border-color: var(--colorPrimary);
}

.was-validated .form-control:valid:focus,
.was-validated .form-control:invalid:focus
{
    box-shadow: none
}

#message{
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

.truc-a-centrer {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 25vw;
    color: darkred;
    transform: translate(-50%, -50%);
}

.truc-a-centrer-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 25vw;
    color: darkgreen;
    transform: translate(-50%, -50%);
}

.bloc-cross{
    margin-left: auto;
    margin-right: auto;
    width:60%;
}