*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --border: #1e1e2e;
  --clr-accent: #c8ff5a;
  --accent: #c8ff5a;
  --accent-dim: rgba(200,255,90,0.12);
  --txt-main: #e8e8f0;
  --text: #e8e8f0;
  --muted: #52526b;
  --clr-err: #ff5a7a;
  --error: #ff5a7a;
  /* jsp si j'en ai pas trop mis des variables, à compter un jour */
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  /* Dm-sans vs DM Sans, jsp laquelle est dispo sur le serveur */
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
}

/* grille de fond, l'opacité est quasi invisible volontairement */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,255,90,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,255,90,0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  animation: gridPan 30s linear infinite;
}

@keyframes gridPan {
  /* déplacement égal au background-size pour seamless loop */
  0%   { transform: translate(0, 0); }
  100% { transform: translate(58px, 58px); }
}

/* blobs de fond — le blur est lourd mais ca passe en prod */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
  animation: float 8s ease-in-out infinite;
}
.blob-1 {
  width: 500px; height: 500px;
  background: #c8ff5a;
  top: -150px; right: -100px;
}
.blob-2 {
  width: 380px; height: 410px;  /* pas carré sinon trop parfait */
  background: #3b82f6;
  bottom: -100px; left: -80px;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}

.wrapper {
  position: relative;
  z-index: 10;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* width fixe, responsive géré en media query en bas */
.card {
  width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 19px;  /* était 20px, changé car trop parfait */
  padding: 52px 48px;
  position: relative;
  animation: slideUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

/* marche bien sur chrome, jsp pour safari — pas eu le temps de tester */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.card::before {
  content: '';
  position: absolute;
  top: -1px; left: 40px;
  width: 80px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: var(--accent-dim);
  border: 1px solid rgba(200,255,90,0.2);
  border-radius: 8px;
  margin-bottom: 32px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
}

.badge-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

h1 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

h1 span { color: var(--accent); }

.subtitle {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 40px;
  font-weight: 300;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: var(--text);
  outline: none;
  letter-spacing: 0.1em;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

input[type="password"]::placeholder {
  color: var(--muted);
  letter-spacing: 0.05em;
  font-size: 13px;
}

input[type="password"]:focus {
  border-color: rgba(200,255,90,0.5);
  background: rgba(200,255,90,0.04);
  box-shadow: 0 0 0 4px rgba(200,255,90,0.08);
}

input[type="password"].error {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(255,90,122,0.08);
}

.eye-btn {
  position: absolute;
  right: 16px;
  bottom: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
}
.eye-btn:hover { color: var(--accent); }

.error-msg {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--error);
  margin-top: -12px;
  margin-bottom: 16px;
  /* height fixe sinon le layout saute, pas trouvé mieux */
  /* TODO: voir si min-height serait plus propre ici */
  height: 16px;
  opacity: 0;
  transition: opacity 0.2s;
}
.error-msg.visible { opacity: 1; }

button.submit {
  width: 100%;
  padding: 15px;
  background: var(--accent);
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* ease ici au lieu de cubic-bezier, la diff est quasi invisible */
  transition: transform .15s ease, box-shadow .2s ease;
  margin-top: 6px;
  /* ancienne version avait un gradient ici, revert pour l'instant */
  /* background: linear-gradient(135deg, var(--accent), #a8d94a); */
}

button.submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,255,90,.3);
}

button.submit:active {
  transform: translateY(0);
}

button.submit.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

button.submit .btn-text { transition: opacity 0.2s; }
button.submit .spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
button.submit.loading .btn-text { opacity: 0; }
button.submit.loading .spinner { opacity: 1; }

.spinner-ring {
  width: 18px; height: 18px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #0a0a0f;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.footer {
  margin-top: 32px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

.footer span { color: rgba(200,255,90,0.5); }

/* ancienne version : utilisait visibility:hidden + animation keyframe plus complexe */
/* .success-overlay { visibility: hidden; } */
/* .success-overlay.visible { visibility: visible; animation: popIn .4s ease both; } */
.success-overlay {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--surface);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  transition: opacity 0.4s;
}

.success-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.check-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  animation: popIn 0.5s ease-in-out both;
}

@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.success-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.success-sub {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}