/* ============================================================
   TOPBAR VITALID — STYLE GLOBAL
============================================================ */

/* Wrapper pour augmenter la priorité */
#vitalid-topbar-wrapper {
  width: 100%;
  position: fixed;
  z-index: 99999999;
}

/* Barre principale */
#vitalid-topbar-wrapper .vitalid-topbar {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;

  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;

  color: #1C1C1C;
  background-color: #3BA6D8;

  /* Hauteur stable même avec position:absolute des messages */
  min-height: 40px;

  transition: background-color 0.5s ease;
}

/* ============================================================
   MESSAGES — ANIMATION HORIZONTALE
============================================================ */

#vitalid-topbar-wrapper .vitalid-message {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 16px;
  text-align: center;

  white-space: normal; /* autorise retour à la ligne si besoin */

  opacity: 0;
  transform: translateX(100%);

  transition:
     transform 1500ms cubic-bezier(.22,.61,.36,1),
    opacity 250ms ease;

  will-change: transform, opacity;
}

/* Message visible (au centre) */
#vitalid-topbar-wrapper .vitalid-message.active {
  opacity: 1;
  transform: translateX(0);
}

/* Message qui sort vers la gauche */
#vitalid-topbar-wrapper .vitalid-message.exit {
  opacity: 0;
  transform: translateX(-100%);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767px) {
  #vitalid-topbar-wrapper .vitalid-topbar {
    font-size: 12px;
    padding: 4px 4px;
    min-height: 40px;
  }

  /*#vitalid-topbar-wrapper .vitalid-message {
    padding: 0 10px;
  }*/
}