/* ============================================================
   KA Tabbar v1 — barre de navigation mobile commune Groupe KA
   Canonique : ka-ui.git/nav/ka-tabbar.css — copiée telle quelle
   dans chaque app (src/ka/ka-tabbar.css) et importée par le
   composant KaTabbar. Voir TABBAR-STANDARD.md.

   Pilule flottante détachée du bas d'écran (langage Immo-Ka),
   4-5 onglets, safe-area iOS, thème clair (défaut) ou sombre.
   Config par app :
     --ktb-accent        couleur signature (trait actif + icône)
     --ktb-active-label  couleur du label actif (défaut : encre)
     .ka-tabbar--dark    variante sombre (fond encre/brand)
     --ktb-bg            fond (surcharge libre, ex. vert profond)
   ============================================================ */

.ka-tabbar { display: none; }

@media (max-width: 760px) {
  .ka-tabbar {
    /* thème clair (défaut) — papier off-white légèrement translucide */
    --ktb-bg: rgba(250, 249, 245, 0.94);
    --ktb-ink: var(--ink, #16191a);
    --ktb-dim: var(--ink-3, #70756d);
    --ktb-accent: var(--accent, #d6336c);
    --ktb-line: var(--hairline-strong, rgba(20, 24, 20, 0.16));
    --ktb-shadow: 0 10px 30px rgba(20, 24, 20, 0.16), 0 2px 6px rgba(20, 24, 20, 0.07);

    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: var(--z-bottombar, 600);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
    padding: 5px;
    background: var(--ktb-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid var(--ktb-line);
    border-radius: 18px;
    box-shadow: var(--ktb-shadow);
  }

  .ka-tabbar--dark {
    --ktb-bg: rgba(18, 22, 19, 0.93);
    --ktb-ink: #f5f3ee;
    --ktb-dim: rgba(245, 243, 238, 0.62);
    --ktb-line: rgba(245, 243, 238, 0.16);
    --ktb-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  .ka-tabbar a,
  .ka-tabbar button {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 6px 2px 5px;
    border-radius: 13px;
    font-family: var(--font-display, inherit);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--ktb-dim);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }
  .ka-tabbar svg { display: block; transition: transform 0.15s ease; }
  .ka-tabbar a:active svg,
  .ka-tabbar button:active svg { transform: translateY(1px) scale(0.9); }

  /* état actif : icône couleur signature, label encre, trait accent */
  .ka-tabbar .active { color: var(--ktb-active-label, var(--ktb-ink)); }
  .ka-tabbar .active svg { color: var(--ktb-accent); animation: ktb-pop 0.25s ease; }
  .ka-tabbar .active::after {
    content: "";
    width: 16px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ktb-accent);
    animation: ktb-under 0.22s ease;
  }

  /* le contenu respire sous la pilule (footer compris) */
  body:has(.ka-tabbar) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* un CTA sticky de fiche prend le bas d'écran : la pilule s'efface */
  body:has(.cta-sticky) .ka-tabbar { display: none; }
  body:has(.cta-sticky) { padding-bottom: 0; }

  /* widget KA Agent : dégagé de la pilule (style injecté après le bundle
     → spécificité doublée pour gagner) */
  body:has(.ka-tabbar) .kaa-btn.kaa-btn { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  body:has(.ka-tabbar) .kaa-panel.kaa-panel:not(.kaa-full) { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes ktb-under {
  from { transform: scaleX(0); opacity: 0; }
}
@keyframes ktb-pop {
  40% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ka-tabbar svg { transition: none; }
  .ka-tabbar .active svg, .ka-tabbar .active::after { animation: none; }
}