/* ==========================================================================
   ESSAI : menus intégrés au bandeau
   Activé par GL_BANDEAU_INTEGRE = true dans config/fonctions.inc
   ========================================================================== */
/* boutons du menu : pastilles claires, le bouton actif en violet (toutes tailles) */
.bandeau:has(.nav-principale) .nav-principale { background: none; padding: 0; overflow: visible; }
.bandeau .nav-groupe { gap: .3rem; padding: .25rem; border-radius: 14px; background: rgba(255,255,255,.72); border: 1px solid var(--violet-200); box-shadow: 0 2px 8px rgba(62, 42, 158, .06); }
.bandeau .nav-droite { gap: .5rem; }
.bandeau .nav-droite > .nav-groupe + .nav-groupe { border-left: 1px solid var(--violet-200); padding-left: .25rem; }
.bandeau .nav-btn { color: var(--violet-900); padding: .42rem .8rem; border-radius: 10px; font-size: .9rem; transition: background-color .15s, color .15s, box-shadow .15s; }
.bandeau .nav-btn .ico { color: var(--violet-600); }
.bandeau .nav-btn:hover { background: var(--violet-100); color: var(--violet-700); }
.bandeau .nav-btn.actif { background: linear-gradient(135deg, var(--violet-600), #7b4fd6); color: #fff; box-shadow: 0 4px 12px rgba(91, 63, 209, .32); }
.bandeau .nav-btn.actif .ico { color: #fff; }
.bandeau .nav-btn-don .ico { color: #d0457a; }
.bandeau .nav-btn-alerte .ico { color: var(--rouge); }
.bandeau .nav-btn-alerte .pastille { box-shadow: 0 0 0 2px #fff; top: .3rem; left: 1.6rem; }
.bandeau .nav-btn-inactif { opacity: .55; }
.bandeau .nav-btn-inactif:hover { background: transparent; }
.bandeau .btn-session { padding: .5rem .9rem; border-radius: 12px; }

/* ordinateur : une seule ligne logo | identité | menus | date + déconnexion */
@media (min-width: 861px) {
  .bandeau:has(.nav-principale) { display: flex; align-items: center; gap: .9rem; padding: .3rem 1rem; min-height: 64px; }
  .bandeau:has(.nav-principale) .bandeau-haut { display: contents; }
  .bandeau:has(.nav-principale) .logo { order: 1; }
  .bandeau:has(.nav-principale) .identite { order: 2; max-width: 210px; padding-left: .9rem; }
  .bandeau:has(.nav-principale) .identite-etab { font-size: .85rem; }
  .bandeau:has(.nav-principale) .nav-principale { order: 3; flex: 1; justify-content: center; gap: .8rem; }
  .bandeau:has(.nav-principale) .bandeau-droite { order: 4; margin-left: 0; gap: .8rem; }
  .bandeau:has(.nav-principale) .date-jour { display: inline; white-space: nowrap; font-size: .88rem; }
  /* date au-dessus du bouton de déconnexion quand la place manque */
  @media (max-width: 1640px) {
    .bandeau:has(.nav-principale) .bandeau-droite { flex-direction: column; align-items: flex-end; gap: .15rem; }
    .bandeau:has(.nav-principale) .date-jour { font-size: .76rem; line-height: 1.1; }
    .bandeau .btn-session { padding: .32rem .8rem; font-size: .85rem; }
  }
}
/* écrans moyens : seuls les pictogrammes du menu restent (sauf le bouton actif) */
@media (min-width: 861px) and (max-width: 1300px) {
  .bandeau .nav-btn:not(.actif) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bandeau .nav-btn:not(.actif) { padding: .45rem .6rem; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .bandeau:has(.nav-principale) .date-jour { display: none; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .bandeau:has(.nav-principale) .identite { display: none; }
  .bandeau .btn-session span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* smartphone / tablette : logo + déconnexion, puis les boutons du menu en pastilles */
@media (max-width: 860px) {
  .bandeau:has(.nav-principale) .bandeau-haut { padding-bottom: .1rem; }
  .bandeau:has(.nav-principale) .nav-principale { padding: .2rem .7rem .5rem; justify-content: space-between; gap: .4rem; }
  .bandeau .nav-btn { padding: .5rem .62rem; }
  .bandeau .nav-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bandeau .nav-droite { gap: .4rem; }
  .bandeau:has(.nav-principale) .date-jour { display: none; }
}
@media (max-width: 380px) {
  .bandeau .nav-btn { padding: .45rem .48rem; }
  .bandeau .nav-groupe { padding: .2rem; gap: .15rem; }
}