spb/ka-ui

1/* ============================================================2   KA Tabbar v1 — barre de navigation mobile commune Groupe KA3   Canonique : ka-ui.git/nav/ka-tabbar.css — copiée telle quelle4   dans chaque app (src/ka/ka-tabbar.css) et importée par le5   composant KaTabbar. Voir TABBAR-STANDARD.md.67   Pilule flottante détachée du bas d'écran (langage Immo-Ka),8   4-5 onglets, safe-area iOS, thème clair (défaut) ou sombre.9   Config par app :10     --ktb-accent        couleur signature (trait actif + icône)11     --ktb-active-label  couleur du label actif (défaut : encre)12     .ka-tabbar--dark    variante sombre (fond encre/brand)13     --ktb-bg            fond (surcharge libre, ex. vert profond)14   ============================================================ */1516.ka-tabbar { display: none; }1718@media (max-width: 760px) {19  .ka-tabbar {20    /* thème clair (défaut) — papier off-white légèrement translucide */21    --ktb-bg: rgba(250, 249, 245, 0.94);22    --ktb-ink: var(--ink, #16191a);23    --ktb-dim: var(--ink-3, #70756d);24    --ktb-accent: var(--accent, #d6336c);25    --ktb-line: var(--hairline-strong, rgba(20, 24, 20, 0.16));26    --ktb-shadow: 0 10px 30px rgba(20, 24, 20, 0.16), 0 2px 6px rgba(20, 24, 20, 0.07);2728    position: fixed;29    left: max(12px, env(safe-area-inset-left));30    right: max(12px, env(safe-area-inset-right));31    bottom: calc(10px + env(safe-area-inset-bottom));32    z-index: var(--z-bottombar, 600);33    display: grid;34    grid-auto-flow: column;35    grid-auto-columns: 1fr;36    max-width: 440px;37    margin-inline: auto;38    padding: 5px;39    background: var(--ktb-bg);40    -webkit-backdrop-filter: blur(14px) saturate(1.1);41    backdrop-filter: blur(14px) saturate(1.1);42    border: 1px solid var(--ktb-line);43    border-radius: 18px;44    box-shadow: var(--ktb-shadow);45  }4647  .ka-tabbar--dark {48    --ktb-bg: rgba(18, 22, 19, 0.93);49    --ktb-ink: #f5f3ee;50    --ktb-dim: rgba(245, 243, 238, 0.62);51    --ktb-line: rgba(245, 243, 238, 0.16);52    --ktb-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);53  }5455  .ka-tabbar a,56  .ka-tabbar button {57    appearance: none;58    background: none;59    border: 0;60    cursor: pointer;61    display: flex;62    flex-direction: column;63    align-items: center;64    justify-content: center;65    gap: 3px;66    min-height: 50px;67    padding: 6px 2px 5px;68    border-radius: 13px;69    font-family: var(--font-display, inherit);70    font-size: 10px;71    font-weight: 650;72    letter-spacing: 0.01em;73    line-height: 1;74    color: var(--ktb-dim);75    text-decoration: none;76    -webkit-tap-highlight-color: transparent;77    transition: color 0.15s ease;78  }79  .ka-tabbar svg { display: block; transition: transform 0.15s ease; }80  .ka-tabbar a:active svg,81  .ka-tabbar button:active svg { transform: translateY(1px) scale(0.9); }8283  /* état actif : icône couleur signature, label encre, trait accent */84  .ka-tabbar .active { color: var(--ktb-active-label, var(--ktb-ink)); }85  .ka-tabbar .active svg { color: var(--ktb-accent); animation: ktb-pop 0.25s ease; }86  .ka-tabbar .active::after {87    content: "";88    width: 16px;89    height: 2.5px;90    border-radius: 2px;91    background: var(--ktb-accent);92    animation: ktb-under 0.22s ease;93  }9495  /* le contenu respire sous la pilule (footer compris) */96  body:has(.ka-tabbar) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }9798  /* un CTA sticky de fiche prend le bas d'écran : la pilule s'efface */99  body:has(.cta-sticky) .ka-tabbar { display: none; }100  body:has(.cta-sticky) { padding-bottom: 0; }101102  /* widget KA Agent : dégagé de la pilule (style injecté après le bundle103     → spécificité doublée pour gagner) */104  body:has(.ka-tabbar) .kaa-btn.kaa-btn { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 14px; }105  body:has(.ka-tabbar) .kaa-panel.kaa-panel:not(.kaa-full) { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }106}107108@keyframes ktb-under {109  from { transform: scaleX(0); opacity: 0; }110}111@keyframes ktb-pop {112  40% { transform: translateY(-2px); }113}114115@media (prefers-reduced-motion: reduce) {116  .ka-tabbar svg { transition: none; }117  .ka-tabbar .active svg, .ka-tabbar .active::after { animation: none; }118}119