/* Fond de la barre */
.navbar.bg-dark {
  background-color: #7CB342 !important;
}

/* Texte des liens */
.navbar-dark .navbar-nav .nav-link {
  color: white !important;
}

/* Au survol */
.navbar-dark .navbar-nav .nav-link:hover {
  background-color: rgba(255,255,255,0.2) !important;
  color: #ffd700 !important;   /* jaune/or au survol */
}

.navbar-brand img.logo-img {
  height: 50px;              /* hauteur du logo – ajuste selon ton image */
  width: auto;               /* garde les proportions */
  max-height: 50px;          /* limite pour mobile */
  margin-right: 10px;        /* espace à droite si besoin */
}

/* Pour mobile : réduire la taille */
@media (max-width: 768px) {
  .navbar-brand img.logo-img {
    height: 35px;
  }
}

/* Limite la navbar à 80 % et la centre */
.navbar.navbar-expand-md.fixed-top {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  max-width: 1200px !important;   /* optionnel : limite max pour grands écrans */
  margin: 0 auto !important;      /* centre horizontalement */
  border-radius: 0 0 10px 10px !important;  /* coins arrondis en bas – optionnel */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;  /* petite ombre – optionnel */
}

/* Garde le contenu à l'intérieur bien centré */
.navbar .container,
.navbar .container-fluid {
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* === Styles pour les dropdowns (sous-menus des pages enfants) === */

/* Fond du dropdown : un vert très sombre pour cohérence avec #7CB342 */
.navbar-dark .dropdown-menu {
  background-color: #5a8c2e !important;  /* Vert foncé dérivé de #7CB342 */
  border: 1px solid #6ea137 !important; /* Bordure légèrement plus claire */
  border-top: none !important;           /* Collé au parent */
  margin-top: 0 !important;
  padding: 0.3rem 0 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35) !important;
  border-radius: 0 0 8px 8px !important; /* Coins arrondis en bas comme la navbar */
}

/* Items des sous-menus */
.navbar-dark .dropdown-item {
  color: #ffffff !important;             /* Blanc pur pour lisibilité */
  padding: 0.6rem 1.5rem !important;
  font-size: 0.96rem !important;
}

/* Hover sur items enfants : même effet que les liens principaux */
.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
  background-color: rgba(255,255,255,0.15) !important;
  color: #ffd700 !important;             /* Or au survol, comme les parents */
}

/* Item actif dans le sous-menu (quand on est sur la page enfant) */
.navbar-dark .dropdown-item.active {
  background-color: rgba(0,0,0,0.3) !important;
  color: #ffd700 !important;
  font-weight: 500;
}

/* Flèche du dropdown (caret) plus visible et cohérente */
.dropdown-toggle::after {
  border-top-color: #ffffff !important;
  margin-left: 0.6em;
}

/* Option sympa : hover sur le parent entier (texte + fond subtil) */
.nav-item.dropdown:hover > .nav-link.dropdown-toggle {
  background-color: rgba(255,255,255,0.15) !important;
  color: #ffd700 !important;
}

/* Ouverture au survol (desktop) – très pratique */
@media (min-width: 768px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block !important;
  }
}