* { -webkit-tap-highlight-color: transparent; }
input, textarea, button { -webkit-appearance: none; }
textarea { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — tokens unifiés (couleurs, radius, spacing, container)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --nl-bg:           #030712;
  --nl-surface:      #111827;
  --nl-surface-2:    #1f2937;
  --nl-border:       #1f2937;
  --nl-border-soft:  rgba(31,41,55,0.6);
  /* Accents */
  --nl-accent:       #7c3aed;
  --nl-accent-soft:  #a78bfa;
  --nl-accent-bg:    rgba(124,58,237,0.15);
  /* Sémantique */
  --nl-success:      #34d399;
  --nl-warning:      #fbbf24;
  --nl-danger:       #f87171;
  /* Texte */
  --nl-text:         #f9fafb;
  --nl-text-mute:    #9ca3af;
  --nl-text-dim:     #6b7280;
  /* Radius */
  --nl-radius-sm:    0.625rem;   /* 10px */
  --nl-radius-md:    1rem;       /* 16px */
  --nl-radius-lg:    1.25rem;    /* 20px */
  /* Layout */
  --nl-nav-h:        3.5rem;     /* 56px */
  --nl-bottom-nav-h: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}

/* ─── Container adaptatif ───
   Mobile : 672px (équivalent à l'ancien max-w-2xl)
   Tablette ≥768px : 768px
   Desktop ≥1024px : 1100px (Mac peut respirer)
*/
.nl-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 42rem;            /* 672px ≃ max-w-2xl */
}
@media (min-width: 768px) {
  .nl-container { max-width: 48rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 1024px) {
  .nl-container { max-width: 68.75rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1280px) {
  .nl-container { max-width: 78rem; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1536px) {
  .nl-container { max-width: 86rem; }
}

/* ─── Card ───────────────────────────────────────────────────────── */
.nl-card {
  background: var(--nl-surface);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-md);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.nl-card.is-link { cursor: pointer; }
.nl-card.is-link:hover { border-color: var(--nl-text-dim); }
.nl-card.is-link:active { transform: scale(0.985); }

/* ─── Button ─────────────────────────────────────────────────────── */
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.nl-btn:active { transform: scale(0.97); }
.nl-btn-primary { background: var(--nl-accent); color: #fff; }
.nl-btn-primary:hover { background: #6d28d9; }
.nl-btn-secondary { background: var(--nl-surface); color: var(--nl-text-mute); border-color: var(--nl-border); }
.nl-btn-secondary:hover { color: var(--nl-text); border-color: var(--nl-text-dim); }

/* ─── Badge ──────────────────────────────────────────────────────── */
.nl-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.55rem; border-radius: 9999px;
  font-size: 0.7rem; font-weight: 700;
  background: var(--nl-surface-2); color: var(--nl-text-mute);
}
.nl-badge-accent { background: var(--nl-accent-bg); color: var(--nl-accent-soft); }
.nl-badge-danger { background: rgba(220,38,38,0.18); color: var(--nl-danger); }
.nl-badge-success { background: rgba(52,211,153,0.12); color: #6ee7b7; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAV — top desktop + bottom mobile
   ═══════════════════════════════════════════════════════════════════════════ */

/* Top nav — visible ≥768px, masquée sur mobile */
.nl-topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(3,7,18,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nl-border);
}
.nl-topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nl-nav-h);
}
.nl-topnav-brand {
  font-weight: 700; color: #fff; font-size: 0.95rem; letter-spacing: -0.01em;
  text-decoration: none;
}
.nl-topnav-links { display: flex; align-items: center; gap: 0.25rem; }
.nl-topnav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.7rem; border-radius: 0.625rem;
  font-size: 0.82rem; font-weight: 500;
  color: var(--nl-text-mute); text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.nl-topnav-link:hover { color: var(--nl-text); background: rgba(31,41,55,0.5); }
.nl-topnav-link.is-active { color: var(--nl-accent-soft); background: var(--nl-accent-bg); }
.nl-topnav-link .ic { font-size: 1rem; line-height: 1; }
.nl-topnav-link .lbl { display: inline; }

/* Sur mobile : la top nav devient ultra compacte (juste le brand) */
@media (max-width: 767px) {
  .nl-topnav-links { display: none; }
}

/* Bottom nav iOS — visible UNIQUEMENT <768px */
.nl-bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(3,7,18,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--nl-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 767px) {
  .nl-bottomnav { display: flex; }
  /* Padding bottom du <main> pour ne pas être masqué par la bottom nav */
  body.has-bottomnav main { padding-bottom: calc(var(--nl-bottom-nav-h) + 1.5rem) !important; }
}
.nl-bottomnav-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; padding: 0.55rem 0.25rem;
  color: var(--nl-text-dim); text-decoration: none;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em;
  transition: color 0.15s;
}
.nl-bottomnav-link .ic { font-size: 1.35rem; line-height: 1; }
.nl-bottomnav-link.is-active { color: var(--nl-accent-soft); }
.nl-bottomnav-link.is-active .ic { transform: translateY(-1px); transition: transform 0.2s; }

/* ─── Card ─── */
.card {
  position: relative;
  will-change: transform;
  transition: box-shadow 0.2s ease;
}
.card:active { transform: scale(0.985); }

/* ─── Emoji bounce ─── */
@keyframes emoji-bounce {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  82%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Flip reveal */
@keyframes flip-out {
  from { transform: perspective(900px) rotateY(0deg) scale(1); opacity: 1; }
  to   { transform: perspective(900px) rotateY(-90deg) scale(0.94); opacity: 0; }
}
@keyframes flip-in {
  from { transform: perspective(900px) rotateY(90deg) scale(0.94); opacity: 0; }
  to   { transform: perspective(900px) rotateY(0deg) scale(1); opacity: 1; }
}

/* Card entry */
/* ─── Lettre par lettre ─── */
@keyframes letter-in {
  from { opacity: 0; transform: translateY(7px) scale(0.75); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes card-enter {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* Card exits — directional */
@keyframes card-exit-right {
  0%   { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  18%  { transform: translateX(14px) rotate(4deg) scale(1.03); opacity: 1; }
  100% { transform: translateX(115%) rotate(18deg) scale(0.9); opacity: 0; }
}
@keyframes card-exit-left {
  0%   { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  18%  { transform: translateX(-14px) rotate(-4deg) scale(1.03); opacity: 1; }
  100% { transform: translateX(-115%) rotate(-18deg) scale(0.9); opacity: 0; }
}
@keyframes card-exit-up {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  18%  { transform: translateY(-10px) scale(1.03); opacity: 1; }
  100% { transform: translateY(-85%) scale(0.78); opacity: 0; }
}
@keyframes card-exit-down {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  18%  { transform: translateY(10px) scale(1.03); opacity: 1; }
  100% { transform: translateY(85%) scale(0.78); opacity: 0; }
}

/* Verdict flash (box-shadow coloré) */
@keyframes card-flash-green {
  0%   { box-shadow: inset 0 0 0px rgba(52,211,153,0); }
  22%  { box-shadow: inset 0 0 80px rgba(52,211,153,0.55), 0 0 50px rgba(52,211,153,0.45); }
  100% { box-shadow: inset 0 0 0px rgba(52,211,153,0); }
}
@keyframes card-flash-red {
  0%   { box-shadow: inset 0 0 0px rgba(244,63,94,0); }
  22%  { box-shadow: inset 0 0 80px rgba(244,63,94,0.55), 0 0 50px rgba(244,63,94,0.45); }
  100% { box-shadow: inset 0 0 0px rgba(244,63,94,0); }
}
@keyframes card-flash-amber {
  0%   { box-shadow: inset 0 0 0px rgba(251,191,36,0); }
  22%  { box-shadow: inset 0 0 80px rgba(251,191,36,0.55), 0 0 50px rgba(251,191,36,0.45); }
  100% { box-shadow: inset 0 0 0px rgba(251,191,36,0); }
}

/* ─── Swipe overlay ─── */
.swipe-overlay {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* ─── Rating buttons ─── */
@keyframes rating-appear {
  from { transform: translateY(22px) scale(0.85); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.rating-anim { animation: rating-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ─── XP Toast ─── */
@keyframes toast-in {
  0%   { transform: translateY(16px) scale(0.8); opacity: 0; }
  55%  { transform: translateY(-5px) scale(1.1); opacity: 1; }
  75%  { transform: translateY(2px)  scale(0.97); }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-14px) scale(0.85); opacity: 0; }
}

/* ─── Count-up pop ─── */
@keyframes count-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); color: #c4b5fd; }
  100% { transform: scale(1); }
}
.count-pop { animation: count-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ─── Confetti ─── */
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg) scale(1);    opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg) scale(0.6); opacity: 0; }
}
.confetti-piece {
  position: fixed;
  pointer-events: none;
  animation: confetti-fall linear forwards;
  z-index: 200;
  border-radius: 2px;
}

/* ─── Streak fire pulse ─── */
@keyframes fire-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%       { transform: scale(1.2); filter: brightness(1.4) drop-shadow(0 0 6px #f97316); }
}
.streak-fire { animation: fire-pulse 1.8s ease-in-out infinite; display: inline-block; }

/* ─── Progress bar shimmer ─── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.bar-shimmer {
  background: linear-gradient(90deg,
    transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 2.4s infinite linear;
}

/* ─── Slide up ─── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slide-up 0.3s ease forwards; }

/* ─── Badge pop ─── */
@keyframes badge-pop {
  from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.badge-new { animation: badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ─── Misc ─── */
@media (max-width: 640px) {
  .max-w-2xl { padding-left: 1rem; padding-right: 1rem; }
}