/* =============================================================================
   Kivo — Composants réutilisables (boutons, cartes, orbe, pastilles, toast…)
   ============================================================================= */

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--step-0); line-height: 1;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t), background var(--t), border-color var(--t);
  min-height: 48px; position: relative; overflow: hidden;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn:active { transform: scale(.97); }

.btn-primary {
  color: #07101f; background: var(--brand-grad);
  box-shadow: 0 8px 26px -8px rgba(34, 211, 238, .6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(34, 211, 238, .75); }

.btn-ghost {
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }

.btn-accent {
  color: #07101f; background: var(--accent);
  box-shadow: 0 8px 24px -8px var(--accent);
}
.btn-accent:hover { transform: translateY(-2px); filter: brightness(1.06); }

.btn-light { background: var(--ink-900); color: #fff; }
.btn-light:hover { transform: translateY(-2px); background: #1a234a; }
.btn-lg { padding: 1.05rem 2rem; font-size: var(--step-1); }
.btn-block { width: 100%; }

/* ---- Cartes ---- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.6rem;
  transition: transform var(--t) var(--ease), border-color var(--t), background var(--t);
}
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-2); }

/* ---- Pastilles / badges ---- */
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.badge-ok {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--success); font-weight: 600; font-size: var(--step--1);
}

/* ---- Orbe signature Kivo ---- */
.orb {
  --size: 240px;
  width: var(--size); height: var(--size); position: relative;
  display: grid; place-items: center; margin-inline: auto;
}
.orb-core {
  width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #7dd3fc 0%, #3b82f6 45%, #1e3a8a 100%);
  box-shadow: 0 0 60px -6px var(--brand-2), inset 0 0 30px rgba(255, 255, 255, .25);
  animation: orbBreath 5s var(--ease) infinite;
  position: relative; z-index: 2;
}
.orb-core::after {
  content: ""; position: absolute; top: 16%; left: 18%; width: 26%; height: 26%;
  border-radius: 50%; background: rgba(255, 255, 255, .8); filter: blur(2px);
}
.orb-halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  animation: orbHalo 5s var(--ease) infinite;
}
.orb-ring {
  position: absolute; border: 1px solid var(--accent); border-radius: 50%; opacity: .35;
  inset: 8%; animation: orbSpin 18s linear infinite;
}
.orb-ring.r2 { inset: -6%; border-style: dashed; opacity: .2; animation-duration: 26s; animation-direction: reverse; }
@keyframes orbBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orbHalo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }

/* Icônes de canaux gravitant autour de l'orbe */
.orb-channels { position: absolute; inset: 0; pointer-events: none; }
.orb-channel {
  position: absolute; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 14px; backdrop-filter: blur(6px); color: var(--text);
  box-shadow: var(--shadow-sm);
}
.orb-channel svg { width: 22px; height: 22px; }

/* ---- Toast ---- */
.toast-zone {
  position: fixed; bottom: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%);
  z-index: 120; display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .6rem;
  background: var(--bg-650); border: 1px solid var(--accent);
  color: var(--text); padding: .7rem 1.1rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); font-size: var(--step--1); font-weight: 600;
  animation: toastIn .35s var(--ease-spring);
}
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Divider lumineux ---- */
.glow-line {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .4;
}

/* ---- Icône inline ---- */
.ico { width: 24px; height: 24px; flex: none; }

/* ---- Tooltip conformité ---- */
.compliance-note {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--step--1); color: var(--text-dim);
}
.compliance-note svg { width: 16px; height: 16px; color: var(--success); }