/* ============================================
   RÈGLES GLOBALES POUR LES ICÔNES
   Garantit la visibilité sur tous les écrans
   ============================================ */

/* Taille minimale pour toutes les icônes Lucide */
[data-lucide],
i[data-lucide],
svg[data-lucide] {
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0;
  display: inline-block;
}

/* Tailles adaptatives selon le contexte */
/* Petites icônes (dans le texte, boutons) */
[data-lucide].w-3,
[data-lucide].w-4,
i[data-lucide].w-3,
i[data-lucide].w-4 {
  width: clamp(14px, 1rem, 20px) !important;
  height: clamp(14px, 1rem, 20px) !important;
}

/* Icônes moyennes (cartes, sections) */
[data-lucide].w-5,
[data-lucide].w-6,
[data-lucide].w-7,
i[data-lucide].w-5,
i[data-lucide].w-6,
i[data-lucide].w-7 {
  width: clamp(20px, 1.5rem, 32px) !important;
  height: clamp(20px, 1.5rem, 32px) !important;
}

/* Grandes icônes (hero, features) */
[data-lucide].w-8,
[data-lucide].w-10,
[data-lucide].w-12,
[data-lucide].w-14,
[data-lucide].w-16,
i[data-lucide].w-8,
i[data-lucide].w-10,
i[data-lucide].w-12,
i[data-lucide].w-14,
i[data-lucide].w-16 {
  width: clamp(32px, 4vw, 80px) !important;
  height: clamp(32px, 4vw, 80px) !important;
}

/* Conteneurs d'icônes - tailles minimales garanties */
[class*="w-"] [data-lucide],
[class*="h-"] [data-lucide],
.flex [data-lucide],
.items-center [data-lucide] {
  min-width: 16px !important;
  min-height: 16px !important;
}

/* Conteneurs d'icônes avec fond */
[class*="bg-"] [data-lucide],
[class*="rounded"] [data-lucide] {
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Responsive spécifique */
@media (max-width: 640px) {
  /* Sur mobile, garantir une taille minimale visible */
  [data-lucide] {
    min-width: 18px !important;
    min-height: 18px !important;
  }
  
  [data-lucide].w-5,
  [data-lucide].w-6,
  [data-lucide].w-7 {
    width: clamp(20px, 5vw, 28px) !important;
    height: clamp(20px, 5vw, 28px) !important;
  }
  
  [data-lucide].w-8,
  [data-lucide].w-10,
  [data-lucide].w-12 {
    width: clamp(32px, 6vw, 48px) !important;
    height: clamp(32px, 6vw, 48px) !important;
  }
}

@media (max-width: 480px) {
  /* Sur très petits écrans, augmenter encore */
  [data-lucide] {
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* Force l'affichage même si la classe Tailwind est mal appliquée */
[data-lucide] svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}