body {
  font-family: 'Poiret One', cursive;
  color: #111;
  background-color: #fff;
  font-size: 1rem;
  text-align: center;

  /* Ajout pour centrer verticalement/horizontalement */
  display: flex;
  justify-content: center;       /* centre horizontalement */
  align-items: flex-start;       /* aligne en haut */
  min-height: 100vh;             /* pour occuper la hauteur */
  margin: 0;
}

/* Un conteneur interne pour pouvoir changer le layout facilement */
#page {
  display: flex;
  gap: 2rem;                     /* espace entre les blocs */
  align-items: flex-start;
  justify-content: center;
}

/* #header et #table garderont leur style interne */
#header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  max-width: 450px;
}

#table {
 text-align: center;  
 padding-bottom: 10px;
}

/* Responsive : en-dessous de 768px on empile verticalement */
@media (max-width: 768px) {
  #page {
    flex-direction: column;      /* empile les blocs */
    align-items: center;         /* centre les blocs */
    gap: 1rem;
  }
}

h1 {
  font-weight: 600;
  font-size: 3rem;
  margin:0px 0px 2px 0px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  font-size: 1.2rem;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin: auto;
  margin-top: 20px;
}

th, td {
  padding: 0.6rem 1rem;
  border: 1px solid #ccc;
  text-align: left;
  border-radius: 8px;
}
tr {
  opacity: 78%;
  color: black;
}

tr:hover {
  opacity: 100%;
}

th {
  background-color: #f0f0f0;
  font-weight: 600;
}

.Agrume{
  background-color: #fff9ba;
}
.FruitRouge{
  background-color: #ffdbe1;
}
.FruitÀNoyau{
  background-color: #ffddba;
}

.Autre{
  background-color: #eafccf;
}

legend {
  margin: 0px 0px 35px 0px;
  padding: 0px;
  color: #aaa;
  font-size: 0.8rem;
}

p {
  line-height: 1.5;
}