/* The alert message box */
/*
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
}
   
.notes {
        width: auto;
        padding: 8px 10px 8px 10px;
        margin-bottom: 0px;
        font-size: 26px;
        color: white;
   
      -webkit-animation: scale-out-tr 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
              animation: scale-out-tr 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
}
*/

/*Note: La classe 'sticky' soit être supprimée de #res*/
.notes {
  position: fixed;       /* fixe par rapport à la fenêtre */
  top: 0;                /* tout en haut du viewport */
  left: 0;               /* largeur plein écran */
  right: 0;
  margin: 0 auto;        /* centrage horizontal si tu fixes une largeur max */
  width: 100%;           /* ou max-width: 600px; si tu veux limiter la largeur */
  padding: 8px 10px;
  font-size: 26px;
  color: white;
  background: transparent; /* ou la couleur de ton choix */
  text-align: left;
  z-index: 9999;         /* par-dessus tout le reste */

  /* animation d’apparition/disparition */
  animation: scale-out-tr 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
}

  @-webkit-keyframes scale-out-tr {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
  }
  @keyframes scale-out-tr {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
  }