/* =====================================================================
   KeyZen — Info tooltip « i »
   ---------------------------------------------------------------------
   Composant réutilisable :
   - Icône « i » discrète à côté d'un libellé
   - Bulle explicative au survol (desktop) et au clic/tap (mobile)
   - Accessible clavier (Tab + Espace/Entrée)
   - CR réunion 08/2026 point 9.2
   ===================================================================== */

.kz-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.35em;
}

.kz-tip-btn {
  --tip-size: 1.05em;

  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tip-size);
  height: var(--tip-size);
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft, #6b7280);
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.7em;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.kz-tip-btn:hover,
.kz-tip-btn:focus-visible,
.kz-tip-btn.is-open {
  color: var(--accent, #094713);
  background: color-mix(in oklab, var(--accent, #094713) 8%, transparent);
  transform: scale(1.08);
  outline: none;
}

.kz-tip-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #094713) 22%, transparent);
}

.kz-tip-btn > span {
  transform: translateY(-0.03em);
}

/* =====================================================================
   Bulle — v3 : rendue via un portal React dans <body> avec
   position:fixed en repère viewport, pour échapper à tout
   overflow:hidden des conteneurs parents.
   Le positionnement (top/left) est calculé par JS ; ici on
   ne fournit que le style visuel.
   ===================================================================== */
.kz-tip-bubble--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 0.85rem 1rem;
  z-index: 9999;

  background: #ffffff;
  color: #1a2233;
  border: 1px solid color-mix(in oklab, var(--accent, #094713) 18%, #e5e7eb);

  font-family: var(--font-sans, system-ui);
  font-size: 0.86rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-wrap: pretty;

  border-radius: 10px;
  box-shadow:
    0 14px 40px rgba(9, 71, 19, 0.18),
    0 3px 10px rgba(11, 18, 32, 0.14);

  pointer-events: none;
  animation: kz-tip-in 0.14s ease-out;
}

/* Force la remise à zéro de l'italique éventuel hérité */
.kz-tip-bubble--fixed,
.kz-tip-bubble--fixed * {
  font-style: normal !important;
}

/* Flèche — pointée sur le bouton (variable CSS --kz-tip-arrow-x
   injectée par le composant). Double couche : bordure + fond. */
.kz-tip-bubble--fixed::before,
.kz-tip-bubble--fixed::after {
  content: "";
  position: absolute;
  left: var(--kz-tip-arrow-x, 50%);
  transform: translateX(-50%);
  border: 7px solid transparent;
}

/* Placement TOP : flèche en bas, pointant vers le bouton */
.kz-tip-bubble--fixed[data-placement="top"]::before {
  top: 100%;
  border-top-color: color-mix(in oklab, var(--accent, #094713) 18%, #e5e7eb);
}
.kz-tip-bubble--fixed[data-placement="top"]::after {
  top: calc(100% - 1.5px);
  border-top-color: #ffffff;
}

/* Placement BOTTOM : flèche en haut */
.kz-tip-bubble--fixed[data-placement="bottom"]::before {
  bottom: 100%;
  border-bottom-color: color-mix(in oklab, var(--accent, #094713) 18%, #e5e7eb);
}
.kz-tip-bubble--fixed[data-placement="bottom"]::after {
  bottom: calc(100% - 1.5px);
  border-bottom-color: #ffffff;
}

@keyframes kz-tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile : décalage à gauche du viewport si nécessaire */
@media (max-width: 600px) {
  .kz-tip-bubble {
    max-width: 78vw;
    font-size: 0.8rem;
  }
}