body {
    padding:0;margin:0 auto;
    font-family: 'Orbitron', sans-serif;
    background: radial-gradient(ellipse at center, #0f2027, #203a43, #2c5364);
    background-attachment: fixed; /* Garde le dégradé en place */;
    position:relative;
    top: -35px;
	
}

/* Accélère le fondu */
body {
  opacity: 0;
  transition: opacity 6s ease-in;
}
body.loaded {
  opacity: 1;
}

/* Accélère le glissement de la box */
#box {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 5s ease-out, transform 5s ease-out;
}
#box.show-box {
  opacity: 1;
  transform: translateY(0);
}

/* Overlay de fond */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
  z-index: 0;
  opacity: 0;
  transition: opacity 3s ease-in;
}
.overlay.show {
  opacity: 1;
}


#head{
    display: block;
    background: white;
    width: 100%;
    height: 230px;
    position:relative;
    top:-37px;
    z-index: 1;
	border-width:5px;
    border-bottom-style: outset;
	border-color :red;
	border-top-style: outset;
}
#logo{
position: relative;
    top:0px;
}

legend{
    position:relative;
    top:10px;
    color:#fde100;;
    font-size: 20px;
    font-family:sans-serif;
	margin-top: 1rem !important;
    margin-bottom: 1rem !important;

}
}
legend1{
    position:relative;
    top:5px;
    color:#b11709;
    font-size: 12px;
    font-family:sans-serif;
    margin-top: 1rem !important;
   margin-bottom: 1rem !important;

}
}


#box {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
#box.show-box {
  opacity: 1;
  transform: translateY(0);
}
#box.hide-box {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}



#boton:active {
  transform: scale(0.98);
  background-color: #004ba0;
}


#user:focus, #pass:focus {
  border-bottom: 2px solid #1976D2;
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 2s ease-in-out;
}


#userdiv {
  transition: transform 0.3s ease-in-out;
}
#userdiv:hover {
  transform: scale(1.1);
}




#tableau {
    position: relative;
    top: -140px;
    width: 80%; /* Ajuste la largeur en fonction de l'écran */
    max-width: 280px; /* Limite la largeur pour les grands écrans */
    height: auto; /* La hauteur est automatique pour s'adapter au contenu */
    border-width: 2px;
    border-bottom-style: outset;
    border-color: red;
    border-top-style: outset;
    border-radius: 18px;
    text-align: center;
    padding: 10px; /* Ajuste les espaces internes */
    background-color: #add0e81a;
    margin: 0px auto;
    z-index: 2;
}

/* Responsive pour les petits écrans */
@media (max-width: 600px) {
    #tableau {
        width: 90%; /* Prend plus de place sur les petits écrans */
        max-width: 75%; /* Ne limite pas la largeur */
        height: auto; /* Assure que la hauteur s'adapte */
        padding: 5px; /* Moins de padding sur les petits écrans */
    }
}

#userdiv
{
    background: rgba(255,255,255,1) url(../img/ls1.png) no-repeat center;
    width: 95px;
    height: 95px;
    border-radius: 50%;
	border-bottom-style: outset;
	border-top-style: outset;
	border-width:0px;
	border-color :blue;
    margin: opx 10px;
}


/**------------USER------------**/
#user{
border:0px #ccc solid;
border-bottom:1px #ccc solid; color:#212121;background:rgba(255,255,255,0.1);opacity: 1;
height:40px;font-size:16px;
display:block;width:230px;
text-align:center;border-radius:0px;
font-family:inherit;outline: none;
}
/**--------------------PASSWORD----------**/
#pass{
    border:0px #ccc solid;
    border-bottom:1px #ccc solid;
    color:#212121;background:rgba(255,255,255,0.1);opacity: 1;height:40px;font-size:16px;
display:block;margin:5px;width:230px;text-align:center;border-radius:0px;font-family:inherit;outline: none;
}
/*---------------Boton---------*/
#boton{
	top:10px;
	-webkit-appearance:none;color:#fff;
	background:#1976D2; background-image:url(../img/lock.png);
	background-repeat: no-repeat; background-position:center; opacity: 1;
    border:none;border-radius:5px;height:42px;width:234px;font-size:16px;font-weight:400;outline:0;text-transform:uppercase;
    letter-spacing:1.5px;cursor:pointer
    }
