/* ── Shared auth background ── */
body {
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

/* ── Login page ── */
.auth-wrap {
  max-width: 340px;
  transition: max-width 0.2s ease;
}
.auth-wrap.mode-signup {
  max-width: 460px;
}

/* /logo-full.svg — the master composition, wordmark and construction grid
   included. At 200px wide the whole thing reads, which is what the brand block
   above a form wants. (verify.html uses /logo.svg, the mark on its own.) */
.pm-lockup {
  width: 200px;
  height: auto;
}

.auth-card {
  background: var(--cream-surf);
  border: 1px solid var(--border-warm);
  box-shadow: 0 4px 28px rgba(28,26,23,0.07);
}

.auth-tab {
  font-family: var(--mono) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.auth-tab.border-emerald-700 { border-color: var(--emerald) !important; }
.auth-tab.text-emerald-700   { color: var(--emerald) !important; }
.auth-tab.text-gray-500      { color: var(--warm-gray) !important; }

#email-input,
#password-input,
#password-confirm,
#first-name-input,
#last-name-input,
#country-input,
#postal-code-input,
#forgot-email {
  background: var(--cream) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: 0 !important;
  color: var(--charcoal) !important;
  font-family: var(--sans) !important;
}
#email-input:focus,
#password-input:focus,
#password-confirm:focus,
#first-name-input:focus,
#last-name-input:focus,
#country-input:focus,
#postal-code-input:focus,
#forgot-email:focus {
  border-color: var(--emerald) !important;
  outline: none !important;
}

#country-input {
  appearance: none !important;
  padding-right: 26px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--warm-gray) 50%),
                    linear-gradient(135deg, var(--warm-gray) 50%, transparent 50%) !important;
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* Signup-only consent checkboxes (CGU/politique de confidentialité, newsletter) */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--charcoal);
  cursor: pointer;
}
.auth-check input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--border-warm);
  border-radius: 3px;
  background: var(--cream);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-check input[type="checkbox"]::after {
  content: '';
  width: 4px;
  height: 7px;
  border: solid var(--white);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform 0.12s ease;
}
.auth-check input[type="checkbox"]:hover { border-color: var(--emerald); }
.auth-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43,106,100,0.16);
}
.auth-check input[type="checkbox"]:checked {
  border-color: var(--emerald);
  background: var(--emerald);
}
.auth-check input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.auth-check a { color: var(--emerald); }
.auth-check a:hover { text-decoration: underline; }

#submit-btn,
#forgot-submit {
  background: var(--emerald) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-md) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}
#submit-btn:hover:not(:disabled),
#forgot-submit:hover:not(:disabled) { background: var(--emerald-dark) !important; }
#submit-btn:disabled,
#forgot-submit:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }

#auth-error,
#forgot-error {
  border-radius: 0 !important;
  font-size: var(--fs-md) !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border: 1px solid rgba(220,38,38,0.2) !important;
}

#resend-btn {
  color: var(--emerald) !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.1em !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}
#resend-btn:hover { text-decoration: underline !important; }
#resend-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

#password-hint { color: var(--warm-gray) !important; }

/* Text-only secondary actions ("Mot de passe oublié ?", "Retour à la connexion") */
.auth-link {
  color: var(--emerald) !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.1em !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.auth-link:hover { text-decoration: underline !important; }
.auth-link.hidden { display: none !important; }

/* ── Verify page ── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.9s linear infinite; }

.auth-card a, #email-sent a { color: var(--emerald); font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; }
.auth-card a:hover, #email-sent a:hover { text-decoration: underline; }