html,body{height:100%;margin:0;}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;}

.box{
    width:100%;max-width:420px;
    animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Logo */
.logo{text-align:center;margin-bottom:36px;}
.logo img{width:52px;height:52px;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.6);margin-bottom:14px;display:block;margin-left:auto;margin-right:auto;}
.logo h1{font-family:'Cinzel',serif;font-size:1.55rem;font-weight:900;background:linear-gradient(135deg,#fff,var(--gold-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 4px;}
.logo p{color:rgba(255,255,255,.35);font-size:.87rem;margin:0;}

/* Card */
.card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,215,0,.12);
    border-radius:20px;
    padding:36px 32px;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
}

/* Champ */
.field{margin-bottom:20px;}
.field-label{display:block;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px;}
.field-wrap{position:relative;}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.2);font-size:.9rem;pointer-events:none;transition:color .2s;}
.field-input{
    width:100%;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;color:#fff;
    padding:12px 42px;font-size:.92rem;
    font-family:'Rubik',sans-serif;outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.field-input:focus{border-color:rgba(255,215,0,.4);box-shadow:0 0 0 3px rgba(255,215,0,.07);}
.field-input:focus~.field-icon,.field-wrap:focus-within .field-icon{color:var(--gold-primary);}
.field-input::placeholder{color:rgba(255,255,255,.18);}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.2);cursor:pointer;padding:0;font-size:.95rem;transition:color .2s;}
.pw-eye:hover{color:rgba(255,255,255,.55);}

/* Erreur */
.alert-err{display:flex;align-items:center;gap:9px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.22);border-radius:11px;padding:12px 14px;color:#f87171;font-size:.85rem;margin-bottom:22px;}

/* Row oubli */
.pw-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.remember input{display:none;}
.remember-box{
    width:17px;height:17px;flex-shrink:0;
    border:1.5px solid rgba(255,215,0,.3);
    border-radius:5px;
    background:rgba(255,255,255,.04);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,border-color .2s,box-shadow .2s;
}
.remember input:checked ~ .remember-box{
    background:linear-gradient(135deg,var(--gold-primary),#FF6B00);
    border-color:transparent;
    box-shadow:0 0 8px rgba(255,215,0,.25);
}
.remember-box i{font-size:.65rem;color:#000;opacity:0;transition:opacity .15s;}
.remember input:checked ~ .remember-box i{opacity:1;}
.remember span{color:rgba(255,255,255,.35);font-size:.82rem;}
.forgot{font-size:.8rem;color:rgba(255,255,255,.28);transition:color .2s;text-decoration:none;}
.forgot:hover{color:var(--gold-primary);}

/* Submit */
.btn-submit{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,var(--gold-primary),#FF6B00);
    color:#000;font-weight:800;font-family:'Cinzel',serif;
    font-size:.9rem;letter-spacing:1px;text-transform:uppercase;
    padding:13px;border:none;border-radius:11px;cursor:pointer;
    box-shadow:0 4px 20px rgba(255,215,0,.18);
    transition:filter .2s,transform .15s,box-shadow .2s;
}
.btn-submit:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,215,0,.28);}
.btn-submit:active{transform:none;}

/* Bas */
.bottom{text-align:center;margin-top:24px;}
.bottom p{color:rgba(255,255,255,.28);font-size:.85rem;margin:0 0 8px;}
.bottom a{color:var(--gold-primary);font-weight:600;text-decoration:none;transition:color .2s;}
.bottom a:hover{color:#fff;}
.back{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.2) !important;font-size:.8rem !important;font-weight:400 !important;margin-top:4px;}
.back:hover{color:rgba(255,255,255,.5) !important;}

.sep{display:flex;align-items:center;gap:10px;margin:20px 0;}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}
.sep span{color:rgba(255,255,255,.18);font-size:.73rem;}