/* Hôte : réserve la hauteur ; les barres en position:fixed (JS) flottent au-dessus du scroll */
#app-container .app-annonce-banner-host {
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  width: 100%;
  min-height: min-content;
}

#app-container .app-annonce-banner-host--fixed {
  /* La zone réservée ne capte pas les clics (les barres remettent pointer-events: auto) */
  pointer-events: none;
}

#app-container .app-annonce-banner {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#app-container .app-annonce-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5rem;
  max-width: 100%;
  position: relative;
}

#app-container .app-annonce-banner-text {
  flex: 1;
  min-width: 0;
}

#app-container .app-annonce-banner-title {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  margin: 0 0 0.15rem;
}

#app-container .app-annonce-banner-msg {
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
  opacity: 0.95;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#app-container .app-annonce-banner-text--solo .app-annonce-banner-msg {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

#app-container .app-annonce-banner-dismiss {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.35rem 0.45rem;
  margin: -0.15rem -0.2rem -0.15rem 0;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

#app-container .app-annonce-banner-dismiss:hover {
  opacity: 1;
}

#app-container .app-annonce-banner--neutral {
  background: linear-gradient(90deg, #1e3a5f 0%, #2d4a6f 100%);
  color: #fff;
}

#app-container .app-annonce-banner--warning {
  background: linear-gradient(90deg, #b8941e 0%, #e8c84a 100%);
  color: #1a1510;
}

#app-container .app-annonce-banner--brand {
  background: linear-gradient(90deg, #b8941e 0%, #d4af37 55%, #e8c84a 100%);
  color: #fff;
}

/* Accueil (#dashboard-screen) : bandeau au-dessus du titre « Système Admin » et des icônes cloche / clavardage */
#dashboard-screen.has-annonce-banner-over-header .dashboard-header {
  position: relative;
  z-index: 1;
}

#dashboard-screen .app-annonce-banner-host--over-header.app-annonce-banner-host--fixed {
  min-height: 0;
}

#dashboard-screen .app-annonce-banner-host--over-header .app-annonce-banner {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Notes / Employé : bandeau dans .note-search-wrap, par-dessus le champ */
#note-screen.has-annonce-banner-over-search .note-search-wrap,
#gestion-compte-screen.has-annonce-banner-over-search .note-search-wrap {
  overflow: visible;
}

#note-screen .note-search-wrap > .app-annonce-banner-host--in-anchor,
#gestion-compte-screen .note-search-wrap > .app-annonce-banner-host--in-anchor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#note-screen .note-search-wrap > .app-annonce-banner-host--in-anchor .app-annonce-banner,
#gestion-compte-screen .note-search-wrap > .app-annonce-banner-host--in-anchor .app-annonce-banner {
  position: relative;
  width: 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Photos (#photos) : même règle que Notes — bandeau sur la recherche */
#photos-screen.has-annonce-banner-over-search .photos-search-wrap {
  overflow: visible;
}

#photos-screen .photos-search-wrap > .app-annonce-banner-host--in-anchor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#photos-screen .photos-search-wrap > .app-annonce-banner-host--in-anchor .app-annonce-banner {
  position: relative;
  width: 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}