#boton:hover{
	background-color:#0568ca;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease
	}
    .vertical-form .footer{
        position: relative;
        top:-55px;
        text-align:center;
color:#ccc;}
.vertical-form .footer a{text-decoration:none;color:#4285F4;}
    @media (max-width:450px){

       }
	   
	   


.badge-achat {
  background-color: #fdd835; /* jaune vif */
  color: #000;
  padding: 4px 10px;
  border-radius: 10px;

  font-size: 14px;
  width: 100%; /* Badge prend toute la largeur */
  text-align: center; /* Centrer le texte */
}
	   

/* Personnalisation du bouton */
button {
  background-color: #f4efef;
  font-size: 18px;
  padding: 10px 20px;  /* Plus d'espace à gauche et à droite pour une meilleure lisibilité */
  border-radius: 10px;
  border: 1px solid #a50606;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  width: 95%; /* Le bouton occupe 95% de la largeur de son parent */
  margin: 0 auto; /* Centrer le bouton */
  display: block; /* Assure que le bouton est un bloc et occupe toute la largeur disponible */
  text-align: center; /* Centre le texte à l'intérieur du bouton */
}

/* Réactions au survol et clic */
button:hover {
  background-color: #45a049; /* Changer la couleur au survol */
  transform: scale(1.01); /* Agrandir légèrement le bouton au survol */
}

button:active {
  background-color: #3e8e41; /* Couleur de fond lors du clic */
  transform: scale(0.98); /* Réduire légèrement le bouton lors du clic */
}

/* Réduire la taille du bouton sur les petits écrans */
@media (max-width: 576px) {
  button {
    font-size: 16px; /* Réduire la taille du texte sur les petits écrans */
    padding: 8px 15px; /* Ajuster l'espace interne */
    width: 100%; /* Le bouton occupe toute la largeur sur les petits écrans */
  }
}



/* Style du cercle tournant (spinner) */
.spinner {
  border: 4px solid #f3f3f3; /* Couleur de fond du cercle */
  border-top: 4px solid #3498db; /* Couleur du cercle tournant */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite; /* Animation pour faire tourner le cercle */
  margin: 15px auto;
}

/* Animation du cercle tournant */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<style>
  /* Box2 Container */
  .box2-content {
    display: none;
    position: fixed;
    top: 10%;
    left: 10%;
    transform: translate(-50%, -50%);
    width: 300px;
    max-width: 100%;
    height: auto; /* Ajuster la hauteur selon le contenu */
    background-color: #d5dddc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 1000;
  }

  /* Alignement des boutons */
  .box2-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;  /* Espacement entre les boutons */
  }

  .box2-footer button {
    width: 100%; /* Les boutons prennent toute la largeur de la box */
  }




  .box2-body img {
    max-width: 40px;  /* Réduit la taille des images sur mobile */
    margin-right: 10px;  /* Réduit l'espacement entre les images */
  }

  .box2-footer button {
    font-size: 16px;  /* Réduit la taille du texte des boutons */
    padding: 8px;  /* Réduit l'espacement des boutons */
	
  }
  
  
  
}

/* Pour les tablettes et écrans moyens */
@media (min-width: 577px) and (max-width: 768px) {
  .box2-content {
  /*  width: 80%; /* Largeur de 80% sur les tablettes */
  }
}




.box2-body p {
  color: #555;
}

/* Footer of box2 */
.box2-footer {
  display: flex;
  justify-content: space-around;
}

/* Box2 Footer Buttons */
.box2-footer button {
  width: 100%; /* S'assurer que le bouton prend toute la largeur disponible */
  padding: 12px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin: 3px 0; /* Ajouter un espacement entre les boutons */
}

/* Button Payer */
#payTicketButton {
  background-color: #d0d0d0;
  color: #f4f4f4;
  background-color: #f9fcfc1f;
  max-width: 100%;
  width: 95%;
  height: auto;
  border: 1px solid #0d33fb;  /* Bordure rouge */
  border-radius: 8px;         /* Coins arrondis pour un effet doux */
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-size: 16px;
}



