/* SLE-T7-empty-state — canonical empty-state pattern per campscout v2.
 *
 * Generic empty:
 *   <div class="empty">
 *     <div class="empty-icon">📭</div>
 *     <p>Aucune activité.</p>
 *   </div>
 *
 * Rich "first-run" empty (e.g., zero camps, zero recipes):
 *   <div class="empty-camp">
 *     <div class="empty-camp-icon">🏕️</div>
 *     <h2 class="empty-camp-title">Créez votre premier camp</h2>
 *     <p class="empty-camp-body">…</p>
 *     <div class="empty-camp-actions">
 *       <button class="btn-g btn-md">+ Nouveau camp</button>
 *     </div>
 *     <p class="empty-camp-hint">Un camp regroupe vos activités…</p>
 *   </div>
 *
 * Depends on tokens.css.
 */

/* Generic terse empty. */
.empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--g4);
}
.empty-icon {
  font-size: 2.2rem;
  margin-bottom: 0.65rem;
}
.empty p,
.empty-message,
.empty-body {
  font-size: var(--fs-md);
  line-height: 1.6;
}
.empty-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--bk);
  margin-bottom: 0.4rem;
}

/* Rich first-run empty card. */
.empty-camp {
  grid-column: 1 / -1;
  background: var(--wh);
  border: 1px dashed var(--g3);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.empty-camp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 0%,
    rgb(var(--y-rgb) / 8%),
    transparent 60%
  );
  pointer-events: none;
}
.empty-camp-icon {
  font-size: 2.6rem;
  margin-bottom: 0.8rem;
  display: inline-block;
  animation: empty-drift 4s ease-in-out infinite;
}
.empty-camp-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--bk);
  margin-bottom: 0.4rem;
}
.empty-camp-body {
  font-size: var(--fs-md);
  color: var(--g4);
  line-height: 1.55;
  max-width: 32rem;
  margin: 0 auto 1.6rem;
}
.empty-camp-actions {
  display: inline-flex;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  justify-content: center;
}
.empty-camp-hint {
  margin-top: 1.4rem;
  font-size: var(--fs-xs);
  color: var(--g4);
  font-style: italic;
  letter-spacing: 0.01em;
}

@keyframes empty-drift {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-camp-icon { animation: none; }
}