/* ===== OVERRIDE ABSOLU ORANGE - DERNIÈRE PRIORITÉ ===== */
/* Ce fichier doit être chargé en dernier pour override tous les autres styles */

/* Variables pour consistance */
:root {
  --orange-force: #fb923c;
  --orange-hover: #ea580c;
  --orange-shadow: rgba(251, 146, 60, 0.4);
}

/* SLIDER THUMB - FORCE MAXIMALE */
input[type="range"]::-webkit-slider-thumb {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 22px !important;
  width: 22px !important;
  border-radius: 50% !important;
  border: 2px solid white !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px var(--orange-shadow) !important;
}

input[type="range"]::-moz-range-thumb {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  background-image: none !important;
  -moz-appearance: none !important;
  height: 22px !important;
  width: 22px !important;
  border-radius: 50% !important;
  border: 2px solid white !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px var(--orange-shadow) !important;
}

input[type="range"]::-ms-thumb {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  background-image: none !important;
  height: 22px !important;
  width: 22px !important;
  border-radius: 50% !important;
  border: 2px solid white !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px var(--orange-shadow) !important;
}

/* SELECT ET OPTIONS - TOUS LES ÉTATS */
select:focus {
  border-color: var(--orange-force) !important;
  box-shadow: 0 0 0 2px var(--orange-shadow) !important;
  outline: none !important;
}

/* Options des select - TOUS les états possibles */
select option {
  background: white !important;
  color: black !important;
}

select option:focus,
select option:hover,
select option:active {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  color: white !important;
}

select option:checked,
select option[selected] {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  color: white !important;
}

/* Force pour les options en survol sur tous les navigateurs */
select option:hover {
  background-color: var(--orange-force) !important;
  background: var(--orange-force) !important;
  color: white !important;
}

/* WebKit spécifique pour les options */
select option:focus {
  background-image: none !important;
  background-color: var(--orange-force) !important;
  color: white !important;
}

/* Firefox spécifique */
select:-moz-focusring option:checked {
  background: var(--orange-force) !important;
  color: white !important;
}

/* FORCE ABSOLUE - OVERRIDE BRUTAL pour les options */
option {
  background: white !important;
  background-color: white !important;
  color: black !important;
}

option:hover,
option:focus,
option:active,
option:checked,
option[selected] {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  background-image: none !important;
  color: white !important;
  outline: none !important;
  border: none !important;
}

/* Suppression de TOUS les bleus possibles */
option[style*="blue"],
option[style*="#007bff"],
option[style*="#0066cc"],
option[style*="rgb(0, 123, 255)"] {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  color: white !important;
}

/* Force pour tous les pseudo-états */
select option:nth-child(even):hover,
select option:nth-child(odd):hover {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  color: white !important;
}

/* BOUTONS */
button:focus,
button:hover {
  border-color: var(--orange-force) !important;
  box-shadow: 0 0 0 2px var(--orange-shadow) !important;
}

/* TOUS LES FOCUS */
*:focus {
  outline: none !important;
  border-color: var(--orange-force) !important;
  box-shadow: 0 0 0 2px var(--orange-shadow) !important;
}

/* SUPPRESSION FORCÉE DES BLEUS */
*[class*="blue"] {
  border-color: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
}

/* TAILWIND OVERRIDE */
.focus\:ring-blue-500:focus,
.focus\:border-blue-500:focus {
  --tw-ring-color: var(--orange-force) !important;
  border-color: var(--orange-force) !important;
}

/* FORCE ABSOLUE pour les options de select sur tous navigateurs */
select > option:hover,
select > option:focus,
select > option:active {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  background-image: none !important;
  color: white !important;
}

/* Chrome/Safari spécifique */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select option:hover {
    background: var(--orange-force) !important;
    background-color: var(--orange-force) !important;
    color: white !important;
  }
}

/* Firefox spécifique */
@-moz-document url-prefix() {
  select option:hover {
    background: var(--orange-force) !important;
    background-color: var(--orange-force) !important;
    color: white !important;
  }
}

/* Edge spécifique */
@supports (-ms-ime-align:auto) {
  select option:hover {
    background: var(--orange-force) !important;
    background-color: var(--orange-force) !important;
    color: white !important;
  }
}

/* DÉCLARATION ULTIME - ANIMATION POUR FORCER LE CHANGEMENT */
@keyframes forceOrange {
  0%, 100% {
    background-color: var(--orange-force) !important;
    color: white !important;
  }
}

select option:hover,
select option:focus,
select option:active {
  animation: forceOrange 0.1s ease-in-out !important;
  animation-fill-mode: forwards !important;
}

/* Sélecteur CSS ultra-spécifique */
html body div select option:hover,
html body div select option:focus,
html body div select option:active,
html body div select option:checked {
  background: var(--orange-force) !important;
  background-color: var(--orange-force) !important;
  background-image: none !important;
  color: white !important;
  border: none !important;
  outline: none !important;
}