/*
 Feuille de styles spécifique à la page "login"
 */

/* Desktop */
@media (pointer: fine), (pointer: none), (orientation: landscape) {
    :root {
        --fontSize:16px;
        --buttonHeight:30px;
        --linkPassLostSize:14px;
    }
    .commonWidth {
        width:370px;
    }
    #frmLogin #inputlang, #inputlogin, #inputpassword {
        margin-top:10px;
        margin-bottom:10px;
    }
}
/* Mobile */
@media (pointer: coarse) and (orientation: portrait) {
    :root {
        --fontSize:40px;
        --buttonHeight:70px;
        --linkPassLostSize:30px;
    }
    .commonWidth { 
        width:80%;
    }
    #frmLogin #inputlang, #inputlogin, #inputpassword {
        margin-top:20px;
        margin-bottom:20px;
    }
}

body {
    background-color:#FFFFFF;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    margin-bottom:100px;
}

#cadreImageLogo {
    margin-top:100px;
    margin-bottom:40px;
    text-align:center;
}

#frmLogin {
    margin:auto;
    text-align:center;
}
#frmLogin fieldset {
    border:2px solid #5b5b5d;
    border-radius:5px;
}
#frmLogin legend {
    font-size:var(--fontSize);
    padding-left:5px;
    padding-right:5px;
}

#frmLogin #inputlang, #inputlogin, #inputpassword {
    box-sizing:border-box;
    border:1px solid #beb991;
    border-radius:10px;
    width:100%;
    outline:none;
    padding:10px;
    font-size:var(--fontSize);
    color:#0000ff;
    background-repeat:no-repeat;
    background-size:20px;
    background-position:3px center;
    padding-left:30px;
}

/* Zones de saisie */
.inputgroup {
    position:relative;
}
.inputgroup input {
    transition:200ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.inputgroup img {
    position:absolute;
    top:20px;
    right:2%;
    cursor:pointer;
}
.label {
    position:absolute;
    top:21px;
    left:35px;
    color:gray;
    pointer-events:none;
    transition:200ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.inputgroup input:is(:focus, :valid)~.label {
    transform:translateX(-15%) translateY(-110%) scale(0.8);
    background-color:white;
    color:#5b5b5b;
    padding-left:5px;
    padding-right:5px;
}

/* Images des contrôles */
#frmLogin #inputlang {
    background-image:url(res/language.png);
}

#frmLogin #inputlogin {
    background-image:url(res/login.png);
}

#frmLogin #inputpassword {
    background-image:url(res/password.png);
}

#labelError {
    text-align:center;
    font-style:italic;
    color:#ff0000;
    margin-top:15px;
    margin-bottom:10px;
}

/* Lien de récupération et bouton de login */
#frmLogin table {
    margin:auto;
    margin-top:10px;
    width:100%;
}
#frmLogin table a {
    font-size:var(--linkPassLostSize);
}
#frmLogin table input[type=submit] {
    border-radius:5px;
    width:100%;
    height:var(--buttonHeight);
    min-width:80px;
    font-size:var(--fontSize);
}