/* ==========================================================================
   Login / Signup
   ========================================================================== */
.auth-shell{
  min-height: calc(100vh - var(--nav-height));
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-5);
}
.auth-card{ width: 100%; max-width: 400px; }
.auth-card h1{ font-size: 24px; margin-bottom: var(--space-2); text-align: center; }
.auth-card .sub{ text-align: center; color: var(--text-dim); font-size: 13.5px; margin-bottom: var(--space-6); }
.auth-switch{ text-align: center; margin-top: var(--space-5); font-size: 13.5px; color: var(--text-dim); }
.auth-switch a{ color: var(--green); font-weight: 500; }
.auth-error{ margin-bottom: var(--space-4); }

/* Inscription — panneau visuel + formulaire, plus engageant qu'une carte seule */
.auth-split{
  min-height: calc(100vh - var(--nav-height));
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){ .auth-split{ grid-template-columns: 1fr; } }

.auth-visual{
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: radial-gradient(ellipse 70% 60% at 20% 20%, rgba(24,200,117,0.16), transparent 70%), var(--black);
  border-right: 1px solid var(--line);
}
@media (max-width: 900px){ .auth-visual{ border-right: none; border-bottom: 1px solid var(--line); padding: var(--space-6) var(--space-5); } }
.auth-visual-mark{ width: 44px; height: 44px; margin-bottom: var(--space-2); }
.auth-visual-mark .brand-logo{ width: 100%; height: 100%; object-fit: contain; }
.auth-visual h2{ font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.01em; max-width: 420px; }
.auth-visual p{ color: var(--text-dim); font-size: 14.5px; max-width: 400px; }
.auth-visual-list{ list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: 10px; }
.auth-visual-list li{
  font-size: 13.5px; color: var(--text-dim); padding-left: 24px; position: relative;
}
.auth-visual-list li::before{
  content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700;
}

.auth-form-side{ display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5); }
.auth-form-side .auth-card{ width: 100%; max-width: 420px; }
.auth-form-side .auth-card h1{ font-size: 26px; margin-bottom: var(--space-2); text-align: left; }
.auth-form-side .auth-card .sub{ text-align: left; color: var(--text-dim); font-size: 13.5px; margin-bottom: var(--space-6); }

/* Sélection de catégories en chips — plus rapide et plus léger qu'une grille de cases à cocher */
.chip-select{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-select .category-chip.active{ background: var(--green); border-color: var(--green); color: var(--black); }