Anti-Grid Tabs

{/* Tab actif: rounded-t, pas de border-bottom */}
<button className={isActive ? "rounded-t-[42px] rounded-b-none bg-surface" : "rounded-[42px] bg-surface"}
  style={{ borderBottom: isActive ? "1.6px solid surfaceColor" : "1.6px solid borderColor" }}>
  {tab.label}
</button>

{/* Bridge avec courbes concaves */}
{isActive && (
  <div style={{ top: TAB_HEIGHT, width: "100%", height: GAP }}>
    <div className="w-full h-full bg-surface" />
    {/* Concave gauche */}
    <div className="absolute overflow-hidden"
      style={{ left: "1.6px", bottom: 0, transform: "translateX(-100%)", width: 32, height: 32 }}>
      <div style={{ borderRadius: "0 0 32px 0", boxShadow: "0 0 0 32px surfaceColor" }} />
    </div>
    {/* Concave droite */}
    <div className="absolute overflow-hidden"
      style={{ right: "1.6px", bottom: 0, transform: "translateX(100%)", width: 32, height: 32 }}>
      <div style={{ borderRadius: "0 0 0 32px", boxShadow: "0 0 0 32px surfaceColor" }} />
    </div>
  </div>
)}

{/* Content card: border-radius dynamique */}
<div style={{
  borderTopLeftRadius: activeIdx === 0 ? 0 : 42,
  borderTopRightRadius: activeIdx === lastIdx ? 0 : 42,
  borderBottomLeftRadius: 42, borderBottomRightRadius: 42,
}}>...</div>