/* ====== Barre ====== */
.navbar-custom { background-color: #000 !important; }
.navbar-custom .navbar-brand img { border-radius: 50%; margin-right: 8px; }
.navbar-custom .nav-link.active { font-weight: normal; text-decoration: none; }
.navbar-custom .navbar-toggler { width:auto!important; padding:.25rem .75rem; font-size:1.25rem; line-height:1; }

/* Décalage sous navbar fixed-top */
.hheight { height:75px; }

/* ====== Responsive ====== */
@media (max-width: 576px) {
  .navbar-custom .navbar-nav .nav-link { font-size:1.4rem; padding-top:1rem; }
  .navbar-custom .dropdown-menu { font-size:1.2rem; padding-top:.5rem; }
  .navbar-custom .navbar-brand { font-size:1.4rem; }
  /* IMPORTANT: on ne cible plus .d-flex globalement ! */
  .navbar-custom .d-flex { padding-bottom:1rem; padding-top:1rem; }
  .hheight { height:95px; }
}

/* ====== Cloche / panneau ====== */
.navbar-custom .notif-bell {
  position:relative; display:inline-block; cursor:pointer; font-weight:normal; margin-right:40px;
}
.navbar-custom .notif-bell svg { display:block; }

.navbar-custom .notif-count {
  position:absolute; top:-6px; right:-6px; background:red; color:#fff; font-size:.7rem;
  font-weight:bold; border-radius:50%; padding:2px 6px; line-height:1;
}

.navbar-custom .notif-panel {
  position:absolute; top:calc(100% + 16px); right:0; background:#fff; color:#000; min-width:300px;
  padding:10px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.18);
  z-index:1051; /* au-dessus de la navbar + dropdowns */
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  transform-origin:top right;
}
.navbar-custom .notif-panel.is-open {
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease;
}
.navbar-custom .notif-panel::before {
  content:""; position:absolute; top:-8px; right:14px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff;
  filter:drop-shadow(0 -1px 1px rgba(0,0,0,.06));
}
.navbar-custom .notif-panel p {
  margin:0 0 8px 0; font-weight:normal; border-bottom:1px solid #eaeaea; padding-bottom:6px;
}
.navbar-custom .notif-panel ul { list-style:none; margin:0; padding:0; }
.navbar-custom .notif-panel li { padding:8px 0; border-bottom:1px solid #f0f0f0; }
.navbar-custom .notif-panel li:last-child { border-bottom:none; }

/* Bouton vue dans le panneau */
.navbar-custom .btn-view {
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  background:#007bff; color:#fff; border:none; border-radius:50%; text-decoration:none; cursor:pointer;
}
.navbar-custom .btn-view:hover { background:#0056b3; }
.navbar-custom .btn-view svg { width:16px; height:16px; fill:#fff; }

/* On scope le 'small' pour ne pas toucher tout le site */
.navbar-custom .notif-panel small { color:#666; margin-left:10px; }

/* ===== Couleurs des items de menu ===== */

/* Liens de 1er niveau = blancs */
.navbar-custom .navbar-nav > .nav-item > .nav-link {
  color: #fff !important;
  transition: color .15s ease;
}

/* Hover/focus = orange */
.navbar-custom .navbar-nav > .nav-item > .nav-link:hover,
.navbar-custom .navbar-nav > .nav-item > .nav-link:focus {
  color: #ff9800 !important; /* orange */
}

/* Actif = orange (utilise la classe .active que tu poses en PHP) */
.navbar-custom .navbar-nav > .nav-item > .nav-link.active,
.navbar-custom .nav-item.dropdown.show > .nav-link {
  color: #ff9800 !important;
}

/* Icônes = même couleur que le texte */
.navbar-custom .navbar-nav .nav-link i {
  color: inherit !important;
}

/* Marque/brand en blanc */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand span {
  color: #fff !important;
}

/* Dropdown : garder lisible (fond blanc, texte sombre) */
.navbar-custom .dropdown-menu {
  background: #fff;
}
.navbar-custom .dropdown-menu .dropdown-item {
  color: #212529;
}
.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus,
.navbar-custom .dropdown-menu .dropdown-item.active {
  color: #ff9800;  /* orange au survol/actif */
  background: #fff;
}

/* Cloche (par défaut blanche) */
.navbar-custom .notif-bell > svg {
  fill: #fff !important;
}

/* Cloche orange au hover/focus et quand le panneau est ouvert */
.navbar-custom .notif-bell:hover > svg,
.navbar-custom .notif-bell:focus-within > svg {
  fill: #ff9800 !important;
}
.navbar-custom .notif-bell:has(.notif-panel.is-open) > svg {
  fill: #ff9800 !important;
}

/* OEIL dans le panneau : toujours blanc, même quand la cloche est hover */
.navbar-custom .notif-panel .btn-view svg {
  fill: #fff !important;
}
.navbar-custom .notif-panel .btn-view:hover svg,
.navbar-custom .notif-panel .btn-view:focus svg {
  fill: #fff !important; /* reste blanc au survol du bouton */
}