/* FLERP-ID — tokens & styles page de connexion (spec design §1-2, charte suite). */
:root {
  --flerp-violet: #7B4FE2;
  --flerp-teal: #1E9FC9;
  --flerp-green: #10B981;
  --flerp-gradient: linear-gradient(135deg, #7B4FE2 0%, #1E9FC9 50%, #10B981 100%);
  /* Variante assombrie pour le bouton : contraste >= 4.5:1 avec texte blanc (AA). */
  --flerp-gradient-btn: linear-gradient(135deg, #5B2ECC, #14789B, #0B8A61);
  --text-strong: #0F172A;
  --text-muted: #64748B;
  --field-bg: #F8FAFC;
  --field-border: #E2E8F0;
  --focus: #7B4FE2;
  --error: #DC2626;
  --warn: #D97706;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--flerp-gradient);
  min-height: 100vh;
}

/* Motif réseau du logo, très estompé (spec §2 : 5-8 % d'opacité) */
.bg-motif {
  position: fixed;
  inset: 0;
  background: url('/static/img/motif.svg') center / min(70%, 700px) no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* Toggle FR|ES — hors carte, cibles >= 48px, blanc sur zone violette (spec §2/§6) */
.lang-toggle {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
  z-index: 2;
}
.lang-toggle a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.lang-toggle a.active {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lang-toggle a:focus-visible { outline: 2px solid #fff; }

.wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

/* La carte — gabarit réutilisable pour 2FA + choix société (spec §2) */
.card {
  background: #fff;
  max-width: 400px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, .18);
  padding: 36px 32px;
  text-align: center;
}
.logo { width: 120px; height: auto; margin: 0 auto 8px; }
h1 { color: var(--text-strong); font-size: 1.5rem; margin: .25rem 0; }
.subtitle { color: var(--text-muted); margin: 0 0 20px; }

form { text-align: left; }
label {
  display: block;
  color: var(--text-strong);
  font-weight: 600;
  font-size: .9rem;
  margin: 14px 0 6px;
}
input[type=email], input[type=password], input[type=text] {
  width: 100%;
  min-height: 48px;
  font-size: 16px; /* anti-zoom iOS */
  padding: 10px 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  color: var(--text-strong);
}
input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(123, 79, 226, .15);
}
input.input-error { border-color: var(--error); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
#pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  border-radius: 10px;
}
#pw-toggle:focus-visible { outline: 2px solid var(--focus); }

.field-error { color: var(--error); font-size: .85rem; margin: 6px 0 0; }

.forgot { text-align: right; margin: 10px 0 18px; }
.forgot.center { text-align: center; }
.forgot a {
  color: var(--flerp-violet);
  text-decoration: none;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.forgot a:hover { text-decoration: underline; }

.btn-primary {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--flerp-gradient-btn);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-primary:active { opacity: .7; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary:focus-visible { outline: 3px solid rgba(123, 79, 226, .5); outline-offset: 2px; }
.btn-primary.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: -2px;
  animation: flerp-spin .8s linear infinite;
}
@keyframes flerp-spin { to { transform: rotate(360deg); } }

/* Bandeaux d'état — --warn UNIQUEMENT en fond, texte foncé (AA, spec §6) */
.banner {
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .9rem;
  margin-bottom: 8px;
  text-align: left;
}
.banner-error {
  background: rgba(220, 38, 38, .09);
  color: var(--error);
  border: 1px solid rgba(220, 38, 38, .25);
}
.banner-warn {
  background: rgba(217, 119, 6, .10);
  color: #7C4A03;
  border: 1px solid rgba(217, 119, 6, .30);
}

.footer-note { color: var(--text-muted); font-size: .8rem; margin: 18px 0 0; }

/* Écran 2FA : code à 6 chiffres, gros et centré */
input.code-input {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .45em;
  font-weight: 700;
}

/* Écran choix société : une carte-bouton par entreprise */
.soc-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.soc-btn {
  width: 100%;
  min-height: 56px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  padding: 0 16px;
  transition: border-color .15s, box-shadow .15s;
}
.soc-btn:hover, .soc-btn:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(123, 79, 226, .15);
  outline: none;
}
.soc-btn:active { opacity: .7; }

.banner-ok {
  background: rgba(16, 185, 129, .10);
  color: #065F46;
  border: 1px solid rgba(16, 185, 129, .30);
}

@media (max-width: 480px) {
  .card { padding: 28px 20px; }
  .lang-toggle { top: 4px; right: 6px; }
}