/**
 * Stay Smart — Login auth shell.
 * Desktop (≥1024) : inchangé (split panel + carte simple).
 * Mobile (≤1023) : expérience native moderne (atmosphère + carte glass).
 */

/* ── Socle (safe-area / tactile) — neutre desktop ── */
.ss-auth-body {
  min-height: 100dvh;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ss-auth-lang {
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
}

.ss-auth-flash {
  top: calc(max(0.75rem, env(safe-area-inset-top, 0px)) + 2.75rem);
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
}

.ss-login-shell {
  min-height: 100dvh;
  min-height: 100vh;
}

.ss-login-main {
  min-height: 100dvh;
  min-height: 100vh;
  box-sizing: border-box;
}

.ss-login-ambient {
  display: none;
}

.ss-login-mobile-brand__tag {
  display: none;
}

.ss-login-field {
  margin: 0;
}

.ss-login-field + .ss-login-field {
  margin-top: 0.65rem;
}

/* Inputs / bouton : styles de base (ok desktop + mobile) */
.ss-login-input,
[data-ss-login-form] input[type="text"],
[data-ss-login-form] input[type="password"],
[data-ss-login-form] .ss-login-input {
  display: block;
  width: 100%;
  min-height: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0 0.9rem;
  border: 1px solid rgb(var(--ss-line));
  border-radius: 0.75rem;
  background: rgb(var(--ss-surface));
  color: rgb(var(--ss-ink));
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgb(26 26 26 / 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ss-login-input:focus,
[data-ss-login-form] input[type="text"]:focus,
[data-ss-login-form] input[type="password"]:focus,
[data-ss-login-form] .ss-login-input:focus {
  outline: none;
  border-color: rgb(var(--ss-brand));
  box-shadow: 0 0 0 3px rgb(var(--ss-brand) / 0.22);
}

.ss-login-submit {
  margin-top: 0.35rem !important;
  min-height: 3rem !important;
  height: 3rem;
  border-radius: 0.75rem !important;
  font-size: 0.95rem !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
}

.ss-login-submit:active {
  transform: scale(0.98);
  filter: brightness(0.97);
}

/* ═══════════════════════════════════════════
   MOBILE ONLY — design moderne (≤1023px)
   ═══════════════════════════════════════════ */
@media (max-width: 1023px) {
  .ss-auth-body {
    font-family: "DM Sans", system-ui, sans-serif;
    color: #e8f4f4;
    background:
      radial-gradient(120% 80% at 10% -10%, rgb(14 139 146 / 0.45) 0%, transparent 55%),
      radial-gradient(90% 70% at 100% 20%, rgb(244 121 32 / 0.18) 0%, transparent 50%),
      linear-gradient(165deg, #062a2e 0%, #0a3d42 42%, #0e4f55 78%, #083538 100%);
  }

  .ss-auth-body.bg-field {
    background-color: transparent;
  }

  .ss-login-shell {
    position: relative;
    isolation: isolate;
  }

  .ss-login-main {
    position: relative;
    z-index: 1;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }

  .ss-login-ambient {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }

  .ss-login-ambient::before,
  .ss-login-ambient::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
    animation: ss-login-orb 10s ease-in-out infinite alternate;
  }

  .ss-login-ambient::before {
    width: 16rem;
    height: 16rem;
    top: -4rem;
    left: -3rem;
    background: rgb(14 139 146 / 0.55);
  }

  .ss-login-ambient::after {
    width: 14rem;
    height: 14rem;
    bottom: 8%;
    right: -4rem;
    background: rgb(244 121 32 / 0.28);
    animation-delay: -3s;
  }

  @keyframes ss-login-orb {
    from {
      transform: translate(0, 0) scale(1);
    }
    to {
      transform: translate(12px, 18px) scale(1.08);
    }
  }

  .ss-login-card-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 0.5rem);
    animation: ss-login-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes ss-login-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Marque hero mobile */
  .ss-login-mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.75rem;
  }

  .ss-login-mobile-brand .ss-brand-logo,
  .ss-login-mobile-brand .ss-brand-mark {
    height: 2.75rem;
    filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.25));
  }

  .ss-login-mobile-brand .ss-brand-logo {
    max-width: 12rem;
    background: rgb(255 255 255 / 0.94);
    border-radius: 0.65rem;
    padding: 0.35rem 0.55rem;
  }

  .ss-login-mobile-brand .ss-brand-mark {
    background: rgb(255 255 255 / 0.94);
    border-radius: 0.85rem;
    padding: 0.35rem;
  }

  .ss-login-mobile-brand__tag {
    display: block;
    margin: 0;
    font-family: "Sora", "DM Sans", sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.55);
  }

  .ss-login-intro__title {
    font-family: "Sora", "DM Sans", sans-serif;
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #f4fbfb;
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.15);
  }

  .ss-login-intro__sub {
    margin-top: 0.4rem;
    color: rgb(232 244 244 / 0.68);
    font-size: 0.9375rem;
  }

  /* Carte glass */
  .ss-login-card {
    margin-top: 1.35rem !important;
    padding: 1.35rem 1.25rem !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgb(255 255 255 / 0.16) !important;
    background: rgb(255 255 255 / 0.92) !important;
    box-shadow:
      0 1px 0 rgb(255 255 255 / 0.55) inset,
      0 24px 48px -16px rgb(0 0 0 / 0.45) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: rgb(var(--ss-ink));
  }

  .ss-login-card .ss-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgb(var(--ss-ink) / 0.78);
  }

  .ss-login-card .ss-login-input,
  .ss-login-card input[type="text"],
  .ss-login-card input[type="password"] {
    border-color: rgb(var(--ss-line) / 0.9);
    background: rgb(246 250 250 / 0.95);
    box-shadow: none;
  }

  .ss-login-card .ss-login-input:focus,
  .ss-login-card input[type="text"]:focus,
  .ss-login-card input[type="password"]:focus {
    border-color: rgb(var(--ss-brand));
    background: #fff;
    box-shadow: 0 0 0 3px rgb(var(--ss-brand) / 0.2);
  }

  .ss-login-submit {
    margin-top: 0.75rem !important;
    border: 0 !important;
    background: linear-gradient(135deg, rgb(14 139 146) 0%, rgb(10 106 112) 100%) !important;
    box-shadow: 0 10px 22px -8px rgb(14 139 146 / 0.65);
    font-family: "Sora", "DM Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .ss-login-submit:hover {
    filter: brightness(1.05);
  }

  .ss-login-submit:active {
    transform: scale(0.98);
    box-shadow: 0 6px 14px -8px rgb(14 139 146 / 0.55);
  }

  /* Langue : pastille frosted */
  .ss-auth-lang {
    top: max(0.65rem, env(safe-area-inset-top, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
  }

  .ss-auth-lang .ss-lang-dd__btn,
  .ss-auth-lang button,
  .ss-auth-lang [data-ss-lang-toggle] {
    border-radius: 999px !important;
    border-color: rgb(255 255 255 / 0.22) !important;
    background: rgb(255 255 255 / 0.12) !important;
    color: #f4fbfb !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
  }

  .ss-auth-flash__item,
  .ss-auth-flash > p {
    border-radius: 0.85rem;
    backdrop-filter: blur(10px);
  }

  /* A2HS plus discret sur fond sombre */
  .ss-a2hs-login {
    margin-top: 1rem;
  }

  .ss-a2hs-login__btn {
    min-height: 3rem;
    border-radius: 0.95rem;
    border-color: rgb(255 255 255 / 0.22) !important;
    background: rgb(255 255 255 / 0.1) !important;
    color: #f4fbfb !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .ss-a2hs-login__title {
    color: #f4fbfb !important;
    animation: none;
  }

  .ss-a2hs-login__hint {
    color: rgb(244 251 251 / 0.6) !important;
  }

  .ss-a2hs-login__ios-help {
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.18);
    background: rgb(0 0 0 / 0.28);
    color: rgb(244 251 251 / 0.85);
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .ss-a2hs-login__ios-help[hidden] {
    display: none !important;
  }

  .ss-a2hs-login__icon {
    background: rgb(14 139 146 / 0.35) !important;
    color: #9ee4e8 !important;
    animation: none;
  }

  .ss-a2hs-login__pulse {
    animation: none;
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-login-card-wrap,
    .ss-login-ambient::before,
    .ss-login-ambient::after {
      animation: none !important;
    }
  }
}

/* Desktop : ambiance mobile désactivée, split panel inchangé */
@media (min-width: 1024px) {
  .ss-login-ambient,
  .ss-login-mobile-brand__tag {
    display: none !important;
  }

  .ss-login-main {
    min-height: 100dvh;
  }

  .ss-login-card {
    border-radius: 1rem;
  }
}