/* Style de la barre de notification */

      .notification-banner {
          background-color: #ff0000ab; /* Default error/info */
          backdrop-filter: blur(8px);
          color: white;
          border: 2px solid #232323;
          top: 130px;
          
          /* MODIFICATIONS POUR CENTRER */
          width: 20%;           /* Ta largeur fixe */
          margin-right: 40%;
          margin-left: 40%;    /* 10px en haut/bas, AUTO à gauche/droite pour centrer */
          
          border-radius: 20px;
          padding: 12px 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: fixed;
          z-index: 10000;
          box-shadow: 0 2px 10px rgba(0,0,0,0.2);
          
          /* Animation d'arrivée */
          animation: slideDown 0.5s ease-out;
          pointer-events: none; /* Let clicks pass through if not clicked close btn */
          visibility: hidden;
          opacity: 0;
          transition: visibility 0s, opacity 0.5s linear;
      }

      .notification-banner.show {
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
      }

      .notification-banner.success {
          background-color: #009b00ab; /* Green for success */
      }

      .notification-banner.error {
          background-color: #ff0000ab; /* Red for error */
      }

      /* IMPORTANT : Version Mobile */
      /* 25% sur un téléphone, c'est illisible. On l'agrandit sur petit écran */
      @media (max-width: 768px) {
          .notification-banner {
          width: 80%; /* Prend presque toute la largeur sur mobile */
          top: 120px;
          
          /* MODIFICATIONS POUR CENTRER */
          /*width: 35%;           /* Ta largeur fixe */
          margin: auto 10% auto;   /* 10px en haut/bas, AUTO à gauche/droite pour centrer */
          align-items: center;
          text-align: center;
          /*left: 50%; /* On place le début de la boîte à 50% de l'écran */
          border-radius: 20px;
          padding: 12px 20px;
          display: flex;
            justify-content: center; /* Centre horizontalement les éléments à l'intérieur */
                align-items: center;
          position: fixed;
          z-index: 900;
          }
      }

      .notification-content {
          display: flex;
          align-items: center;
          text-align: center;
          gap: 10px;
          justify-content: center;
          left: 50%;
          font-size: 0.95rem;
          font-family: sans-serif;
      }

      .notification-content .icon {
          font-size: 1.2rem;
      }

      /* Bouton fermer (la croix) */
      .close-btn {
          background: none;
          border: none;
          color: rgba(255, 255, 255, 0.8);
          font-size: 1.5rem;
          cursor: pointer;
          padding: 0 5px;
          transition: color 0.3s;
      }

      .close-btn:hover {
          color: white;
      }

      /* L'animation */
      @keyframes slideDown {
          from {
              transform: translateY(-100%);
              opacity: 0;
          }
          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      /* Responsive : sur mobile, on réduit un peu le texte */
      @media (max-width: 600px) {
          .notification-content p {
              font-size: 0.8rem;
          }
      }