/* ============================================================================
 * MOMENTUM COLUMNS
 * ============================================================================
 * Correction #14 : animation plus marquée et plus lente
 * Correction #16 : overlay flou s'arrête au-dessus de la nav (nav reste nette)
 * Correction #17 : couleur unique = accent du thème (pas de variant)
 * ============================================================================ */

/* v3.4.1 : overlay s'arrête PILE au bord supérieur de la nav (au-dessus du liseré),
   pour ne pas créer de zone floutée disgracieuse entre l'overlay et la nav */
.momentum-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  z-index: 109;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out);
}

.momentum-overlay.show {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.momentum-column {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 24px);
  z-index: 110;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  padding: 0 12px;
  width: 248px;
  pointer-events: none;
}

.momentum-column[data-anchor="stats"] {
  left: 8px;
}
.momentum-column[data-anchor="actions"] {
  right: 88px;
}
.momentum-column[data-anchor="settings"] {
  right: 8px;
}

/* Correction #17 : couleur UNIQUE = accent du thème (pas de variant) */
.momentum-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: var(--radius-button);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow:
    0 14px 32px var(--accent-glow-shadow),
    inset 0 1px 0 var(--white-soft-25);
  pointer-events: auto;
  cursor: pointer;

  /* Correction #14 : animation plus marquée (translateY plus grand, scale plus bas) */
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  /* Correction #14 : plus lent (480ms vs 280ms) */
  transition: opacity 480ms var(--ease-momentum),
              transform 480ms var(--ease-momentum);
}

.momentum-item:active {
  transform: translateY(0) scale(0.96);
}

.momentum-item-icon { width: 28px; height: 28px; flex-shrink: 0; overflow: visible; }
.momentum-item-icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Roue crantée — spécificité augmentée pour écraser la règle générale */
.momentum-item.momentum-item .has-gear {
  width: 36px;
  height: 36px;
  margin: -4px -2px;
  flex-shrink: 0;
}
.momentum-item.momentum-item .has-gear svg {
  width: 36px;
  height: 36px;
  stroke: none;
  fill: none;
  filter: none;
}
/* Forcer tous les éléments de la roue en blanc/contour (cohérence avec autres icônes) */
.momentum-item.momentum-item .has-gear svg path,
.momentum-item.momentum-item .has-gear svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
}
/* Le point central reste plein blanc */
.momentum-item.momentum-item .has-gear svg circle:last-of-type {
  fill: #fff;
  stroke: none;
}
/* Masquer les raies d'avant-liner pour rester épuré */
.momentum-item.momentum-item .has-gear svg line {
  display: none;
}
.momentum-item-label { flex: 1; }
.momentum-item-chevron { width: 16px; height: 16px; opacity: 0.7; }
.momentum-item-chevron svg {
  width: 100%; height: 100%;
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round;
}

/* Correction #14 : delays plus marqués (cascade plus visible) */
.momentum-column.show .momentum-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.momentum-column.show .momentum-item:nth-child(1) { transition-delay: 0ms; }
.momentum-column.show .momentum-item:nth-child(2) { transition-delay: 80ms; }
.momentum-column.show .momentum-item:nth-child(3) { transition-delay: 160ms; }
.momentum-column.show .momentum-item:nth-child(4) { transition-delay: 240ms; }
.momentum-column.show .momentum-item:nth-child(5) { transition-delay: 320ms; }
.momentum-column.show .momentum-item:nth-child(6) { transition-delay: 400ms; }