/* ═══════════════════════════════════════════════
   ExpiraHub — auth.css
   Design: Noir profond · Vert jade · Typographie Sora
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── Reset & Base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:        #0A0A0B;
  --surface:      #111114;
  --surface2:     #18181D;
  --surface3:     #222228;
  --border:       #2A2A32;
  --border2:      #353540;
  --jade:         #1D9E75;
  --jade-light:   #25C490;
  --jade-dim:     #0F6E56;
  --jade-glow:    rgba(29,158,117,.15);
  --red:          #E24B4A;
  --amber:        #EF9F27;
  --text:         #F0EEE8;
  --text2:        #9A9899;
  --text3:        #5E5D62;
  --font:         'Sora', sans-serif;
  --mono:         'DM Mono', monospace;
  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --trans:        .18s cubic-bezier(.4,0,.2,1);
}

html, body {
  min-height: 100vh;
  font-family: var(--font);
  background: var(--black);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bruit de fond discret */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(29,158,117,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(29,158,117,.05) 0%, transparent 55%);
}

/* ── Layout auth ────────────────────────────────── */
.auth-container {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.25rem;
  position: relative;
  overflow: hidden;
}

/* Ligne jade en haut */
.auth-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
}

/* ── Brand ─────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: 10px;
  justify-content: center; margin-bottom: 2rem;
  text-decoration: none;
}

.brand-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--jade-glow);
  border: 1px solid var(--jade-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--jade-light); font-size: 20px;
}

.brand-name {
  font-size: 22px; font-weight: 700; letter-spacing: -.5px;
  color: var(--text);
}

.brand-accent { color: var(--jade-light); }

/* ── Tabs ───────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
  margin-bottom: 1.5rem;
}

.tab {
  flex: 1; padding: 8px 12px;
  background: transparent; border: none; outline: none;
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  color: var(--text2); border-radius: 7px;
  cursor: pointer; transition: var(--trans);
}

.tab:hover { color: var(--text); }

.tab.active {
  background: var(--surface3);
  color: var(--jade-light);
  border: 1px solid var(--border2);
}

/* ── Bouton Google ─────────────────────────────── */
.btn-google {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  padding: 11px 16px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font);
  font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: var(--trans);
}

.btn-google:hover {
  background: var(--surface3);
  border-color: var(--jade-dim);
  color: var(--text);
}

/* ── Divider ────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 1.25rem 0; color: var(--text3); font-size: 12px;
}
.divider::before,
.divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Fields ─────────────────────────────────────── */
.field { margin-bottom: 1rem; }

.field label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text2); margin-bottom: 6px; letter-spacing: .01em;
}

.field input,
.field select,
.field textarea {
  width: 100%; padding: 11px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font); font-size: 14px;
  outline: none; transition: var(--trans);
  -webkit-appearance: none; appearance: none;
}

.field input::placeholder { color: var(--text3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px var(--jade-glow);
}

/* ── Mot de passe ───────────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text3);
  cursor: pointer; font-size: 16px; padding: 4px;
  transition: color var(--trans);
}
.pw-eye:hover { color: var(--text); }

/* ── Strength bar ──────────────────────────────── */
.strength-track {
  height: 3px; background: var(--border);
  border-radius: 10px; margin-top: 6px; overflow: hidden;
}
.strength-bar {
  height: 100%; width: 0;
  border-radius: 10px; transition: width .4s, background .4s;
}
.strength-label {
  font-size: 11px; color: var(--text3); margin-top: 4px;
  display: block;
}

/* ── Bouton primary ─────────────────────────────── */
.btn-primary {
  width: 100%; padding: 12px;
  background: var(--jade);
  border: none; border-radius: var(--radius-sm);
  color: #fff; font-family: var(--font);
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: var(--trans);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: .01em; margin-top: .5rem;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--jade-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(29,158,117,.25);
}

.btn-primary:active { transform: translateY(0); }

.btn-primary:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* ── Bouton secondary ──────────────────────────── */
.btn-secondary {
  padding: 11px 20px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text2); font-family: var(--font);
  font-size: 14px; font-weight: 500;
  cursor: pointer; transition: var(--trans);
  display: inline-flex; align-items: center; gap: 8px;
}

