/* ============================================
   SECTION HERO - Thème Burkinabé (Rouge-Jaune-Vert)
   AutoBF - 2025-01-10
   Style élégant avec les couleurs du drapeau burkinabé
   ============================================ */

/* Section Hero principale - Gradient burkinabé rouge-jaune-vert */
div[class*="bg-gradient-to-r"][class*="from-bf-red"],
div[class*="bg-gradient"][class*="from-bf-red"],
div:has(h1:contains("Trouvez Votre Véhicule Idéal")),
div:has(h1:contains("Trouvez")) {
  /* Gradient burkinabé - Rouge vers Jaune vers Vert */
  background: linear-gradient(to right, #dc2626 0%, #eab308 50%, #16a34a 100%) !important;
  background-image: linear-gradient(to right, #dc2626 0%, #eab308 50%, #16a34a 100%) !important;
  min-height: 650px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  padding: 5rem 1rem !important;
}

/* Image de fond avec overlay léger */
div[class*="bg-gradient-to-r"][class*="from-bf-red"] > div[class*="absolute"]:first-child,
div:has(h1:contains("Trouvez")) > div[class*="absolute"]:first-child {
  background-image: url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=1470&auto=format&fit=crop') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.2 !important;
  z-index: 1 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Conteneur du contenu */
div[class*="bg-gradient-to-r"][class*="from-bf-red"] > div[class*="relative"][class*="z-10"],
div:has(h1:contains("Trouvez")) > div[class*="relative"]:not([class*="absolute"]) {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 2rem 1rem !important;
}

/* Titre principal - Blanc avec ombre portée pour visibilité */
div:has(h1:contains("Trouvez")) h1,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] h1 {
  font-size: 3.5rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 1.5rem !important;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.1 !important;
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  div:has(h1:contains("Trouvez")) h1,
  div[class*="bg-gradient-to-r"][class*="from-bf-red"] h1 {
    font-size: 2.25rem !important;
  }
}

/* Sous-titre - Blanc avec ombre */
div:has(h1:contains("Trouvez")) p,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] p {
  font-size: 1.25rem !important;
  color: #ffffff !important;
  margin-bottom: 2.5rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  line-height: 1.6 !important;
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  div:has(h1:contains("Trouvez")) p,
  div[class*="bg-gradient-to-r"][class*="from-bf-red"] p {
    font-size: 1rem !important;
  }
}

/* Barre de recherche - Blanc avec ombre élégante et alignement horizontal PARFAIT */
div:has(h1:contains("Trouvez")) div[class*="bg-white"],
div:has(input[placeholder*="Marque"]) div[class*="bg-white"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] {
  background: #ffffff !important;
  border-radius: 1.25rem !important;
  padding: 2rem 2.5rem !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 10px 20px -5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 2.5rem !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 1.5rem !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* Grille pour les champs de recherche - Alignement horizontal PARFAIT */
div:has(h1:contains("Trouvez")) div[class*="bg-white"] form,
div:has(input[placeholder*="Marque"]) div[class*="bg-white"] form,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] form,
div:has(h1:contains("Trouvez")) div[class*="bg-white"] [class*="grid"],
div:has(input[placeholder*="Marque"]) div[class*="bg-white"] [class*="grid"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] [class*="grid"],
div:has(h1:contains("Trouvez")) div[class*="bg-white"] > div:first-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  div:has(h1:contains("Trouvez")) div[class*="bg-white"] form,
  div:has(input[placeholder*="Marque"]) div[class*="bg-white"] form,
  div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] form,
  div:has(h1:contains("Trouvez")) div[class*="bg-white"] [class*="grid"],
  div:has(h1:contains("Trouvez")) div[class*="bg-white"] > div:first-child {
    grid-template-columns: 2fr 2fr 2fr 1.5fr !important;
  }
}

/* Champs de recherche individuels - Style amélioré */
div:has(h1:contains("Trouvez")) div[class*="bg-white"] [class*="flex"],
div:has(input[placeholder*="Marque"]) div[class*="bg-white"] [class*="flex"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] [class*="flex"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Champs de saisie - Style JOLI et visible avec alignement parfait */
div:has(input[placeholder*="Marque"]) input,
div:has(input[placeholder*="Marque"]) select,
div:has(h1:contains("Trouvez")) input,
div:has(h1:contains("Trouvez")) select,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] input,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] select {
  background: #ffffff !important;
  border: 2px solid #d1d5db !important;
  border-radius: 0.625rem !important;
  padding: 1rem 1.25rem !important;
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

div:has(input[placeholder*="Marque"]) input:hover,
div:has(input[placeholder*="Marque"]) select:hover,
div:has(h1:contains("Trouvez")) input:hover,
div:has(h1:contains("Trouvez")) select:hover {
  border-color: #9ca3af !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

div:has(input[placeholder*="Marque"]) input:focus,
div:has(input[placeholder*="Marque"]) select:focus,
div:has(h1:contains("Trouvez")) input:focus,
div:has(h1:contains("Trouvez")) select:focus,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] input:focus,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] select:focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

