/* Authentification autonome : composition Refactia, composants partag?s. */
.login-page { --login-bg: var(--ds-bg); --login-surface: var(--ds-surface); --login-text: var(--ds-ink); --login-muted: var(--ds-ink-subtle); --login-accent: var(--ds-brand); --login-accent-strong: var(--ds-accent); --login-ring: var(--ds-brand-tint); --login-dark: var(--ds-ink); --login-success: var(--ds-success-fg); }
.login-page, .login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; }
body.login-page { margin: 0; min-height: 100svh; color: var(--ds-ink); background: var(--ds-bg); font: var(--ds-text-base)/1.6 var(--ds-font); }
.login-page [hidden], .login-page .hidden { display: none !important; }
.login-page :where(a:not(.app-btn):not(.app-action)) { color: var(--ds-accent); }
.login-page :is(a, button, summary):focus-visible { outline: 2px solid var(--ds-focus-color); outline-offset: 3px; }
.login-page .log-background { min-height: 100svh; display: grid; place-items: center; padding: var(--ds-space-28); }
.login-page .login { width: min(1100px, 100%); display: grid; grid-template-columns: 1fr 1fr; background: var(--ds-surface); }
.login-page .login-hero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ds-space-28); padding: clamp(24px, 3vw, 40px); background: var(--ds-tint-1); }
.login-page .hero-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ds-space-16); }
.login-page .refactia-wordmark { display: inline-flex; font-size: var(--ds-text-xl); font-weight: var(--ds-weight-heavy); letter-spacing: var(--ds-tracking-caps); color: var(--ds-ink); }
.login-page .refactia-wordmark__accent { color: var(--ds-brand); }
.login-page .hero-text { display: grid; gap: var(--ds-space-12); }
.login-page .hero-text h1 { margin: 0; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.2; letter-spacing: var(--ds-tracking-tight); }
.login-page .hero-text p { margin: 0; color: var(--ds-ink-subtle); }
.login-page .hero-eyebrow { color: var(--ds-accent); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-bold); }
.login-page .hero-list { display: grid; gap: var(--ds-space-16); padding: 0; margin: 0; list-style: none; }
.login-page .hero-list li { display: flex; gap: var(--ds-space-12); align-items: flex-start; }
.login-page .hero-list strong, .login-page .hero-list small, .login-page .hero-badge strong, .login-page .hero-badge small { display: block; }
.login-page .hero-list small, .login-page .hero-badge small { color: var(--ds-ink-subtle); font-size: var(--ds-text-md); }
.login-page .hero-dot { flex: 0 0 8px; height: 8px; border-radius: var(--ds-radius-pill); margin-top: 8px; background: var(--ds-brand); }
.login-page .hero-badge { display: flex; align-items: center; gap: var(--ds-space-12); color: var(--ds-ink-subtle); }
.login-page .hero-badge__icon { color: var(--ds-accent); }
.login-page svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-page .form-base { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--ds-space-24); padding: clamp(24px, 3vw, 40px); }
.login-page .login-form-head { display: flex; justify-content: flex-end; position: relative; }
.login-page .login-support-link { display: inline-flex; align-items: center; gap: var(--ds-space-8); text-decoration: none; min-height: var(--ds-control-touch); }
.login-page .profil-img { width: 24px; height: 24px; object-fit: contain; }
.login-page #connected { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-8); cursor: pointer; }
.login-page #connected p { margin: 0; }
.login-page .arrow-menu { width: 12px; height: 12px; }
.login-page .arrow-menu.rotate { transform: rotate(180deg); }
.login-page .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 220px; z-index: 10; }
.login-page .dropdown-menu.show { display: grid; }
.login-page .login-form, .login-page .register-form { display: grid; gap: var(--ds-space-20); width: 100%; margin: 0; }
.login-page .form-heading, .login-page .register-card-copy { display: grid; gap: var(--ds-space-8); }
.login-page .form-title { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); line-height: 1.3; }
.login-page .form-subtitle, .login-page .form-hint { margin: 0; color: var(--ds-ink-subtle); font-size: var(--ds-text-base); }
.login-page .field { min-width: 0; }
.login-page .form-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ds-space-12); font-size: var(--ds-text-md); }
.login-page .remember { display: inline-flex; align-items: center; min-height: var(--ds-control-touch); gap: var(--ds-space-8); }
.login-page .remember input { width: 18px; height: 18px; accent-color: var(--ds-brand); }
.login-page .submit-btn { width: 100%; }
.login-page .form-hint, .login-page .faq-link { text-align: center; }
.login-page .faq-link { color: var(--ds-ink-subtle); font-size: var(--ds-text-md); min-height: var(--ds-control-touch); }
.login-page .alert { margin: 0; padding: var(--ds-space-12) var(--ds-space-16); border: 0; border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); }
.login-page .alert-danger, .login-page .alert-error { color: var(--ds-danger-fg); background: var(--ds-danger-bg); }
.login-page .alert-success { color: var(--ds-success-fg); background: var(--ds-success-bg); }
.login-page .alert-warning { color: var(--ds-warning-fg); background: var(--ds-warning-bg); }
.login-page .alert-info { color: var(--ds-info-fg); background: var(--ds-info-bg); }
.login-page .register-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-16); }
.login-page .register-form-grid .is-full { grid-column: 1 / -1; }
@media (max-width: 800px) { .login-page .login { grid-template-columns: minmax(0, 1fr); } .login-page .login-hero { order: 2; } .login-page .form-base { order: 1; } }
@media (max-width: 600px) { .login-page .log-background { padding: var(--ds-space-16); } .login-page .form-base, .login-page .login-hero { padding: var(--ds-space-24) var(--ds-space-16); } .login-page .register-form-grid { grid-template-columns: minmax(0, 1fr); } }