.zone-centrale {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 60%; 
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 30px; 
}

.titre {
  font-size: 1.8rem;
  color: #fff;
  text-align: center;
  font-weight: 600;
  width: 100%;
  position: absolute;
  top: -50%;
}

.titre-p {
  top: -20%;
}

.texte-s {
  color: #ffff;
  font-size: 1.1em;
  display: flex;
  text-align: center;
  flex-direction: column;
  gap: 25px;
  margin: 30px;
}

.grille {  
  display: grid;
  justify-content: center;
  grid-template-columns: fr; 
  gap: 30px; 
  width: 100%; 
  max-width: 500px; 
}

.grille-2 {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr); 
  gap: 30px; 
  width: 100%; 
  max-width: 500px; 
}

.grille-3 {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
  width: 100%; 
  max-width: 500px; 
}

.grille-3 img {
  width: 250px;
}

.grille-4 {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr); 
  gap: 30px; 
  width: 100%; 
  max-width: 500px; 
}

.grille-4 img {
  width: 250px;
}

.grille-6 {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
  width: 100%; 
  max-width: 500px; 
}

.taille-s img{
  width: 16em;
}

@media (max-width: 1000px) {
  .titre {
    font-size: 4rem;
  }
  
  .tlg {
    top: -15%;
  }
  
  .grille-2 {
    gap: 40px; 
  }
    
  .texte-s {
    font-size: 2em;
  }
  
  .taille-f img {
    width: 250px;
  }

  .taille-s img {
    width: 350px;
  }

  .grille-3 {
    grid-template-columns: repeat(1, 1fr);
    position: relative;
    top: 10em;
  }
  
  .grille-3 img {
    width: 350px;
  }
  
  .grille-4 {
    position: relative;
    top: 40%;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; 
  }
  
  .grille-4 img {
    width: 350px;
  }

}

@media (max-width: 768px) {
  .zone-centrale {
    width: 80%;
  }
  
  .titre {
    font-size: 1.4rem;
  }
  
  .grille {
    gap: 15px;
  }
}


@media (max-width: 768px) {
  .zone-centrale {
    width: 80%;
  }
  
  .titre {
    font-size: 1.4rem;
  }
  
  .grille {
    gap: 15px;
  }
}