/* auth.css - Commun login/signup */

/* Couleurs Ratio exactes */
:root {
  --primary: #7a9aff;     /* Bleu principal */
  --accent: #ffc857;      /* Jaune accent */
  --success: #10b981;     /* Vert success */
  --text: #1a202c;        /* Texte sombre */
  --bg: #f8fafc;          /* Fond clair */
  --card: #ffffff;        /* Carte blanche */
  --border: rgba(18,26,51,0.1);
  --muted: #64748b;       /* Texte atténué */
}

/* Fond commun */
body[data-page="login"],
body[data-page="signup"] {
  background: linear-gradient(135deg, var(--bg) 0%, #f8fbff 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Cards communes */
body[data-page="login"] .loginCard,
body[data-page="signup"] .signupCard {
  max-width: 400px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 40px 32px;
}

/* Headers centrés identiques */
body[data-page="login"] .loginHeader,
body[data-page="signup"] .signupHeader {
  text-align: center;
  margin-bottom: 32px;
}

body[data-page="login"] .loginHeader h1,
body[data-page="signup"] .signupHeader h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
}

body[data-page="login"] .loginHeader p,
body[data-page="signup"] .signupHeader p {
  color: var(--muted);
  margin: 0;
  font-size: 0.8rem;
}

/* Pleine largeur universelle */
body[data-page="login"] .full-width-input,
body[data-page="signup"] .full-width-input {
  width: 100%;
  margin-bottom: 16px;
}

body[data-page="login"] .full-width-input input,
body[data-page="login"] .full-width-input .btn,
body[data-page="signup"] .full-width-input input,
body[data-page="signup"] .full-width-input .btn {
  width: 100%;
  box-sizing: border-box;
}

body[data-page="login"] .full-width-input:last-child,
body[data-page="signup"] .full-width-input:last-child {
  margin-bottom: 0;
}

/* Inputs identiques */
body[data-page="login"] input,
body[data-page="signup"] input {
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.2s;
}

body[data-page="login"] input:focus,
body[data-page="signup"] input:focus {
  border-color: var(--accent);
  background: white;
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,200,87,0.15);
}

/* Boutons identiques */
body[data-page="login"] .btn--primary,
body[data-page="signup"] .btn--primary {
  height: 52px;
  background: linear-gradient(135deg, #a2e0bf 0%, #7aae92 100%);
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgb(169 215 190 / 40%);
  transition: all 0.2s;
}

body[data-page="login"] .btn--primary:hover,
body[data-page="signup"] .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(122,154,255,0.4);
}

body[data-page="login"] .btn--google,
body[data-page="signup"] .btn--google {
  background: white;
  border: 1px solid var(--border);
  color: var(--text);
  height: 52px;
  border-radius: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s ease;
}

body[data-page="login"] .btn--google:hover,
body[data-page="signup"] .btn--google:hover {
  border-color: var(--accent);
  background: rgba(255,200,87,0.05);
  transform: translateY(-1px);
}

/* Séparateur OR commun */
body[data-page="login"] .orDivider,
body[data-page="signup"] .orDivider {
  text-align: center;
  margin: 24px 0;
  position: relative;
  color: var(--muted);
}

body[data-page="login"] .orDivider::before,
body[data-page="signup"] .orDivider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--border);
  z-index: 1;
}

body[data-page="login"] .orDivider span,
body[data-page="signup"] .orDivider span {
  background: #fff;
  padding: 8px 24px;
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
}

/* Mot de passe oublié (login uniquement) */
body[data-page="login"] .forgot-password {
  display: block;
  margin-top: 8px;
  text-align: right;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}

body[data-page="login"] .forgot-password:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Footers */
body[data-page="login"] .loginFooter,
body[data-page="signup"] .signupFooter {
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

body[data-page="login"] .loginFooter p,
body[data-page="signup"] .signupFooter p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

body[data-page="login"] .loginFooter a,
body[data-page="signup"] .signupFooter a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

body[data-page="login"] .loginFooter a:hover,
body[data-page="signup"] .signupFooter a:hover {
  text-decoration: underline;
}

/* Messages */
body[data-page="login"] #msg.small,
body[data-page="signup"] #msg.small {
  text-align: center;
  margin-top: 16px;
}

/* Mobile commun */
@media (max-width: 640px) {
  body[data-page="login"] .loginCard,
  body[data-page="signup"] .signupCard {
    margin: 0;
    border-radius: 24px;
    padding: 26px 19px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  }
  
  body[data-page="login"] input,
  body[data-page="login"] .btn,
  body[data-page="signup"] input,
  body[data-page="signup"] .btn {
    height: 56px;
    font-size: 1rem;
    padding: 18px 16px;
  }
  
  body[data-page="login"] .loginHeader h1,
  body[data-page="signup"] .signupHeader h1 {
    font-size: 1.6rem;
  }
  
  body[data-page="login"] .forgot-password {
    font-size: 0.7rem;
  }
  
  body[data-page="login"] .orDivider,
  body[data-page="signup"] .orDivider {
    margin: 15px 0;
  }

  
  .logoSquare {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
}

.logoSquareImg {
  width: 44px;
  height: 44px;
}

.container {
  padding: 0px !important;
}
}

/* Logo carré signup */
.logoSquare {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  overflow: hidden;
}

.logoSquareImg {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Ajustement header avec logo */
.signupHeader {
  margin-bottom: 32px;
  margin-top: -8px; /* Compact avec logo */
}