/* ===== THEME VARIABLES ===== */

:root {
  --bg-main: #0a0f2c;
  --bg-gradient: linear-gradient(135deg,#0a0f2c,#0d6efd);
  --card-bg: rgba(255,255,255,.05);
  --text-main: #ffffff;
  --text-muted: #adb5bd;
  --input-bg: #ffffff;
  --input-text: #000;
}

[data-theme="light"] {
  --bg-main: #f1f3f5;
  --bg-gradient: linear-gradient(135deg,#eef1f6,#ffffff);
  --card-bg: rgba(255,255,255,.9);
  --text-main: #0a0f2c;
  --text-muted: #6c757d;
  --input-bg: #ffffff;
  --input-text: #000;
}

body.dark [data-theme="dark"] .theme-toggle {
    --toggle-bg: rgba(255,255,255,.15);
    --toggle-color: #ffffff;
}

body.light [data-theme="light"] .theme-toggle {
    --toggle-bg: rgba(0,0,0,.08);
    --toggle-color: #0d6efd; /* ou #111 pour un bleu foncé visible */
}


/* ===== BODY ===== */

body {
  min-height: 100vh;
  margin: 0;
  font-family: 'Inter','Segoe UI',sans-serif;
  background: var(--bg-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}


/* ===== CARD ===== */

.auth-wrapper {
  width: 100%;
  max-width: 1200px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
  background: var(--card-bg);
  backdrop-filter: blur(18px);
}


/* ===== BRAND SIDE ===== */

.brand-side {
  background: linear-gradient(160deg,#0d6efd,#4dabf7);
  color: white;
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
}

.feature {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.feature i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  margin-right: 12px;
}


/* ===== FORM SIDE ===== */

.form-side {
  background: transparent;
  padding: 60px 55px;
}


/* Tabs */

.auth-tabs {
  display: flex;
  background: rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 30px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s;
}

.auth-tab.active {
  background: white;
  color: #0d6efd;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}


/* Forms switch */

.auth-form { display: none; }
.auth-form.active { display: block; }


/* Inputs */

.form-control {
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--input-bg);
  color: var(--input-text);
}


/* Button */

.btn-premium {
  border-radius: 12px;
  padding: 13px;
  font-weight: 600;
  background: linear-gradient(135deg,#0d6efd,#4dabf7);
  border: none;
  color: white;
  transition: .2s;
}

.btn-premium:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(13,110,253,.35);
}


/* Theme toggle */

/* Toggle theme */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    z-index: 10;

    background: var(--toggle-bg);
    color: var(--toggle-color);
}




/* Responsive */

@media (max-width: 991px) {
  .brand-side { display: none; }
  .form-side { padding: 40px 25px; }
}

/* ===== Footer ===== */

.app-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0.9rem;
    padding: 12px 0;
    backdrop-filter: blur(10px);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    z-index: 50;
}

/* Light theme */
body.light-theme .app-footer {
    background: rgba(255, 255, 255, 0.9);
    color: #6c757d;
    border-top: 1px solid #e5e7eb;
}

/* Dark theme */
body.dark-theme .app-footer {
    background: rgba(17, 24, 39, 0.9);
    color: #9ca3af;
    border-top: 1px solid #374151;
}

.footer-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #4f46e5;
}

.footer-separator {
    margin: 0 8px;
    opacity: 0.6;
}