/* ============================================================ login.css — écrans de connexion (login.php = étape email, login_code.php = étape code 6 chiffres). Fidèle à la maquette Claude Design « Connexion » (projet CXAGENT WEB) : encart blanc 460px radius 16, bouton SSO Keycloak en pilule accent-tint (option recommandée), séparateur « ou », champ email à icône, cases OTP 52×60, fond photo (DailyBackground) + scrim nuit. Structure HTML (conservée pour l'animation push de login.js) : .login-card ← encart blanc FIXE (ne bouge pas) .login-stage ← viewport de clipping du push .login-track ← rail translaté .login-content ← contenu d'une étape (slide) ============================================================ */ /* ---- Fond plein écran + scrim nuit ---- */ .login-bg { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; position: relative; overflow: hidden; } .login-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 15, 28, .30) 0%, rgba(7, 15, 28, .42) 100%); pointer-events: none; } /* ---- Encart blanc FIXE ---- */ .login-card { position: relative; z-index: 1; width: 460px; max-width: 100%; background: var(--color-white); border-radius: 16px; box-shadow: 0 24px 64px rgba(6, 14, 26, .38), 0 2px 8px rgba(6, 14, 26, .18); box-sizing: border-box; /* Pop-in au 1er chargement (l'image est perçue d'abord, la carte fade-in). */ animation: loginCardIn .55s cubic-bezier(0.32, 0.72, 0, 1) .18s both; } @keyframes loginCardIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Viewport qui clippe le push horizontal ---- */ .login-stage { overflow: hidden; overflow: clip; overflow-clip-margin: 8px; border-radius: 16px; } /* ---- Rail translaté ---- */ .login-track { display: flex; align-items: flex-start; width: max-content; transition: transform .52s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } /* ---- Contenu d'une étape ---- */ .login-content { width: 460px; max-width: calc(100vw - 48px); flex-shrink: 0; box-sizing: border-box; padding: 44px 46px 40px; min-height: 496px; display: flex; flex-direction: column; } /* ---- Logo ---- */ .login-logo { display: flex; justify-content: center; margin-bottom: 26px; } .login-logo img { width: 118px; height: auto; display: block; } /* ---- Titres ---- */ .login-content h1 { margin: 0 0 22px; font: 700 24px/1.25 'Nunito Sans'; color: var(--color-ink-3); letter-spacing: -.01em; } .login-content h1 strong { color: var(--color-ink); font-weight: 800; } .login-content h1.center { text-align: center; } /* ---- Bandeaux d'erreur / info ---- */ .login-error, .login-info { border-radius: 9px; padding: 10px 12px; font: 500 13px/1.4 'Source Sans 3'; margin-bottom: 16px; } .login-error { background: var(--color-danger-tint); color: var(--color-danger-deep); } .login-info { background: var(--color-accent-tint); color: var(--color-accent-2); } /* ============================================================ Étape 1 — Email + SSO ============================================================ */ /* Connexion SSO (Keycloak) — option recommandée, identité Cognix */ .btn-sso { appearance: none; cursor: pointer; width: 100%; height: 50px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-accent-tint); border: 1px solid var(--tag-mint-bd); color: var(--color-accent-2); font: 800 14.5px/1 'Nunito Sans'; letter-spacing: .01em; text-decoration: none; box-sizing: border-box; transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .06s var(--ease); } .btn-sso:hover { background: #D6E9EE; border-color: var(--color-accent); color: var(--color-accent-2); text-decoration: none; box-shadow: 0 2px 8px rgba(53, 124, 142, .12); } .btn-sso:active { transform: translateY(1px); } .btn-sso svg { width: 18px; height: 18px; flex-shrink: 0; } /* Séparateur « ou » */ .login-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; } .login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--color-mist-2); } .login-or span { font: 700 11px/1 'Nunito Sans'; text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink-soft); } /* Champ email */ .login-content .field { margin-bottom: 18px; } .login-content label { display: block; margin-bottom: 8px; font: 700 13px/1 'Nunito Sans'; color: var(--color-ink-2); } .input-wrap { position: relative; } .input-wrap .in-ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-ink-soft); pointer-events: none; display: inline-flex; } .input-wrap .in-ic svg { width: 17px; height: 17px; } .login-content input[type=email] { width: 100%; height: 48px; box-sizing: border-box; padding: 0 40px 0 14px; border: 1px solid var(--color-mist); border-radius: 9px; background: var(--color-white); font: 400 15px/1 'Source Sans 3'; color: var(--color-ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .login-content input[type=email]::placeholder { color: var(--color-ink-soft); } .login-content input[type=email]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(80, 175, 198, .18); } /* Bouton principal (submit) */ .login-content button[type=submit]:not(.link) { appearance: none; border: 0; cursor: pointer; width: 100%; height: 50px; border-radius: 9px; background: var(--color-indigo-2); color: var(--color-white); font: 800 15px/1 'Nunito Sans'; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background .15s var(--ease), transform .06s var(--ease); } .login-content button[type=submit]:not(.link):hover { background: #262d3b; } .login-content button[type=submit]:not(.link):active { transform: translateY(1px); } .login-content button[type=submit]:not(.link):disabled { opacity: .55; cursor: default; } /* Aide bas de carte (étape email) */ .footer-note { margin-top: auto; padding-top: 22px; text-align: center; font: 400 13px/1.55 'Source Sans 3'; color: var(--color-ink-3); } /* ============================================================ Étape 2 — Saisie du code ============================================================ */ .login-content .email-hint { margin: -6px 0 22px; text-align: center; font: 400 14.5px/1.45 'Source Sans 3'; color: var(--color-ink-3); } .login-content .email-hint strong { color: var(--color-ink-2); font-weight: 700; } .login-divider { height: 1px; background: var(--color-mist-2); margin: 4px 0 24px; } .code-input { display: flex; gap: 10px; justify-content: center; margin: 0 0 22px; } .code-input input { width: 52px; height: 60px; padding: 0; box-sizing: border-box; text-align: center; border: 1px solid var(--color-mist); border-radius: 10px; background: var(--color-white); font: 700 24px/1 'Nunito Sans'; color: var(--color-ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .code-input input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(80, 175, 198, .18); } .code-input input.filled { border-color: var(--color-accent); } /* Pied étape code : « Modifier l'email » / « Renvoyer un code » */ .login-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; box-sizing: border-box; font: 700 13.5px/1 'Nunito Sans'; } .login-actions > * { white-space: nowrap; } .login-actions a, .login-actions button.link { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; font: 700 13.5px/1 'Nunito Sans'; white-space: nowrap; } .login-actions a:hover, .login-actions button.link:hover { text-decoration: underline; color: var(--color-accent); } .login-actions svg { width: 14px; height: 14px; } /* ---- Responsive ---- */ @media (max-width: 520px) { .login-content { padding: 34px 26px 30px; min-height: 0; } .code-input { gap: 8px; } .code-input input { width: 44px; height: 54px; font-size: 21px; } }