/* Écran d'accès OMBRA : accueil (/) et connexion (/login) */
.auth { overflow-y: auto; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth-nav { display: flex; gap: 6px; }
.auth-nav-link {
  color: #8c8c8c; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; border: 1px solid #2c2c2c; background: #141414;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.auth-nav-link:hover { color: #ffffff; border-color: #8c8c8c; background: #1d1d1d; }
.auth-nav-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.auth-nav-link[aria-current="page"] { color: #0a0a0a; background: #e9e9e9; border-color: #e9e9e9; }
.auth-layout {
  position: relative; z-index: 1; width: min(1080px, 100%); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 24px 16px;
}
.auth-showcase { flex: 1 1 380px; max-width: 520px; display: grid; gap: 16px; animation: authRise .5s ease both; }
.auth-kicker { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8c8c8c; }
.auth-pitch { margin: 0; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: #ffffff; letter-spacing: -.02em; }
.auth-shot { width: 100%; height: auto; border-radius: 16px; border: 1px solid #2c2c2c; background: #141414; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.feature-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feature-chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: #1d1d1d; border: 1px solid #2c2c2c; color: #e9e9e9; font-size: 13px;
}
.chip-ico { color: #ffffff; font-size: 12px; }
.auth-layout .auth-card { flex: 0 1 420px; }
.login-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.login-steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; color: #e9e9e9; font-size: 14px; }
.login-steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2c2c2c; color: #ffffff; font: 600 12px ui-monospace, monospace; flex: none; }
@keyframes authRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .auth-layout { gap: 24px; padding: 12px; }
  .auth-showcase { order: 2; flex-basis: 100%; }
  .auth-pitch { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .auth-showcase { animation: none; } }