/* ================================================
   LAYOUT CSS
   Structure des pages — header, footer, contenu,
   sidebar, grille. Ne contient aucune couleur :
   tout ça est dans global.css et variables.css.
   ================================================ */

/* --- Conteneur principal --- */

.conteneur {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--espace-l);
}

/* --- Layout deux colonnes --- */
/* Contenu large à gauche, sidebar à droite */

.page-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--espace-xl);
  max-width: 1100px;
  margin: var(--espace-xl) auto;
  padding: 0 var(--espace-l) var(--espace-xl);
  align-items: start;
}

.page-contenu {
  min-width: 0; /* évite le débordement du texte */
}

.page-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

/* --- Grille de vignettes — page d'accueil --- */

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  max-width: 1100px;
  margin: var(--espace-l) auto;
  padding: 0 var(--espace-m);
}

/* --- Responsive --- */

@media (max-width: 768px) {

  .page-layout {
    grid-template-columns: 1fr;
  }

  .page-sidebar {
    position: static;
  }

  .grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .grille {
    grid-template-columns: 1fr;
  }
}