body{

margin:0;

font-family:Poppins,sans-serif;

background:url("../images/login/login.jpg");

background-size:cover;

background-position:center;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

}

.login-overlay{

width:100%;

height:100%;

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

display:flex;

justify-content:center;

align-items:center;

}

.login-card{

width:420px;

background:#fff;

padding:45px;

border-radius:14px;

box-shadow:0 25px 60px rgba(0,0,0,.25);

}

.logo{

text-align:center;

margin-bottom:25px;

}

.logo h1{

margin:0;

font-size:55px;

font-family:Playfair Display;

color:var(--gold);

}

.logo h2{

margin:0;

font-family:Playfair Display;

letter-spacing:2px;

}

.logo p{

margin-top:5px;

font-size:12px;

letter-spacing:3px;

color:#777;

}

.alert{

background:#ffe6e6;

padding:12px;

border-radius:6px;

margin-bottom:20px;

color:red;

}

.input-box{

margin-bottom:20px;

}

.input-box label{

display:block;

margin-bottom:8px;

}

.input-box input{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:8px;

outline:none;

}

.password{

position:relative;

}

.password i{

position:absolute;

right:18px;

top:18px;

cursor:pointer;

color:#888;

}

.forgot{

text-align:right;

margin-bottom:25px;

}

.forgot a{

font-size:14px;

color:#777;

float: left;

}

.btn-login{

width:100%;

padding:15px;

background:var(--gold);

border:none;

color:white;

font-weight:600;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.btn-login:hover{

background:#b48b17;

}

.bottom{

margin-top:25px;

text-align:center;

font-size:13px;

color:#666;

}

.btn-retour-site {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    color: var(--gray-500);

    text-decoration: none;

    font-family: var(--font-text);

    font-size: 13px;

    transition: .3s ease;
}

.btn-retour-site:hover {

    color: var(--gold);

}