body {
  background: linear-gradient(
    to bottom, 
    #9fb103a4,  /* bleu vif, rafraîchissant et moderne */
    #5cf007,  /* bleu moyen, inspire confiance */
    #00ff88   /* vert lumineux, dynamique et positif */
  );
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
 
  display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center;
}


.login-card {
  max-width: 400px;
  margin: 5% auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  padding: 2rem;
}

.login-card h3 {
  font-weight: bold;
  margin-bottom: 1rem;
  color: #343a40;
}

.btn-custom {
  background-color: #dc3545;
  color: white;
  font-weight: bold;
}

.btn-custom:hover {
  background-color: #b02a37;
}


/*
  Style de base (XS/SM) :
  Le conteneur prend toute la largeur de l'écran, 
  le padding de Bootstrap le rend déjà joli.
*/


/* MD (Medium - Tablette, ~768px et plus) 
  On commence à limiter la largeur pour une meilleure lisibilité.
*/



/* XS : Très petits écrans (mobile) */
@media (max-width: 639px) {
      .login-card {
        max-width: 75vw; /* Petite augmentation pour les grands moniteurs */
        padding: 20px; 
        font-size: 15px;
    }


}

/* SM : petits écrans (mobiles larges) */
@media (min-width: 640px) and (max-width: 767px) {
    .login-card {
        max-width: 40vw; /* Petite augmentation pour les grands moniteurs */
        padding: 40px; 
        font-size: 22px;
       
       /* Plus d'espace autour du formulaire */
    }

}

/* MD : tablettes */
@media (min-width: 768px) and (max-width: 1023px) {
    .login-card {
        max-width: 55vw; /* Petite augmentation pour les grands moniteurs */
      
          padding: 40px; 
         font-size: 22px; 
       
    }

   
}

/* LG : ordinateurs portables */
@media (min-width: 1024px) and (max-width: 1279px) {

      .login-card {
        max-width: 35vw; /* Petite augmentation pour les grands moniteurs */
        padding: 40px; 
         font-size: 22px; 
       
      /* Plus d'espace autour du formulaire */
    }
}

/* XL : grands écrans */
@media (min-width: 1280px) and (max-width: 1535px) {

      .login-card {
        max-width: 35vw; /* Petite augmentation pour les grands moniteurs */
        padding: 40px; 
         font-size: 26px;
          
      
       /* Plus d'espace autour du formulaire */
    }

 
 
}

/* 2XL : très grands écrans */
@media (min-width: 1536px) {
 
      .login-card {
        max-width: 35vw; /* Petite augmentation pour les grands moniteurs */
        padding: 40px; 
        font-size: 2; /* Plus d'espace autour du formulaire */
    }
   
    

    
   
  
}

/* Style personnalisé pour le bouton (si vous utilisez btn-custom) */
.btn-custom {
    background-color: #15803d; /* Vert de votre header */
    color: white;
    width: 100%; /* Le bouton prend toute la largeur du conteneur */
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #16a34a; 
    color: white;
}

/* Fixer la hauteur du logo (basée sur votre code) */
.login-card img {
    height: 3.5rem; /* h-14 dans Tailwind est généralement 3.5rem */
}