/* Labels des champs - Gris foncé pour visibilité */
div:has(input[placeholder*="Marque"]) label,
div:has(h1:contains("Trouvez")) label,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] label {
  color: #374151 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Bouton Rechercher - Vert burkinabé JOLI avec texte blanc et alignement */
div:has(button:contains("Rechercher")) button,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-green"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button:has(svg),
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-bf-green"],
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button:has(svg) {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.625rem !important;
  padding: 1rem 2.5rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.4), 0 2px 4px -1px rgba(22, 163, 74, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: fit-content !important;
  align-self: end !important;
}

@media (min-width: 768px) {
  div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-bf-green"],
  div:has(h1:contains("Trouvez")) div[class*="bg-white"] button:has(svg) {
    width: auto !important;
  }
}

div:has(button:contains("Rechercher")) button:hover,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"]:hover,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-green"]:hover,
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-bf-green"]:hover {
  background: linear-gradient(135deg, #15803d, #16a34a) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.5), 0 4px 6px -2px rgba(22, 163, 74, 0.3) !important;
}

div:has(button:contains("Rechercher")) button:active,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"]:active {
  transform: translateY(0) !important;
}

/* Boutons de raccourcis (filtres) - Blanc solide avec texte sombre BIEN VISIBLE */
div:has(h1:contains("Trouvez")) button[class*="bg-white/20"],
div:has(h1:contains("Trouvez")) button[variant="outline"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[variant="outline"],
div:has(h1:contains("Trouvez")) button:not([class*="bg-bf-red"]):not([class*="bg-bf-green"]):not([class*="bg-yellow"]):not([class*="bg-red"]) {
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  color: #374151 !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-white/20"]:hover,
div:has(h1:contains("Trouvez")) button[variant="outline"]:hover,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[variant="outline"]:hover,
div:has(h1:contains("Trouvez")) button:not([class*="bg-bf-red"]):not([class*="bg-bf-green"]):not([class*="bg-yellow"]):not([class*="bg-red"]):hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Boutons de navigation (Rouge, Jaune, Vert) - Thème burkinabé avec gradients BEAUX */
div:has(h1:contains("Trouvez")) button[class*="bg-bf-red"],
div:has(h1:contains("Trouvez")) button[class*="bg-red"],
div:has(h1:contains("Trouvez")) button[class*="bg-red-600"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-red"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-red"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-red-600"] {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  background-color: #dc2626 !important;
  background-image: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.75rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.4), 0 2px 4px -1px rgba(220, 38, 38, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-bf-red"]:hover,
div:has(h1:contains("Trouvez")) button[class*="bg-red"]:hover,
div:has(h1:contains("Trouvez")) button[class*="bg-red-600"]:hover {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  background-color: #b91c1c !important;
  background-image: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 12px -2px rgba(220, 38, 38, 0.5), 0 4px 6px -1px rgba(220, 38, 38, 0.3) !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-yellow-600"],
div:has(h1:contains("Trouvez")) button[class*="bg-bf-yellow"],
div:has(h1:contains("Trouvez")) button[class*="bg-yellow-500"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-yellow-600"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-yellow"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-yellow-500"] {
  background: #ca8a04 !important;
  background-color: #ca8a04 !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-yellow-600"] svg,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-yellow"] svg,
div:has(h1:contains("Trouvez")) button[class*="bg-yellow-500"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-yellow"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-yellow-600"]:hover,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-yellow"]:hover,
div:has(h1:contains("Trouvez")) button[class*="bg-yellow-500"]:hover {
  background: #a16207 !important;
  background-color: #a16207 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"]:not([class*="Rechercher"]),
div:has(h1:contains("Trouvez")) button[class*="bg-green-600"]:not([class*="Rechercher"]),
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-green"]:not([class*="Rechercher"]),
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-green-600"]:not([class*="Rechercher"]) {
  background: #16a34a !important;
  background-color: #16a34a !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"]:not([class*="Rechercher"]):hover,
div:has(h1:contains("Trouvez")) button[class*="bg-green-600"]:not([class*="Rechercher"]):hover {
  background: #15803d !important;
  background-color: #15803d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Règle GLOBALE pour TOUS les boutons dans la Hero - Forcer les styles de base */
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button,
div[class*="bg-gradient"][class*="from-bf-red"] button {
  /* S'assurer que tous les boutons ont au moins un style de base */
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.75rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

/* Boutons avec classes spécifiques - Forcer les couleurs */
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="red"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-red"] {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  background-color: #dc2626 !important;
  background-image: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
}

div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="yellow"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-yellow"] {
  background: #ca8a04 !important;
  background-color: #ca8a04 !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="yellow"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-yellow"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="green"]:not([class*="bg-white"]),
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-green"]:not([class*="bg-white"]) {
  background: #16a34a !important;
  background-color: #16a34a !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Icônes SVG dans les boutons colorés - Forcer en BLANC pour visibilité */
div:has(h1:contains("Trouvez")) button[class*="bg-bf-red"] svg,
div:has(h1:contains("Trouvez")) button[class*="bg-red"] svg,
div:has(h1:contains("Trouvez")) button[class*="bg-yellow"] svg,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"] svg,
div:has(h1:contains("Trouvez")) button[class*="bg-green"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-red"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-red"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-yellow"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-bf-green"] svg,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="bg-green"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* Tous les éléments SVG dans les boutons colorés - Forcer en BLANC */
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="red"] svg path,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="red"] svg circle,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="yellow"] svg path,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="yellow"] svg circle,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="green"] svg path,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="green"] svg circle,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-red"] svg *,
div:has(h1:contains("Trouvez")) button[class*="bg-red"] svg *,
div:has(h1:contains("Trouvez")) button[class*="bg-yellow"] svg *,
div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"] svg *,
div:has(h1:contains("Trouvez")) button[class*="bg-green"] svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Texte dans les boutons colorés - Forcer en BLANC */
div:has(h1:contains("Trouvez")) button[class*="bg-bf-red"],
div:has(h1:contains("Trouvez")) button[class*="bg-red"],
div:has(h1:contains("Trouvez")) button[class*="bg-yellow"],
div:has(h1:contains("Trouvez")) button[class*="bg-bf-green"],
div:has(h1:contains("Trouvez")) button[class*="bg-green"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="red"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="yellow"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="green"] {
  color: #ffffff !important;
}

/* Texte et enfants dans les boutons colorés - Forcer en BLANC */
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="red"] *,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="yellow"] *,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button[class*="green"] * {
  color: #ffffff !important;
}

