/* ============================================================
   DjibContact - Pages auth (login, register, reset)
   ============================================================ */

.auth {
  min-height: calc(100vh - 68px);
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(circle at 20% 10%, rgba(8,145,178,0.1), transparent 40%),
              radial-gradient(circle at 80% 90%, rgba(124,58,237,0.1), transparent 40%),
              #f8fafc;
}

.auth__card {
  width: 100%; max-width: 520px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
}

.auth__head { margin-bottom: 28px; text-align: center; }
.auth__head h1 { font-size: 1.6rem; margin-bottom: 6px; color: #0f172a;}
.auth__head p { color: #475569; margin: 0; font-size: 0.95rem; }

/* Boutons radio côte à côte */
.radio-cards { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 12px; 
}
.radio-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px; border: 2px solid #e2e8f0;
  border-radius: 12px; cursor: pointer; transition: all 0.2s;
}
.radio-card input { display: none; }
.radio-card__icon { font-size: 1.5rem; }
.radio-card__label { font-weight: 600; color: #64748b; }
.radio-card:hover { border-color: #94a3b8; }
.radio-card:has(input:checked) {
  border-color: #0891b2;
  background: rgba(8,145,178,0.05);
  box-shadow: 0 0 0 4px rgba(8,145,178,0.15);
}
.radio-card:has(input:checked) .radio-card__label { color: #0891b2; }

/* Formulaires */
.form { display: flex; flex-direction: column; gap: 16px; }
.form__group { display: flex; flex-direction: column; gap: 6px; }
.form__group label { font-weight: 600; font-size: 0.9rem; color: #0f172a; }
.form__group input, .form__group select, .form__group textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit;
}
.form__group input:focus { outline: none; border-color: #0891b2; box-shadow: 0 0 0 4px rgba(8,145,178,0.12); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__hint { font-size: 0.8rem; color: #94a3b8; }

.btn--primary { background: #0891b2; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn--primary:hover { background: #0e7490; }
.btn--block { width: 100%; }

@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
}