*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    background:url(image/hotel2.jpg);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    display:flex;
    justify-content:center;
    align-items:center;

    height:100vh;

}

body::before{

    content:"";
    position:fixed;
    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.65);

}


.forme-section{

    width:520px;

    background:rgba(255,255,255,.95);

    padding:20px 25px;

    border-radius:22px;

    backdrop-filter:blur(10px);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    border:1px solid rgba(255,255,255,.4);

    transition:.4s;

}


.forme-section:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 55px rgba(0,0,0,.40);

}


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

.logo-container{

    text-align:center;

    margin-bottom:5px;

}


.log2{

    width:220px;
    max-width:100%;
    transition:.4s;
     border-bottom:2.5px solid #f5d76e;


}


/*=========================
      ICON UTILISATEUR
=========================*/

.user-icon{

    text-align:center;
    margin-top:5px;
    margin-bottom:10px;

}


.user-icon i{

    font-size:55px;
    color:#D4AF37;
    transition:.3s;

}


.user-icon i:hover{

    transform:scale(1.1);
    color:#f5d76e;

}


/*======================
        TITRE
=======================*/

.connect{

    text-align:center;

    margin:5px 0 20px;

    color:#D4AF37;

    font-size:25px;

    letter-spacing:2px;

    font-weight:bold;

}




/*======================
        INPUTS
=======================*/

.input-box{

    position:relative;
    border-radius: 0%;
    margin-bottom:15px;

}


.input-box i{

    position:absolute;

    left:18px;

    top:13px;

    color:#D4AF37;

    font-size:18px;

}


.nom1,
.mot2{

    width:100%;
    height:45px;
    padding-left:50px;
    border:2px solid #ddd;
   
    outline:none;
    font-size:16px;
    transition:.3s;

}


.nom1:focus,
.mot2:focus{

    border-color:#D4AF37;

}



/*======================
        BOUTONS
=======================*/

.boutons{

    display:flex;

    justify-content:space-between;

    margin-top:20px;

}


.annuler1{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:170px;
    height:48px;

    text-decoration:none;

    background: #D4AF37;
    color: #1d2f07;

   
    border-radius:30px;

    font-size:16px;
    font-weight:bold;

    transition:.3s;
}

.annuler1:hover{

    background:#071A2F;
    color:#D4AF37;

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(212,175,55,.35);

}


.connecter{

    width:46%;

    height:45px;

    border:none;

    border-radius:30px;

    background:#D4AF37;

    color:#071A2F;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}


.connecter:hover{

    background:#071A2F;

    color:white;

}