/* ============================
   RESET
============================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:"Segoe UI",sans-serif;

    background:#F4F7FA;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    position:relative;
}

/* ============================
   FOND
============================ */

.background{

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,#dbe8ff 0%,transparent 35%),
        radial-gradient(circle at bottom left,#e8f1ff 0%,transparent 40%),
        #F4F7FA;

    z-index:-1;
}

/* ============================
   CARTE
============================ */

.login-card{

    width:100%;

    max-width:520px;

    background:#FFF;

    border-radius:24px;

    padding:55px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

    text-align:center;

    animation:fade .5s ease;
}

/* ============================
   LOGO
============================ */

.logo{

    width:220px;

    margin-bottom:30px;
}

/* ============================
   TITRES
============================ */

h1{

    font-size:58px;

    color:#1E3A5F;

    letter-spacing:10px;

    margin-bottom:15px;
}

.subtitle{

    color:#667085;

    line-height:28px;

    margin-bottom:40px;

    font-size:18px;
}

/* ============================
   FORMULAIRE
============================ */

.input-group{

    text-align:left;

    margin-bottom:25px;
}

label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#1E3A5F;
}

input{

    width:100%;

    height:60px;

    border:1px solid #D6DCE5;

    border-radius:14px;

    padding:0 20px;

    font-size:20px;

    text-align:center;

    letter-spacing:8px;

    transition:.25s;

    outline:none;
}

input:focus{

    border-color:#1E3A5F;

    box-shadow:

        0 0 0 4px rgba(30,58,95,.12);
}

/* ============================
   BOUTON
============================ */

button{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:#1E3A5F;

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

button:hover{

    background:#284C7A;

    transform:translateY(-2px);

    box-shadow:

        0 10px 25px rgba(30,58,95,.20);
}

/* ============================
   MESSAGE
============================ */

#error{

    margin-top:20px;

    color:#D92D20;

    font-weight:600;

    min-height:20px;
}

/* ============================
   ANIMATION
============================ */

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }

}

/* ============================
   RESPONSIVE
============================ */

@media(max-width:700px){

.login-card{

    width:92%;

    padding:35px;

}

.logo{

    width:170px;

}

h1{

    font-size:42px;

    letter-spacing:6px;
}

.subtitle{

    font-size:16px;

    line-height:24px;
}

}