/* Connexion « Apple » (21/10) : écran de verrouillage du Mac — fond doux, logo en avatar, nom,
   champ mot de passe en pilule avec la flèche dedans. Jetons de couleur : ui.css.
   Ancienne version (étoiles, sceau animé) : backups/pre-apple-2026-10-21/static/login.css */

html.ui-apple body.login-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  /* « fond d'écran » : quelques taches de couleur très diffuses */
  background-image:
    radial-gradient(60vmax 50vmax at 12% 8%, color-mix(in srgb, #7aa7ff 34%, transparent), transparent 70%),
    radial-gradient(55vmax 45vmax at 92% 18%, color-mix(in srgb, #ff9ec4 30%, transparent), transparent 70%),
    radial-gradient(70vmax 55vmax at 60% 105%, color-mix(in srgb, #b4a2ff 30%, transparent), transparent 70%);
  background-attachment: fixed;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
}

.login-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: login-in 420ms var(--ease-out) both;
}
@keyframes login-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Icône d'app iOS : carré à coins continus graphite, reflet en haut, monogramme vectoriel blanc */
.login-icon {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #3a3a3c 0%, #1d1d1f 52%, #0a0a0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 .5px rgba(255, 255, 255, .08),
    0 0 0 .5px rgba(0, 0, 0, .18),
    0 2px 6px rgba(0, 0, 0, .10),
    0 22px 44px -14px rgba(0, 0, 0, .45);
  animation: login-icon-in 520ms var(--ease-out) both;
}
@supports (corner-shape: squircle) {
  .login-icon { border-radius: 30%; corner-shape: squircle; }
}
/* reflet doux, comme la lumière qui accroche le haut de l'icône */
.login-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .22), transparent 60%);
  pointer-events: none;
}
.login-glyph {
  position: relative;
  width: 60%;
  height: 60%;
  background: #fff;
  -webkit-mask: url("/static/img/logo-hm.svg") center / contain no-repeat;
  mask: url("/static/img/logo-hm.svg") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
@keyframes login-icon-in { from { opacity: 0; transform: scale(.94); } }

/* le vrai mot-symbole du logo plutôt que du texte en police système */
.login-name {
  width: 168px;
  height: 20px;
  margin: 22px 0 26px;
  background: var(--text);
  -webkit-mask: url("/static/img/logo-wordmark.svg") center / contain no-repeat;
  mask: url("/static/img/logo-wordmark.svg") center / contain no-repeat;
}

.login-form { width: 100%; }

.field-row-login {
  position: relative;
  width: 100%;
}

.ui-apple .field-row-login input[type=password] {
  width: 100%;
  height: 40px;
  padding: 0 48px 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--material-thick);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 .5px var(--border-strong), 0 6px 20px -8px rgba(0, 0, 0, .25);
  font-size: 15px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--text);
}
.ui-apple .field-row-login input[type=password]::placeholder { letter-spacing: .1em; color: var(--text-faint); }
.ui-apple .field-row-login input[type=password]:focus {
  background: var(--material-thick);
  box-shadow: 0 0 0 .5px var(--border-strong), 0 0 0 4px var(--focus);
}

.enter-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill-strong);
  color: var(--text);
  font: 600 14px/1 var(--font);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.enter-btn:active { transform: scale(.9); }
/* la flèche passe en bleu dès qu'un mot de passe est tapé */
.field-row-login input:not(:placeholder-shown) + .enter-btn { background: var(--accent); color: #fff; }

.login-msg {
  margin: -8px 0 14px;
  font-size: 13px;
  color: var(--danger);
  animation: login-shake 360ms var(--ease-out);
}
@keyframes login-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.footprint {
  margin-top: 28px;
  font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: .02em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .login-card, .login-msg, .login-icon { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ui-apple .field-row-login input[type=password] { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* sombre : un liseré clair pour détacher l'icône du fond noir */
@media (prefers-color-scheme: dark) {
  html.ui-apple:not([data-theme="light"]) .login-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 .5px rgba(255, 255, 255, .16), 0 22px 44px -14px rgba(0, 0, 0, .8); }
}
html.ui-apple[data-theme="dark"] .login-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 .5px rgba(255, 255, 255, .16), 0 22px 44px -14px rgba(0, 0, 0, .8); }