/* Body & Grid Layout */
body {
  display: grid;
  grid-template-rows: 56px 1fr 56px; /* Header et footer fixes */
  grid-template-areas: 
    "header"
    "main"
    "footer";
  height: 100vh; /* Garde tout l'écran */
  width: 100%;
  overflow: auto; /* Évite les bugs de scroll */
}

/* Main Section & Subgrid */
main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "animateurs producteurs";
  height: 100%; /* Remplit l’espace restant */
  width: 100%;
  gap: 2px;
}

/* Animateurs & Producteurs */
#animateurs, #producteurs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
  padding: 30% 10% 10% 10%;
  height: 100%;
  align-self: stretch;
}

#animateurs {
  grid-area: animateurs;
  background: url('../media/texture/texture.png'), url('../media/photos/animateurs.jpg');
  background-size: 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
}

#producteurs {
  grid-area: producteurs;
  background: url('../media/texture/texture.png'), url('../media/photos/producteurs.jpg');
  background-size: 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
}

header {
    grid-area: header;
}

footer {
    grid-area: footer;
}