.btn-secondary:hover { background: var(--surface3); color: var(--text); }

/* ── Alertes ────────────────────────────────────── */
.alert {
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-top: .75rem; line-height: 1.5;
}

.alert-error {
  background: rgba(226,75,74,.1);
  border: 1px solid rgba(226,75,74,.25);
  color: #F5A09F;
}

.alert-success {
  background: rgba(29,158,117,.1);
  border: 1px solid rgba(29,158,117,.25);
  color: var(--jade-light);
}

/* ── Lien small ─────────────────────────────────── */
.link-small {
  display: block; text-align: center; margin-top: 1rem;
  font-size: 13px; color: var(--text3);
  text-decoration: none; transition: color var(--trans);
}
.link-small:hover { color: var(--jade-light); }

.link-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font); font-size: 13px;
  color: var(--jade-light); text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── OTP step ───────────────────────────────────── */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  color: var(--text3); font-family: var(--font); font-size: 13px;
  cursor: pointer; padding: 0; margin-bottom: 1.5rem;
  transition: color var(--trans);
}
.back-btn:hover { color: var(--jade-light); }

.otp-header { text-align: center; margin-bottom: 1.75rem; }
.otp-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--jade-glow); border: 1px solid var(--jade-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--jade-light); font-size: 26px;
  margin: 0 auto 1rem;
}
.otp-header h2 { font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.otp-header p { font-size: 13.5px; color: var(--text2); line-height: 1.5; }

.otp-boxes {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 1.25rem;
}

.otp-box {
  width: 48px; height: 56px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; text-align: center;
  color: var(--text); font-family: var(--mono); font-size: 22px; font-weight: 500;
  outline: none; transition: var(--trans);
}

.otp-box:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px var(--jade-glow);
}

.otp-sep { color: var(--text3); font-size: 18px; }

.resend-row {
  text-align: center; font-size: 13px;
  color: var(--text2); margin-top: 1rem;
}
.resend-timer { color: var(--text3); font-size: 12px; margin-left: 4px; }

/* ── Step success ───────────────────────────────── */
.success-wrap { text-align: center; padding: 1rem 0; }
.success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(29,158,117,.15);
  border: 2px solid var(--jade);
  display: flex; align-items: center; justify-content: center;
  color: var(--jade-light); font-size: 28px;
  margin: 0 auto 1.25rem; animation: pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-wrap h2 { font-size: 20px; font-weight: 600; margin-bottom: .5rem; }
.success-wrap p { font-size: 14px; color: var(--text2); margin-bottom: 1rem; }
.badge-success {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 30px;
  background: rgba(29,158,117,.1); border: 1px solid rgba(29,158,117,.25);
  color: var(--jade-light); font-size: 12px; font-weight: 500;
}

/* ── Step visibility ────────────────────────────── */
.step { display: block; }

/* ── Required star ──────────────────────────────── */
.required { color: var(--red); }

/* ── Reminder chips ─────────────────────────────── */
.reminder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reminder-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 12.5px; color: var(--text2);
  cursor: pointer; transition: var(--trans); user-select: none;
}
.reminder-chip input { display: none; }
.reminder-chip:has(input:checked) {
  background: var(--jade-glow);
  border-color: var(--jade-dim);
  color: var(--jade-light);
}

/* ── Color picker ───────────────────────────────── */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch input { display: none; }
.color-swatch span {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; border: 3px solid transparent; transition: all .15s;
}
.color-swatch input:checked + span { border-color: var(--text); transform: scale(1.18); }

/* ── Icon picker ────────────────────────────────── */
.icon-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-swatch input { display: none; }
.icon-swatch span {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); cursor: pointer;
  font-size: 17px; color: var(--text2); transition: all .15s;
}
.icon-swatch input:checked + span {
  border-color: var(--jade);
  background: var(--jade-glow);
  color: var(--jade-light);
}