body{
    background-image: url("../img/background.png");
}

header{
    background-color: black;
    opacity: 0.9; /* Opacité à 50% */

}

footer{
    background-color: black;
    opacity: 0.9; /* Opacité à 50% */
    padding: 20px;  
}

h5{
    text-align: center;
}

.hidden-field {
    display: none;
}
.hidden-label {
    display: none;
}

.adult-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
}

.error-message {
    color: #D8000C;
    background-color: #FFD2D2;
    border: 1px solid #D8000C;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 0.9em;
}

.error-message ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.form-error-summary {
    color: red;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}
 /* Style de base pour le modal */
 .modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw; /* Utilisation d'unités de largeur de la fenêtre */
    height: 100vh; /* Utilisation d'unités de hauteur de la fenêtre */
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Contenu du modal */
  .modal-content {
    background-color: white;
    padding: 2rem; /* Unités relatives basées sur la taille de la police */
    border-radius: 10px;
    width: 80vw; /* Largeur adaptative par rapport à la fenêtre */
    max-width: 800px; /* Largeur maximale pour les écrans larges */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  /* Bouton de fermeture */
  .close-btn {
    float: right;
    font-size: 1.5rem; /* Unités relatives pour la police */
    font-weight: bold;
    cursor: pointer;
    background-color: blue;
  }

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

  /* Style responsive pour petits écrans (mobiles) */
  @media (max-width: 768px) {
    .modal-content {
      width: 95vw; /* Remplir plus d'espace sur les petits écrans */
      padding: 1rem; /* Réduire le padding pour s'adapter aux petits écrans */
    }
  }

  /* Pour très petits écrans (moins de 480px) */
  @media (max-width: 480px) {
    .modal-content {
      width: 100vw; /* Utiliser toute la largeur de l'écran */
      padding: 0.8rem; /* Padding plus petit pour les très petits écrans */
    }
  }