/* =========================================================
   GENICOTIK : Icônes SVG professionnelles (fx-form-icon / chips)
   ========================================================= */

.fx-form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(42, 168, 255, 0.12);
  border: 1px solid rgba(42, 168, 255, 0.25);
  color: #4dc3ff;
  flex-shrink: 0;
}

.fx-form-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fx-icon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  background: rgba(42, 168, 255, 0.08);
  border: 1px solid rgba(42, 168, 255, 0.18);
  font-size: 12px;
  font-weight: 600;
  color: #a9b8d4;
  white-space: nowrap;
}

.fx-icon-chip__ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #4dc3ff;
}

.fx-icon-chip__ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Variante violette, page IA */
.ia-page .fx-form-icon {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.ia-page .fx-icon-chip {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.22);
}

.ia-page .fx-icon-chip__ico {
  color: #c084fc;
}

.ia-page .ia-compare-good .fx-form-icon {
  background: rgba(49, 208, 170, 0.12);
  border-color: rgba(49, 208, 170, 0.28);
  color: #31d0aa;
}

.ia-page .ia-usecase-gain .fx-form-icon {
  background: rgba(49, 208, 170, 0.12);
  border-color: rgba(49, 208, 170, 0.28);
  color: #31d0aa;
}