/**
 * Styles pour le toggle dark/light mode
 * Assure que les icônes moon/sun sont bien centrées
 * ET override les règles du template qui inversent la visibilité
 */

/* Dimensions et style de base pour les liens moon/sun */
.nav-link.moon,
.nav-link.sun {
  width: 40px;
  height: 40px;
  padding: 0;
  transition: all 0.3s ease;
}

/* Centrer les icônes à l'intérieur */
.nav-link.moon i,
.nav-link.sun i {
  font-size: 1.25rem;
}

/* Hover effect */
.nav-link.moon:hover,
.nav-link.sun:hover {
  transform: scale(1.1);
}

/*
 * RÈGLES CRITIQUES : Forcer le respect de d-none et d-flex
 * Ces règles doivent override le template qui inverse la visibilité
 */

/* Forcer d-flex à être visible - règles très spécifiques pour gagner en priorité */
html.dark-layout .nav-link.sun.d-flex,
html.light-layout .nav-link.sun.d-flex,
.nav-link.sun.d-flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

html.dark-layout .nav-link.moon.d-flex,
html.light-layout .nav-link.moon.d-flex,
.nav-link.moon.d-flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Forcer d-none à être caché - règles très spécifiques pour gagner en priorité */
html.dark-layout .nav-link.moon.d-none,
html.light-layout .nav-link.moon.d-none,
.nav-link.moon.d-none {
  display: none !important;
}

html.dark-layout .nav-link.sun.d-none,
html.light-layout .nav-link.sun.d-none,
.nav-link.sun.d-none {
  display: none !important;
}