/* ==========================================================================
   Bandeau « Site de démonstration » — commun à toutes les démos
   Utilisation : <link rel="stylesheet" href="../_commun/bandeau-demo.css">
   puis coller le HTML du bandeau juste après <body> (voir README des démos).
   ========================================================================== */
/* Non collant : il défile avec la page pour laisser l'en-tête du site démo seul en haut. */
.gc-bandeau {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1rem;
  padding: 0.3rem 1rem;
  background: #14213d;
  color: #ffffff;
  font: 500 0.875rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}
.gc-bandeau strong { color: #ffb547; font-weight: 700; }
.gc-bandeau a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* zone tactile confortable sur mobile */
  color: #14213d;
  background: #ffb547;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .gc-bandeau { font-size: 0.8rem; gap: 0.25rem 0.75rem; }
}
.gc-bandeau a:hover,
.gc-bandeau a:focus-visible { background: #ffffff; outline: none; }