@media (max-width: 576px){
  #payTicketButton  {
    font-size: 18px; /* Réduire la taille du texte sur les petits écrans */
    width: 95%; /* Le bouton occupe toute la largeur sur les petits écrans */
	margin-bottom:2px;
  }
}

/* Button Quitter */
#quitButton {
background-color: #f7f1e81f;
  color: #fff;
  max-width: 100%;
  width: 95%;
  height: auto;
  border:
1px solid #0d33fb;
  border-radius:
8px;
  transition:
background-color 0.3s ease, transform 0.2s ease;
  font-size: 16px;
}

@media (max-width: 576px) {
  #quitButton {
   font-size: 18px; /* Réduire la taille du texte sur les petits écrans */
   width: 95%; /* Le bouton occupe toute la largeur sur les petits écrans */
   margin-top:2px;
   margin-bottom:2px;
   
   background-color: #f7f1e81f;
  color: #fff;
  max-width: 100%;
  }
}




/* Responsive */
@media (max-width: 576px) {
  /* Pour les petits écrans, on réduit la hauteur des boutons */
  .box2-footer button {
    max-width: 90%;
    padding: 10px; /* Réduire la hauteur sur petits écrans */
	margin: 15px auto;
  }
}

@media (min-width: 577px) {
  /* Sur les écrans plus grands, les boutons s'affichent côte à côte et leur hauteur est réduite */
  .box2-footer button {
    width: 50%; /* Les boutons prennent 45% de la largeur */
    padding: 8px; /* Hauteur réduite */
  }
}



./* Styles pour le box2 */
.box2 {
  max-width: 250px;
  margin: 0 auto;
  background-color: #2f96ed;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Box2 Header */
.box2-header h6 {
  font-size: 16px;
  color: white;
  margin-bottom: 10px;
}

/* Box2 Body */
.box2-body {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Images dans le box2 */
.box2-body img {
  max-width: 70px;
  width: 100%;
  height: auto;
  transition: max-width 0.3s ease;
}


/* Responsive */
@media (max-width: 576px)  {
.box2 {
  max-width: 270px;
  margin: 15px 15px;
  height: auto;
  background-color: #2f96ed;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}



/* Box2 Header */
.box2-header h6 {
  font-size: 16px;
  color: white;
  margin-top:5px;
}


}



/* 🎇 Police moderne */
body, input, button {
  font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
}

/* 🌌 Fond animé */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #00c6ff55, #0072ff55);
  animation: glowPulse 12s ease-in-out infinite;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.8;
}

@keyframes glowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 🧊 Box effet futuriste */
#box {
  position: relative;
  top: -150px;
  width: 90%;
  max-width: 300px;
  height: auto;
  padding: 20px 0 0 0;
  margin: 0 auto;
  border-radius: 30px;
  
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  
  transition: transform 0.4s ease, box-shadow 0.4s ease;

  /* Ajout du style classique que tu avais */
  border-bottom-style: outset;
  border-top-style: outset;
  border-color: red;
  z-index: 2;
}


#box:hover {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(0, 140, 255, 0.6);
}

/* 🧪 Inputs modernisés */
#user, #pass {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-bottom: 3px solid #00f2ff;
  color: #f1f1f1;
  padding: 8px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

#user:focus, #pass:focus {
  border-color: #0ff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 8px #00f2ff;
}

/* 🔘 Bouton de login */
#boton {
  
  border: none;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 0 15px #00f2ff;
  transition: all 0.3s ease;
}

#boton:hover {
  background: linear-gradient(135deg, #00e1ff, #00a6ff);
  box-shadow: 0 0 25px #00f2ff;
  transform: scale(1.03);
}

/* 🌟 Glow autour du logo */
#userdiv {
  box-shadow: 0 0 20px rgba(0, 140, 255, 0.5);
  transition: all 0.4s ease;
}

#userdiv:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 140, 255, 0.8);
}


@media (max-width: 575.98px) {
  #tableau {
    position: relative;
    top: -140px;
    width: 80%;
    max-width: 280px;
    height: auto;
    border-width: 2px;
    border-bottom-style: outset;
    border-color: red;
    border-top-style: outset;
    border-radius: 18px;
    text-align: center;
    padding: 10px;
    background-color: #06141ed4;
    margin: 0px auto;
    margin-top: 0px;
    z-index: 2;
  }
}