/* ===================================
   LOGIN.CSS - DJR 20 (Refonte 2026)
   Page de connexion immersive — standalone (ne dépend pas de base.css).

   Contrat JS préservé : body#main, #login-container, form#login-form,
   #admin, #password, classe .readable-input.
   L'accent aléatoire par visite est piloté par la variable --login-accent
   (posée par login.js), utilisée pour la lueur du bouton et l'anneau de focus.
   =================================== */

/* ===== PAGE ===== */
body#main {
    --login-accent: var(--color-primary);
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--gradient-login);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ===== DÉCOR — AURORES / BLOBS ===== */
.login-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-aurora .blob {
    position: absolute;
    width: 42vmax;
    height: 42vmax;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    will-change: transform;
}

.blob-1 {
    top: -12vmax;
    left: -8vmax;
    background: radial-gradient(circle, #7c8ff5, transparent 70%);
    animation: floatBlob 18s ease-in-out infinite;
}

.blob-2 {
    bottom: -14vmax;
    right: -10vmax;
    background: radial-gradient(circle, #764ba2, transparent 70%);
    animation: floatBlob 22s ease-in-out infinite reverse;
}

.blob-3 {
    top: 30%;
    right: 20%;
    background: radial-gradient(circle, #667eea, transparent 70%);
    animation: floatBlob 26s ease-in-out infinite;
}

@keyframes floatBlob {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(6vmax, 4vmax) scale(1.08);
    }
    66% {
        transform: translate(-4vmax, 6vmax) scale(0.95);
    }
}

/* ===== CONTENEUR ===== */
body#main div#login-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    box-sizing: border-box;
    background: transparent;
}

/* ===== CARTE / FORMULAIRE ===== */
body#main div#login-container form {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: clamp(1.75rem, 2vw + 1.25rem, 2.75rem);
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow:
        var(--shadow-xl),
        0 0 0 1px color-mix(in srgb, var(--login-accent) 30%, transparent);
    animation: cardIn 0.7s var(--ease-spring) both;
    transition: box-shadow 0.4s var(--ease-out);
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== LOGO ===== */
.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

body#main div#login-container form img.login-logo {
    display: block;
    width: clamp(120px, 40%, 170px);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(44, 62, 80, 0.25));
}

/* ===== TITRES ===== */
body#main div#login-container form h1 {
    margin: 0.25rem 0 0.35rem;
    font-size: clamp(1.6rem, 1rem + 2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--color-ink);
}

/* Sous-titre en eyebrow mono (écho de la pastille « RÉGIE » de l'app bar) */
.login-subtitle {
    margin: 0 0 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    font-weight: 600;
}

/* ===== MESSAGE D'ERREUR INLINE ===== */
.login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.15rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    background: #fdecec;
    border: 1px solid #f5c2c7;
    color: #b02a37;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.35;
    white-space: pre-line;
    animation: shakeIn 0.4s ease;
}

.login-error[hidden] {
    display: none;
}

.login-error::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes shakeIn {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-6px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(0);
    }
}

/* ===== CHAMPS ===== */
.field {
    text-align: left;
    margin-bottom: 1.1rem;
}

.field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-soft);
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap .input-icon {
    position: absolute;
    left: 0.85rem;
    color: var(--color-text-soft);
    pointer-events: none;
    transition: color 0.2s var(--ease-out);
}

/* Champs saisie — surcharge du sélecteur générique du contrat JS */
div#login-container form .input-wrap input {
    width: 100%;
    padding: 0.85rem 2.7rem 0.85rem 2.7rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 16px; /* ≥16px : évite le zoom auto iOS au focus */
    font-family: var(--font-base);
    color: var(--color-text);
    background: #fff;
    transition:
        border-color 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out),
        background 0.2s var(--ease-out);
}

div#login-container form .input-wrap input::placeholder {
    color: #aeb8c4;
}

div#login-container form .input-wrap input:focus {
    outline: none;
    border-color: var(--login-accent);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 25%, transparent);
}

.input-wrap input:focus ~ .input-icon,
.input-wrap:focus-within .input-icon {
    color: var(--login-accent);
}

/* Classe ajoutée par login.js — garantit un fond lisible quel que soit l'accent */
.readable-input {
    background: #fff !important;
    color: var(--color-text) !important;
}

/* ===== BOUTON PRINCIPAL ===== */
div#login-container form button.btn-login {
    position: relative;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--login-accent);
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--login-accent) 38%, transparent);
    transition:
        transform 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out),
        filter 0.2s var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.btn-login:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--login-accent) 48%, transparent);
}

.btn-login:active {
    transform: translateY(0);
}

.btn-login:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* État de chargement (login.js ajoute .is-loading) */
.btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn-login.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.btn-login.is-loading .btn-spinner {
    display: inline-block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== ACCESSIBILITÉ — MOUVEMENT RÉDUIT ===== */
@media (prefers-reduced-motion: reduce) {
    .login-aurora .blob {
        animation: none;
    }
    body#main div#login-container form {
        animation: none;
    }
    .btn-login::before {
        display: none;
    }
    .login-error {
        animation: none;
    }
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 575.98px) {
    body#main div#login-container {
        padding: 1rem;
    }

    body#main div#login-container form {
        padding: 1.5rem 1.25rem;
        border-radius: var(--radius-xl);
    }

    body#main div#login-container form img.login-logo {
        width: 110px;
    }
}