/* =====================================================
   PREMIUM HEADER FIX — Ma'rifat Allah
   Neutralise les conflits de modern-header.css
   Ce fichier DOIT être chargé APRÈS premium-header.css
   ===================================================== */

/*
  PROBLÈME : modern-header.css contient des animations
  fadeInUp qui démarrent à opacity:0, et des règles
  génériques qui écrasent les styles du premium-header.
  Ce fichier remet tout en ordre avec !important.
*/

/* ── 1. Reset complet sur tous les éléments du nav ── */
.premium-header *,
.premium-nav *,
.premium-nav .nav-btn,
.premium-nav .nav-btn * {
  animation-play-state: running;
}

/* ── 2. Le texte des boutons nav — TOUJOURS VISIBLE ── */
.premium-nav .nav-btn-text {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1F2937 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  /* reset de propriétés qui peuvent cacher le texte */
  text-indent: 0 !important;
  font-size: 0.9rem !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

/* ── 3. Conteneur nav-btn-content ── */
.premium-nav .nav-btn-content {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── 4. Le bouton nav lui-même ── */
.premium-nav .nav-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  color: #1F2937 !important;
}

/* ── 5. Icône emoji ── */
.premium-nav .nav-btn-icon {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* ── 6. Badge CORAN ── */
.premium-nav .nav-btn-badge {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  background: #C9A661 !important;
  color: white !important;
}

/* ── 7. Flèche dropdown ── */
.premium-nav .nav-btn-arrow {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 0.6 !important;
  animation: none !important;
}

/* ── 8. Hover et état actif ── */
.premium-nav .nav-btn:hover .nav-btn-text,
.premium-nav .nav-btn.active .nav-btn-text {
  color: #2D5F4F !important;
}

/* ── 9. Dark mode ── */
[data-theme="dark"] .premium-nav .nav-btn-text {
  color: #E5E7EB !important;
}

[data-theme="dark"] .premium-nav .nav-btn {
  color: #E5E7EB !important;
}

[data-theme="dark"] .premium-nav .nav-btn:hover .nav-btn-text,
[data-theme="dark"] .premium-nav .nav-btn.active .nav-btn-text {
  color: #6ee7b7 !important;
}

/* ── 10. Neutralise les pseudo-éléments de modern-header ── */
.premium-nav .nav-btn::before,
.premium-nav .nav-btn::after {
  display: none !important;
  content: none !important;
}

/* ── 11. Assure le fond blanc du header ── */
.premium-header {
  background: #FFFFFF !important;
}

[data-theme="dark"] .premium-header {
  background: #1A202C !important;
}