/*
 * AUTH — Premium editorial auth experience
 * social-auth-premium · refonte UI Sprint 1 (plan ok-je-veux-un-snappy-thompson)
 *
 * Cible : login, signup, forgot password, reset password, 2FA verify,
 * magic link request, magic link sent, welcome.
 *
 * Layout : split lg:grid-cols-[1.05fr_1fr] — gauche = form, droite = panneau
 * éditorial (quote ou product). Panneau caché en < lg.
 *
 * Tokens consommés : --accent / --accent-hover / --accent-contrast
 * (themes/accents.css), --bg-canvas / --bg-surface / --bg-surface-hover /
 * --text-primary / --text-secondary / --text-tertiary / --border-default
 * (tokens/design_tokens.css), --font-display = Fraunces (preloaded for
 * devise context in application.html.erb).
 */

/* =============================================================================
   AUTOFILL FIX (Chrome / Safari / Edge / Brave)
   Scoped to .auth-shell to ne PAS affecter les autres forms de l'app (CRM,
   projets) qui peuvent avoir leur propre traitement autofill.
   ============================================================================= */
.auth-shell input:-webkit-autofill,
.auth-shell input:-webkit-autofill:hover,
.auth-shell input:-webkit-autofill:focus,
.auth-shell input:-webkit-autofill:active,
.auth-shell textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

[data-mode="dark"] .auth-shell input:-webkit-autofill,
html.dark .auth-shell input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
}

/* =============================================================================
   LAYOUT — split 1.05fr / 1fr
   ============================================================================= */
.auth-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-canvas, var(--bg-primary));
  color: var(--text-primary);
  position: relative;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .auth-layout {
    grid-template-columns: 1.05fr 1fr;
  }
}

.auth-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 32px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .auth-shell {
    padding: 40px 56px 48px;
  }
}

/* Orb gradient subtil top-right de la shell */
.auth-shell::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle at center, var(--accent-20, hsla(14, 100%, 67%, 0.20)) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Brand + chrome top */
.auth-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.auth-brand:hover { opacity: 0.78; }

.auth-brand img {
  height: 28px;
  width: auto;
}

/* Theme toggle minuscule */
.auth-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.auth-theme-toggle:hover {
  background: var(--bg-surface-hover, var(--bg-hover));
  color: var(--text-primary);
}
.auth-theme-toggle svg { width: 16px; height: 16px; }

/* Form container, centered vertically */
.auth-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-form {
  width: 100%;
  max-width: 440px;
}

/* Footer trust ribbon */
.auth-foot {
  position: relative;
  z-index: 1;
  margin-top: 32px;
}

/* =============================================================================
   PILL — petit badge en haut de l'écran
   ============================================================================= */
.auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.auth-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.auth-pill--accent {
  background: var(--accent-10, hsla(14, 100%, 67%, 0.10));
  border-color: var(--accent-20, hsla(14, 100%, 67%, 0.20));
  color: var(--accent);
}

.auth-pill--success {
  background: hsla(160, 60%, 45%, 0.10);
  border-color: hsla(160, 60%, 45%, 0.25);
  color: hsl(160, 60%, 35%);
}
[data-mode="dark"] .auth-pill--success,
html.dark .auth-pill--success {
  color: hsl(160, 65%, 60%);
}

/* =============================================================================
   TYPOGRAPHY — H1 Fraunces italic
   ============================================================================= */
.auth-h1 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.auth-h1 .accent {
  color: var(--accent);
  font-style: italic;
}

.auth-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 32px;
}

/* =============================================================================
   FIELDS — inputs premium avec icon
   ============================================================================= */
.auth-field {
  margin-bottom: 16px;
}

.auth-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.auth-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.auth-label__action {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.auth-label__action:hover { opacity: 0.78; text-decoration: underline; }

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  display: inline-flex;
}
.auth-input-wrap__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.auth-input {
  width: 100%;
  padding: 13px 14px 13px 44px;
  font-size: 15px;
  line-height: 1.4;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.auth-input::placeholder { color: var(--text-tertiary); }
.auth-input:hover {
  border-color: var(--border-strong, var(--border-default));
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-20, hsla(14, 100%, 67%, 0.20));
}
.auth-input--invalid {
  border-color: hsl(0, 70%, 55%);
}
.auth-input--invalid:focus {
  box-shadow: 0 0 0 4px hsla(0, 70%, 55%, 0.18);
}

/* Eye toggle right side */
.auth-input-reveal {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.auth-input-reveal:hover {
  background: var(--bg-surface-hover, var(--bg-hover));
  color: var(--text-secondary);
}
.auth-input-reveal svg { width: 18px; height: 18px; }

.auth-hint {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: hsl(0, 70%, 50%);
  margin-top: 6px;
}
[data-mode="dark"] .auth-error,
html.dark .auth-error {
  color: hsl(0, 75%, 70%);
}

/* Inline checkbox (Remember me, Terms) */
.auth-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.auth-check input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  margin-top: 2px;
  border-radius: 5px;
  border: 1.5px solid var(--border-default);
  background: var(--bg-surface);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-check input[type="checkbox"]:hover { border-color: var(--accent); }
.auth-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-20, hsla(14, 100%, 67%, 0.20));
}
.auth-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.auth-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--accent-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =============================================================================
   PRIMARY CTA
   ============================================================================= */
.auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--accent-contrast);
  background: var(--accent);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 28px -10px var(--accent);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.auth-cta:hover {
  filter: brightness(0.96);
  box-shadow: 0 12px 32px -10px var(--accent);
}
.auth-cta:active { transform: translateY(1px); }
.auth-cta:disabled,
.auth-cta[aria-busy="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}
.auth-cta svg { width: 16px; height: 16px; }

.auth-cta--soft {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border-default);
  box-shadow: none;
}
.auth-cta--soft:hover {
  background: var(--bg-surface-hover, var(--bg-hover));
  filter: none;
  box-shadow: none;
}

/* =============================================================================
   DIVIDER "ou continuer avec"
   ============================================================================= */
.auth-divider {
  position: relative;
  text-align: center;
  margin: 28px 0;
}
.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-default);
}
.auth-divider span {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  background: var(--bg-canvas, var(--bg-primary));
}

/* =============================================================================
   SECONDARY LINK ("Pas encore de compte ?")
   ============================================================================= */
.auth-link-secondary {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 24px;
}
.auth-link-secondary a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.auth-link-secondary a:hover { text-decoration: underline; }

/* =============================================================================
   TRUST RIBBON FOOTER
   ============================================================================= */
.auth-trust-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 24px;
}
.auth-trust-ribbon span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-trust-ribbon svg {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
}

/* =============================================================================
   PANEL DROIT — variantes quote + product
   ============================================================================= */
.auth-panel {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 56px 48px;
  background:
    radial-gradient(at 80% 18%, hsla(14, 100%, 60%, 0.28) 0%, transparent 55%),
    radial-gradient(at 22% 78%, hsla(187, 70%, 40%, 0.22) 0%, transparent 60%),
    linear-gradient(155deg, oklch(28% 0.04 250) 0%, oklch(20% 0.05 260) 60%, oklch(15% 0.06 270) 100%);
  color: #FFFFFF;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .auth-panel { display: flex; flex-direction: column; }
}

/* Glyph " géant Fraunces en arrière-plan */
.auth-panel::before {
  content: "\201C";
  position: absolute;
  top: -120px;
  left: -40px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 500;
  font-size: 560px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.auth-panel__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
}

.auth-panel__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.auth-panel__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.auth-panel__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-quote {
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 36px;
  max-width: 520px;
}
.auth-quote em {
  font-style: italic;
  color: var(--accent);
}

.auth-quote-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 520px;
}

.auth-quote-author__person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-quote-author__avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, hsl(187, 70%, 48%) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.auth-quote-author__name {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
}
.auth-quote-author__role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 2px 0 0;
}

.auth-quote-author__stars {
  display: inline-flex;
  gap: 2px;
  color: #FFD166;
}
.auth-quote-author__stars svg { width: 14px; height: 14px; }

/* KPI strip bottom */
.auth-kpi-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-kpi {
  text-align: left;
}
.auth-kpi__value {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: #FFFFFF;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.auth-kpi__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

/* Panel "product" variant : mini showcase IA */
.auth-panel--product .auth-panel__h {
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0 0 16px;
  max-width: 480px;
}
.auth-panel--product .auth-panel__h em {
  font-style: italic;
  color: var(--accent);
}

.auth-panel--product .auth-panel__lead {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 32px;
  max-width: 440px;
}

.auth-showcase {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px 22px;
  max-width: 440px;
}

.auth-showcase__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.auth-showcase__title {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  margin: 0;
}

.auth-showcase__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.auth-showcase__meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: hsl(160, 60%, 50%);
  box-shadow: 0 0 8px hsl(160, 60%, 50%);
  animation: auth-pulse 1.8s ease-in-out infinite;
}

@keyframes auth-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.auth-showcase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-showcase__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.auth-showcase__list li.is-pending {
  color: rgba(255, 255, 255, 0.4);
}

.auth-showcase__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  background: hsl(160, 60%, 45%);
  color: #FFFFFF;
}
.auth-showcase__check svg { width: 11px; height: 11px; }

.auth-showcase__check--pending {
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
}

/* Panel footer pour trust badges côté product variant */
.auth-panel__trust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 40px;
}

/* =============================================================================
   OTP — 6 boîtes pour 2FA verify
   ============================================================================= */
.auth-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-width: 380px;
  margin: 0 0 24px;
}

.auth-otp-box {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 64px;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  outline: none;
  caret-color: var(--accent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  padding: 0;
}
.auth-otp-box:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-20, hsla(14, 100%, 67%, 0.20));
}
.auth-otp-box.is-filled {
  background: var(--accent-10, hsla(14, 100%, 67%, 0.10));
  border-color: var(--accent);
}

