/* =====================================================================
   CCRM — Page de connexion
   Illustration à gauche (voile sombre + titre de la plateforme),
   formulaire à droite. Jetons de app.css (clair / sombre).
   ===================================================================== */

/* Le layout « blank » centre son contenu : on l'annule pour cette page. */
body.auth-page { display: block; min-height: 100vh; padding: 0; background: var(--color-background); }
body.auth-page .centered__inner { max-width: none; width: 100%; }

.login {
    display: grid; min-height: 100vh;
    grid-template-columns: minmax(0, 1.6fr) minmax(420px, 1fr);
}
.login > * { min-width: 0; }

/* ================================================ Illustration gauche */
.login__visual {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: flex-end;
    padding: clamp(32px, 5vw, 72px);
    background-color: #0F1E36;
}
/* La photo */
.login__visual::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: var(--login-photo) left top / cover no-repeat;   /* logo CCRM de la photo visible */
    transform-origin: left top;
    animation: login-photo 12s ease-out both;
}
/* Voile sombre : léger en haut, dense en bas (lisibilité du titre ≥ 4,5:1) */
.login__visual::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(8, 16, 30, .18) 0%, rgba(8, 16, 30, .10) 30%, rgba(8, 16, 30, .62) 62%, rgba(8, 16, 30, .92) 100%),
        linear-gradient(90deg, rgba(8, 16, 30, .30), transparent 45%),
        radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%);
}

.login__hero { max-width: 640px; color: #FFFFFF; animation: login-in 480ms 120ms cubic-bezier(.2, .8, .2, 1) both; }
.login__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: var(--space-5);
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.login__eyebrow .ico { color: #C4E27A; }
.login__headline {
    margin: 0; font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.025em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    text-wrap: balance;
}
.login__headline span {
    display: block; margin-top: 4px;
    background: linear-gradient(90deg, #C4E27A, #8CC63F);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45));
}
.login__headline::after {
    content: ""; display: block; width: 72px; height: 4px; margin-top: var(--space-5);
    border-radius: 999px; background: linear-gradient(90deg, #A6CB47, #C62C0E);
}
.login__lead {
    margin: var(--space-4) 0 0; max-width: 520px;
    font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.login__features { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.login__features li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(8, 16, 30, .45); border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-size: .9rem; font-weight: 500;
}
.login__features .ico { color: #C4E27A; }

/* ================================================== Formulaire droite */
.login__panel {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: var(--space-7) var(--space-6) var(--space-5);
    background:
        radial-gradient(520px 300px at 100% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 70%),
        radial-gradient(420px 260px at 0% 100%, color-mix(in srgb, #1F3B63 8%, transparent), transparent 70%),
        var(--color-background);
}
.login__card {
    width: 100%; max-width: 420px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -20px rgba(15, 23, 42, .25);
    animation: login-in 380ms cubic-bezier(.2, .8, .2, 1) both;
}
.login__logo { display: block; width: 150px; height: auto; margin: 0 auto var(--space-5); }
.login__title {
    margin: 0; text-align: center; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em;
}
.login__intro { margin: var(--space-2) 0 var(--space-6); text-align: center; color: var(--color-muted-fg); font-size: 1rem; }

.login__form { display: grid; gap: var(--space-4); }
.login__field { display: grid; gap: 6px; }
.login__label { font-weight: 600; font-size: .95rem; color: var(--color-foreground); }
.login__label .req { color: var(--color-destructive); }

.login__control { position: relative; }
.login__lead-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; color: var(--color-muted-fg); pointer-events: none;
    transition: color var(--transition);
}
.login__input {
    width: 100%; height: 50px; padding: 0 var(--space-4) 0 46px;
    font: inherit; font-size: 1rem; color: var(--color-foreground);
    background: color-mix(in srgb, var(--color-muted) 55%, var(--color-surface));
    border: 1.5px solid transparent; border-radius: 12px;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.login__input--pwd { padding-right: 50px; }
.login__input::placeholder { color: color-mix(in srgb, var(--color-muted-fg) 70%, transparent); }
.login__input:hover { border-color: var(--color-border-strong); }
.login__input:focus {
    outline: none; background: var(--color-surface); border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.login__control:focus-within .login__lead-icon { color: var(--color-primary); }

.login__toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 10px; background: transparent; color: var(--color-muted-fg); cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.login__toggle:hover { background: var(--color-muted); color: var(--color-foreground); }
.login__toggle[aria-pressed="true"] { color: var(--color-primary); }

.login__caps[hidden] { display: none; }
.login__caps { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; font-weight: 600; color: var(--color-accent-fg); }

.login__row { display: flex; justify-content: flex-end; margin-top: -4px; }
.login__link {
    border: 0; background: none; padding: 2px 0; cursor: pointer;
    font: inherit; font-size: .92rem; font-weight: 600; color: var(--color-primary);
}
.login__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.login__submit {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; margin-top: var(--space-2); border: 0; border-radius: 12px; cursor: pointer;
    font: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; color: var(--color-on-primary);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 80%, #A6CB47), var(--color-primary) 55%, var(--color-primary-dark));
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--color-primary) 80%, transparent);
    transition: box-shadow var(--transition), transform var(--transition), filter var(--transition);
}
.login__submit:hover { filter: brightness(1.05); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--color-primary) 85%, transparent); transform: translateY(-1px); }
.login__submit:active { transform: translateY(0); }
.login__arrow { transform: rotate(180deg); transition: transform var(--transition); }
.login__submit:hover .login__arrow { transform: rotate(180deg) translateX(-3px); }
.login__submit.is-loading { pointer-events: none; opacity: .85; }
.login__submit.is-loading .login__arrow {
    width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    transform: none; animation: spin .7s linear infinite;
}
.login__submit.is-loading .login__arrow * { display: none; }

.login__secure {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: var(--space-5); padding: 10px 12px; border-radius: 10px;
    background: var(--color-success-soft); color: var(--color-success);
    font-size: .85rem; font-weight: 600; text-align: center;
}
.login__note { margin: var(--space-4) 0 0; text-align: center; font-size: .85rem; color: var(--color-muted-fg); }
.login__copy { margin: var(--space-6) 0 0; text-align: center; font-size: .85rem; color: var(--color-muted-fg); }

@keyframes login-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes login-photo { from { transform: scale(1.05); } to { transform: scale(1); } }

/* ============================================================ Mobile */
@media (max-width: 1024px) {
    .login { grid-template-columns: minmax(0, 1fr); }
    .login__visual { min-height: 340px; padding: var(--space-6) var(--space-5); }
    .login__features { display: none; }
    .login__headline::after { margin-top: var(--space-3); }
    .login__panel { padding: var(--space-5) var(--space-4); }
    .login__card { margin-top: -48px; padding: var(--space-6) var(--space-5); }
}
@media (max-width: 480px) {
    .login__visual { min-height: 300px; }
    .login__lead { font-size: 1rem; }
    .login__eyebrow { font-size: .72rem; }
}

@media (prefers-color-scheme: dark) {
    .login__logo { background: #FFFFFF; padding: 6px 10px; border-radius: var(--radius-sm); }
    .login__card { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); }
}