/* Icônes générales dans la Hero - Hériter de la couleur */
div:has(h1:contains("Trouvez")) svg:not(button svg),
div[class*="bg-gradient-to-r"][class*="from-bf-red"] svg:not(button svg) {
  color: inherit !important;
  fill: currentColor !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* Texte dans les boutons - Toujours visible */
div:has(h1:contains("Trouvez")) button,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] button {
  color: inherit !important;
}

/* Texte dans la barre de recherche - Toujours visible (noir sur blanc) */
div:has(h1:contains("Trouvez")) div[class*="bg-white"] *:not(button[class*="bg-bf-green"] *):not(button[class*="bg-green"] *),
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] *:not(button[class*="bg-bf-green"] *):not(button[class*="bg-green"] *) {
  color: #111827 !important;
}

/* Exception: Texte blanc dans les boutons colorés même dans la barre de recherche */
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-bf-green"] *,
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-green"] *,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] button[class*="bg-bf-green"] *,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] button[class*="bg-green"] * {
  color: #ffffff !important;
}

/* Exceptions pour les boutons colorés dans la barre de recherche */
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-bf-green"],
div:has(h1:contains("Trouvez")) div[class*="bg-white"] button[class*="bg-green"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] button[class*="bg-bf-green"],
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] button[class*="bg-green"] {
  color: #ffffff !important;
}

/* Labels et textes dans les champs de recherche */
div:has(h1:contains("Trouvez")) div[class*="bg-white"] label,
div:has(h1:contains("Trouvez")) div[class*="bg-white"] span:not(button),
div:has(h1:contains("Trouvez")) div[class*="bg-white"] p,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] label,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] span:not(button),
div[class*="bg-gradient-to-r"][class*="from-bf-red"] div[class*="bg-white"] p {
  color: #374151 !important;
  font-weight: 500 !important;
}

/* Placeholders des inputs - Gris visible */
div:has(h1:contains("Trouvez")) input::placeholder,
div:has(h1:contains("Trouvez")) select::placeholder,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] input::placeholder,
div[class*="bg-gradient-to-r"][class*="from-bf-red"] select::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Protection contre les modifications du script dashboard */
div[class*="bg-gradient-to-r"][class*="from-bf-red"],
div:has(h1:contains("Trouvez Votre Véhicule Idéal")) {
  /* Ne jamais permettre au script dashboard de modifier cette section */
  background: linear-gradient(to right, #dc2626 0%, #eab308 50%, #16a34a 100%) !important;
  background-image: linear-gradient(to right, #dc2626 0%, #eab308 50%, #16a34a 100%) !important;
}