@charset "UTF-8";
/* ==========================================================================
   CONSTELLATION 50 — Habillage de la démonstration hors ligne
   Uniquement le bandeau « démo ». Ne fait pas partie de l'application réelle.
   ========================================================================== */

.demo-pastille {
  position: fixed;
  left: var(--e-5);
  bottom: var(--e-5);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  border: 1px solid rgba(94, 231, 245, 0.32);
  border-radius: var(--r-full);
  background: rgba(9, 20, 38, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombre-douce);
  font-family: var(--f-data);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.demo-pastille::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulsation 2.4s ease-in-out infinite;
}

.demo-pastille button {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--brume);
  font: inherit;
  cursor: pointer;
  transition: color 0.24s var(--doux), border-color 0.24s var(--doux);
}
.demo-pastille button:hover { color: var(--lin); border-color: var(--trait-or); }

@media (max-width: 720px) {
  .demo-pastille {
    left: var(--e-4);
    bottom: var(--e-4);
    padding: 0.4rem 0.45rem 0.4rem 0.75rem;
    font-size: 0.58rem;
  }
  .demo-pastille span { display: none; }
}

/* Encart d'explication en tête des pages de démonstration */
.demo-note {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin-block: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border: 1px dashed rgba(94, 231, 245, 0.35);
  border-radius: var(--r-md);
  background: rgba(94, 231, 245, 0.05);
  font-size: var(--t-sm);
  color: var(--brume);
}
.demo-note b { color: var(--cyan); font-weight: 600; }
.demo-note a { color: var(--or); }