/* ==========================================================================
   Icônes SVG — système unifié
   ========================================================================== */

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  line-height: 0;
}

.ui-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  shape-rendering: geometricPrecision;
}

/* Tailles ---------------------------------------------------------- */

.ui-icon--sm svg  { width: 1rem;    height: 1rem; }
.ui-icon--btn svg { width: 1.05rem; height: 1.05rem; }
.ui-icon--lg svg  { width: 1.65rem; height: 1.65rem; }

/* Icône inline dans du texte */
.ui-icon--inline {
  vertical-align: -0.2em;
  margin-right: 0.35rem;
  color: var(--color-primary);
}
.ui-icon--inline svg { width: 1.05rem; height: 1.05rem; }

/* Logo header */
.logo-icon svg { width: 1.15rem; height: 1.15rem; }

/* ==========================================================================
   Icônes de cartes (profil / équipement) — sobres, sans fond bulle
   ========================================================================== */

.ui-icon--card {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  transition: all var(--dur) var(--ease);
}

.ui-icon--card svg {
  width: 1.25rem;
  height: 1.25rem;
}

.profile-card:hover:not(.active) .ui-icon--card,
.equip-card:hover:not(.active) .ui-icon--card {
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
}

.profile-card.active .ui-icon--card,
.equip-card.active .ui-icon--card {
  background: var(--color-primary);
  color: #fff;
}

/* Wrappers legacy — n'appliquent plus de fond */
.profile-card-icon,
.equip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Icônes contextuelles — résultats & modals
   ========================================================================== */

.pm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.pm-icon svg { width: 1.25rem; height: 1.25rem; }

.roof-stat-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.roof-stat-icon svg { width: 1.25rem; height: 1.25rem; }

.metric-icon svg { width: 1.15rem; height: 1.15rem; }

.env-icon svg,
.battery-upsell-icon svg,
.production-hero-icon svg { width: 1.55rem; height: 1.55rem; }

/* Œil sur les résultats floutés */
.blur-eye {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  color: var(--color-primary);
}
.blur-eye svg { width: 1.65rem; height: 1.65rem; }

/* Modal — icône confidentialité */
.lead-modal-privacy .ui-icon--privacy {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 0.1rem;
}
.lead-modal-privacy .ui-icon--privacy svg { width: 1.15rem; height: 1.15rem; }

.lead-modal-close .ui-icon svg { width: 1rem; height: 1rem; }

/* CTA icônes */
#btn-unlock,
#btn-open-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}