/* Général */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

/* En-tête */
header {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

header h1 {
  margin: 0;
}

/* Navigation */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #eee;
  text-align: center;
}

nav li {
  display: inline-block;
  margin: 0 1rem;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* Contenu principal */
main {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  color: #333;
}

p {
  line-height: 1.6;
}

/* Pied de page */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Responsive design */
@media (max-width: 768px) {
  nav ul {
    text-align: left;
  }

  nav li {
    display: block;
    margin: 1rem 0;
  }
}

/* Styles de base pour le bouton */
.button {
  display: inline-block;
  background-color: #007bff; /* Couleur de fond */
  color: #fff; /* Couleur du texte */
  padding: 10px 20px; /* Espacement intérieur */
  font-size: 16px; /* Taille de la police */
  text-align: center; /* Alignement du texte */
  text-decoration: none; /* Suppression du soulignement par défaut */
  border: none; /* Suppression de la bordure */
  cursor: pointer; /* Curseur pointeur */
  border-radius: 5px; /* Coins arrondis */
  margin-bottom: 10px; /* Marge en bas pour espacement vertical */
}

/* Effet au survol */
.button:hover {
  background-color: #0056b3; /* Couleur de fond au survol */
}

/* Effet au clic */
.button:active {
  background-color: #003d80; /* Couleur de fond au clic */
}
    
/* Styles pour l'image */
.responsive-img {
  max-width: 50%; /* Largeur maximale de l'image */
  height: auto; /* Hauteur automatique pour préserver les proportions */
  display: block; /* Rend l'image un élément de bloc */
  margin: auto; /* Centre l'image horizontalement */
}
    </style>
    <style>
/* Styles pour rendre la table responsive */
.table-wrapper {
  overflow-x: auto; /* Ajoute une barre de défilement horizontale si nécessaire */
  -webkit-overflow-scrolling: touch; /* Prise en charge du défilement fluide sur iOS */
}

.table {
  width: 100%; /* Largeur de la table à 100% */
  border-collapse: collapse; /* Fusionner les bordures de la table */
  overflow-x: auto;
}

.table th, .table td {
  padding: 8px; /* Espacement intérieur des cellules */
  text-align: left; /* Alignement du texte à gauche */
  border-bottom: 1px solid #ddd; /* Bordure inférieure de chaque ligne */
}

.table th {
  background-color: #f2f2f2; /* Couleur de fond pour les en-têtes */
}

.table tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Couleur de fond pour les lignes impaires */
}

/* Style de base pour un champ de texte */
input[type="text"] {
  padding: 10px; /* Espacement intérieur */
  width: 300px; /* Largeur du champ de texte */
  font-size: 16px; /* Taille de la police */
  border: 1px solid #ccc; /* Bordure */
  border-radius: 4px; /* Coins arrondis */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Ombre interne */
}

/* Style lorsque le champ de texte est en focus */
input[type="text"]:focus {
  outline: none; /* Supprime le contour par défaut */
  border-color: #66afe9; /* Couleur de la bordure en focus */
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* Ombre lorsqu'en focus */
}

/* Style de base pour un champ de type "number" */
input[type="number"] {
  padding: 10px; /* Espacement intérieur */
  /*width: 100%; /* Largeur du champ de type "number" */
  font-size: 16px; /* Taille de la police */
  border: 1px solid #ccc; /* Bordure */
  border-radius: 4px; /* Coins arrondis */
  box-sizing: border-box; /* Inclure la bordure et le padding dans la largeur */
}

/* Style lorsque le champ de type "number" est en focus */
input[type="number"]:focus {
  outline: none; /* Supprime le contour par défaut */
  border-color: #66afe9; /* Couleur de la bordure en focus */
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* Ombre lorsqu'en focus */
}

/* Style spécifique pour les flèches de contrôle de nombre (spinners) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Supprime l'apparence par défaut */
  margin: 0; /* Supprime la marge par défaut */
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

/* Style de base pour les balises <label> */
label {
  display: block; /* Affichage en bloc pour occuper toute la largeur disponible */
  margin-bottom: 5px; /* Marge en bas pour espacement entre les labels */
  font-weight: bold; /* Texte en gras */
  color: #333; /* Couleur du texte */
}


/* Style de base pour le champ select */
select {
    appearance: none; /* Pour annuler le style natif du navigateur */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff; /* Couleur de fond */
    border: 1px solid #ccc; /* Bordure */
    padding: 8px 12px; /* Espacement intérieur */
    font-size: 14px; /* Taille de police */
    color: #333; /* Couleur du texte */
    width: 200px; /* Largeur du champ select */
    cursor: pointer; /* Curseur */
}

/* Style au survol */
select:hover {
    border-color: #666; /* Couleur de la bordure au survol */
}

/* Style quand sélectionné */
select:focus {
    outline: none; /* Supprimer l'outline par défaut */
    border-color: #2e9fff; /* Couleur de la bordure quand focus */
    box-shadow: 0 0 5px rgba(46, 159, 255, 0.5); /* Ombre portée */
}

/* Style de base pour un champ de mot de passe */
input[type="password"] {
  padding: 10px; /* Espacement intérieur */
  width: 300px; /* Largeur du champ de mot de passe */
  font-size: 16px; /* Taille de la police */
  border: 1px solid #ccc; /* Bordure */
  border-radius: 4px; /* Coins arrondis */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Ombre interne */
}

/* Style lorsque le champ de mot de passe est en focus */
input[type="password"]:focus {
  outline: none; /* Supprime le contour par défaut */
  border-color: #66afe9; /* Couleur de la bordure en focus */
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* Ombre lorsqu'en focus */
}


.bouton-rouge {
    background-color: #ff0000; /* Rouge */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Rembourrage intérieur */
    text-align: center; /* Alignement du texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Afficher en tant que bloc en ligne */
    font-size: 16px; /* Taille de la police */
    cursor: pointer; /* Curseur de souris en pointeur */
    border-radius: 4px; /* Coins arrondis */
}

.champs-rouge {
    background-color: #ED6039; /* Rouge */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Rembourrage intérieur */
    text-align: center; /* Alignement du texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Afficher en tant que bloc en ligne */
    font-size: 16px; /* Taille de la police */
    cursor: pointer; /* Curseur de souris en pointeur */
    border-radius: 4px; /* Coins arrondis */
}
.champs-vert {
    background-color: #6AB848; /* Rouge */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Rembourrage intérieur */
    text-align: center; /* Alignement du texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Afficher en tant que bloc en ligne */
    font-size: 16px; /* Taille de la police */
    cursor: pointer; /* Curseur de souris en pointeur */
    border-radius: 4px; /* Coins arrondis */
}