/* Hide native number arrows */
.auth-otp-box::-webkit-outer-spin-button,
.auth-otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =============================================================================
   ENCART ASTUCE (magic link suggestion, 2FA backup)
   ============================================================================= */
.auth-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--border-default);
  background: var(--accent-5, hsla(14, 100%, 67%, 0.05));
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 20px;
}
.auth-tip__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-top: 1px;
}
.auth-tip strong {
  color: var(--text-primary);
  font-weight: 600;
}
.auth-tip a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.auth-tip a:hover { text-decoration: underline; }

/* =============================================================================
   STATE BLOCKS — error / info / success cards above form
   ============================================================================= */
.auth-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.auth-flash--error {
  background: hsla(0, 70%, 55%, 0.08);
  border: 1px solid hsla(0, 70%, 55%, 0.2);
  color: hsl(0, 65%, 40%);
}
.auth-flash--success {
  background: hsla(160, 60%, 45%, 0.08);
  border: 1px solid hsla(160, 60%, 45%, 0.2);
  color: hsl(160, 60%, 30%);
}
[data-mode="dark"] .auth-flash--error,
html.dark .auth-flash--error { color: hsl(0, 75%, 75%); }
[data-mode="dark"] .auth-flash--success,
html.dark .auth-flash--success { color: hsl(160, 65%, 65%); }

.auth-flash svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.auth-flash ul { margin: 4px 0 0; padding-left: 18px; }

/* =============================================================================
   BACK LINK ("← Retour à la connexion")
   ============================================================================= */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s ease;
}
.auth-back:hover { color: var(--text-primary); }
.auth-back svg { width: 14px; height: 14px; }

/* =============================================================================
   ICON HERO (forgot lock icon, welcome wave)
   ============================================================================= */
.auth-iconbox {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-10, hsla(14, 100%, 67%, 0.10));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.auth-iconbox svg { width: 28px; height: 28px; }

.auth-iconbox--lg {
  width: 88px;
  height: 88px;
  border-radius: 22px;
}
.auth-iconbox--lg svg { width: 36px; height: 36px; }

/* Wave emoji "Welcome" */
.auth-wave {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  animation: auth-wave 1.8s ease-in-out infinite;
  display: inline-block;
  transform-origin: 70% 70%;
}
@keyframes auth-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* =============================================================================
   MAGIC LINK SENT — steps card
   ============================================================================= */
.auth-steps {
  list-style: none;
  margin: 24px 0 16px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.auth-steps__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-surface-hover, var(--bg-hover));
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
}
.auth-steps li.is-done .auth-steps__num {
  background: hsl(160, 60%, 45%);
  border-color: hsl(160, 60%, 45%);
  color: #FFFFFF;
}
.auth-steps li.is-current .auth-steps__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.auth-steps__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.auth-steps__sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 2px 0 0;
}

/* =============================================================================
   WELCOME — quick setup cards
   ============================================================================= */
.auth-quick-setup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.auth-quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-quick-card:hover {
  border-color: var(--accent);
  background: var(--accent-5, hsla(14, 100%, 67%, 0.05));
}

.auth-quick-card__num {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.auth-quick-card__body {
  flex: 1;
  min-width: 0;
}
.auth-quick-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.auth-quick-card__sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}
.auth-quick-card__time {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.auth-quick-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-surface-hover, var(--bg-hover));
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =============================================================================
   PASSWORD STRENGTH METER (réutilisé du controller existant, on style ici)
   ============================================================================= */
.auth-strength {
  margin-top: 8px;
}
.auth-strength__bars {
  display: flex;
  gap: 6px;
}
.auth-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border-default);
  transition: background 0.2s ease;
}
.auth-strength__bar.is-weak { background: hsl(0, 75%, 60%); }
.auth-strength__bar.is-fair { background: hsl(30, 90%, 60%); }
.auth-strength__bar.is-good { background: hsl(48, 95%, 55%); }
.auth-strength__bar.is-strong { background: hsl(160, 60%, 45%); }
.auth-strength__label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.auth-strength__label--strong { color: hsl(160, 60%, 40%); }
[data-mode="dark"] .auth-strength__label--strong,
html.dark .auth-strength__label--strong { color: hsl(160, 65%, 60%); }

/* =============================================================================
   SOCIAL GRID — surcharge légère du composant oauth_buttons existant
   pour matcher le visuel du brief (grid 3 colonnes plus serré)
   ============================================================================= */
.auth-shell .oauth-buttons {
  margin-top: 0;
}
@media (min-width: 640px) {
  .auth-shell .oauth-buttons[data-layout="grid"] {
    grid-template-columns: repeat(3, 1fr);
  }
}
.auth-shell .oauth-btn {
  border-radius: 10px;
  border-width: 1.5px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
}

/* =============================================================================
   FORM ACTIONS (CTA + sub-CTA below)
   ============================================================================= */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}