@charset "UTF-8";
/* CSS Document */

.grid-container {
  display: grid;
  width: 100%;
}

/* 1. Mobile First */
@media (max-width: 767px) {
  html { font-size: 16px; }
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, minmax(auto, 13px));
    padding: 0 30px;
    gap: 20px;
  }
}

/* 2. iPad */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(15, auto);
    padding: 0 40px;
    gap: 16px;
  }
}

/* 3A. MacBook Air (Général) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, auto);
    padding: 0 12px;
    gap: 8px;
  }
  
  /* 3B. Version Spécifique Page Accueil */
  .body-home .grid-container {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 217px;
    gap: 8px;
  }
}

/* 4. Grand Écran */
@media (min-width: 1440px) {
  .grid-container {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(9, auto);
    padding: 0 44px;
    gap: 12px;
  }
  
  /* 4A. Version Spécifique Page Accueil Grand Écran */
  .body-home .grid-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, auto);
    padding: 0 210px;
    gap: 12px;
  }
}