html, body {
    height: 100vh;
    text-align: center;
  }

#edit-form {
    display: none;
    margin-top: 20px;
}

th, tr {
    font-size: small;
}

/* Styles de base pour les formulaires */
.form-container {
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Ajoute une transition pour l'opacity */
    display: block; /* Nous contrôlons la visibilité avec l'opacité */
}

a.footer-link-grey  {
    color:rgb(87, 111, 193);
    text-decoration: none;
}

a.footer-link-grey:hover  {
    color:rgb(87, 111, 193);
    text-decoration: underline;
}
/* Formulaire caché */
.hidden {
    opacity: 0; /* Il devient invisible */
    pointer-events: none; /* Empêche l'interaction avec l'élément caché */
}

/* Pour gérer le fade-in */
.form-container.show {
    opacity: 1; /* Deviens visible */
    pointer-events: auto; /* Permet l'interaction avec l'élément visible */
}

.password-forgotten-link {
    text-decoration: none;
    font-weight: 100;
    font-size: small;
}

.password-forgotten-link:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: rgba(10, 40, 80, 0.9);
    color: #cbd5e1;
    border-top: 1px solid #657a9e;
    font-size: 0.9rem;
    box-shadow: 0 -3px 6px rgba(0, 55, 105, 0.2);
  }
  
  footer a.footer-link {
    color: #7fbbf5;
    text-decoration: none;
    margin: 0 0.3rem;
    transition: color 0.3s ease;
  }
  
  footer a.footer-link:hover {
    color: #1a73e8;
    text-decoration: underline;
  }
  
  footer a.footer-policy {
    display: inline-block;
    margin-top: 0.3rem;
    color: #7fbbf5;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  
  footer a.footer-policy:hover {
    color: #1a73e8;
    text-decoration: underline;
  }
  
h1 a {
    text-decoration: none;
}

body {
    background-color: #e5f0f9; /* fond bleu très clair */
    color: rgba(10, 40, 80, 0.9); /* texte bleu bootstrap primary */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #0d4fa4; /* titres en bleu vif */
  }
  
  .card {
    background-color: #e6f0fa; /* fond doux pour les cartes */
    border: 1px solid #c2d1e8; /* bordure bleue claire */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 55, 105, 0.1);
  }
  
  .btn-primary {
    background-color: #0d4fa4;
    border-color: #0d4fa4;
  }
  
  .btn-primary:hover {
    background-color: #093577;
    border-color: #093577;
  }

  .activeButton {
    background-color: #093577;
    border-color: #093577;
  }

  .activeIcon {
    color: white;
  }

  .page-container {
    min-height: 100vh; /* hauteur de la fenêtre */
    display: flex;
    flex-direction: column;
  }
  
  main {
    flex: 1; /* prend tout l’espace restant */
  }

  .page-title {
    color: #0d4fa4;
  }

  .btn-category {
    color: #1a73e8;
  }

  .logout-button  {
    border-color: rgba(10, 40, 80, 0.9);
    color: #093577;
  }

    .logout-button:hover  {
    background-color: #093577;
  }

    .profile-button  {
    border-color: rgba(10, 40, 80, 0.9);
    color: #093577;
  }

    .profile-button:hover  {
    background-color: #093577;
  }

  h6 a {
    color: #0d4fa4;
  }

  #loader {
  font-size: 1.2rem;
  color: #555;
  animation: fade 1s ease-in-out infinite alternate;
}

@keyframes fade {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}