/* ============================================
   sprint6-ext.css — v1.0.0 (Sprint 6, v2.51.0)
   Tabbar mobile 5 items conforme à la maquette.

   RÈGLES SPRINT 3+ APPLIQUÉES
     1. Pas de transform translateY (le FAB scale au hover/active est OK car
        c'est sur un élément non-sheet, pas sur une animation d'apparition)
     2. Pas de backdrop-filter
     3. animation: none !important sur la tabbar (pas d'anim au mount)
     4. setInterval, pas MutationObserver subtree
     5. Update inline + memoization data-tb-active-route
   ============================================ */

:root {
  --s6-boow: var(--boow, #F85558);
  --s6-ivoire: var(--ivoire, #F5EFE0);
  --s6-nuit: var(--nuit, #1A2845);
  --s6-sable: var(--sable, #ECDDCB);
  --s6-mono: ui-monospace, "Geist Mono", monospace;
  --s6-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   Hide ancienne tabbar prod (3 items) quand notre v2 est active
   ============================================ */
body.abo-tb-active nav.tabbar[data-abo-tb-hidden] {
  display: none !important;
}

/* ============================================
   Tabbar V2 — visible uniquement < 768px
   ============================================ */
.abo-tabbar-v2 {
  display: none;
  background: var(--s6-ivoire);
  border-top: 1px solid var(--s6-sable);
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 4;
  flex-shrink: 0;
  position: relative;
  animation: none !important;
}

@media (max-width: 767px) {
  body.abo-tb-active .abo-tabbar-v2 {
    display: grid;
  }
}

/* ============================================
   Onglets standard (Liste / Calend. / Budget / Menu)
   ============================================ */
.abo-tb-tab {
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 8px 0 4px;
  font-family: var(--s6-mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--s6-nuit);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.18s var(--s6-ease);
  min-height: 56px;
  line-height: 1.1;
}

.abo-tb-tab:hover {
  opacity: 0.8;
}

.abo-tb-tab.is-active {
  opacity: 1;
}

.abo-tb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.abo-tb-icon svg {
  display: block;
}

.abo-tb-label {
  display: block;
  line-height: 1;
  margin-top: 2px;
}

/* ============================================
   Onglet center avec FAB (Ajouter)
   ============================================ */
.abo-tb-tab-center {
  position: relative;
  cursor: default;
  opacity: 1 !important;  /* le FAB toujours pleine intensité */
}

.abo-tb-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--s6-boow);
  color: var(--s6-ivoire);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  margin-bottom: 0;
  box-shadow:
    0 8px 22px rgba(248, 85, 88, 0.32),
    0 2px 6px rgba(248, 85, 88, 0.18);
  border: 0;
  cursor: pointer;
  transition: box-shadow 0.18s var(--s6-ease);
  padding: 0;
  flex-shrink: 0;
}

.abo-tb-fab:hover {
  box-shadow:
    0 10px 26px rgba(248, 85, 88, 0.42),
    0 3px 8px rgba(248, 85, 88, 0.22);
}

.abo-tb-fab:active {
  box-shadow:
    0 4px 14px rgba(248, 85, 88, 0.28),
    0 1px 3px rgba(248, 85, 88, 0.16);
}

.abo-tb-fab svg {
  display: block;
  stroke: currentColor;
}

/* ============================================
   Toast "Bientôt disponible" (fallback si UI.showToast indispo)
   ============================================ */
.abo-tb-soon-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  background: var(--s6-nuit);
  color: var(--s6-ivoire);
  padding: 12px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-family: var(--s6-mono);
  letter-spacing: 0.02em;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--s6-ease);
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 10px 28px rgba(26, 40, 69, 0.25);
}

.abo-tb-soon-toast.is-visible {
  opacity: 1;
}

/* ============================================
   prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .abo-tabbar-v2,
  .abo-tb-tab,
  .abo-tb-fab,
  .abo-tb-soon-toast {
    transition: none !important;
    animation: none !important;
  }
}