/* --- Fond avec image + overlay pour lisibilité --- */
body {
    position: relative;
    min-height: 100vh; /* fallback */
    min-height: 100dvh; /* mobile moderne */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Times New Roman", Times, serif;
    margin: 0;
}
.bg-cover {
    position: fixed;
    inset: 0;
    background:
    /* fallback gradient au cas où l'image ne charge pas */
    linear-gradient(135deg, rgba(248, 249, 251, 0.4), rgba(102,16,242,.4)),
    url('../../public/images/bg_resto1.jpg') center/cover no-repeat fixed;
    z-index: -2;
}
.bg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35); /* voile sombre pour augmenter le contraste */
    z-index: -1;
    backdrop-filter: blur(2px);
}

/* --- Carte de login responsive --- */
.login-card {
    background: rgba(255, 255, 255, 0.9);
    
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.15);
    width: clamp(300px, 92vw, 420px);
    animation: fadeIn .6s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.brand-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.form-label{
    font-weight: 700;
    font-size: 1rem;
}

.form-control{
    border-radius: 12px;
    padding: .8rem .9rem;
}

.form-control:focus{
    border-color: #007bff;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.btn-primary{
    border-radius: 999px;
    padding: .8rem 1rem;
    font-weight: 600;
    background: linear-gradient(90deg, #007bff, #6610f2);
    border: none;
}
.btn-primary:hover{ background: linear-gradient(90deg, #0056d2, #520dc2); }

/* Texte secondaire */
.muted-sm { color: #6c757d; font-size: .95rem; }

/* Petits écrans : titres un peu plus petits pour tenir sur une ligne */
@media (max-width: 400px){
    h2 { font-size: 1.4rem; }
    .muted-sm { font-size: .9rem; }
}

/* Préférence utilisateur : réduire les animations */
@media (prefers-reduced-motion: reduce){
    .login-card { animation: none; }
}