/**
 * Layout — conteneur, grilles utilitaires, points de rupture.
 * Charge en dernier (dépendance déclarée dans inc/enqueue.php) : il peut donc
 * s'appuyer sur tokens/base/components sans jamais être écrasé par eux.
 * Points de rupture de référence (07-DESIGN-SYSTEM A.1) : 480 / 768 / 1024 / 1280.
 */

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}

@media (min-width: 1024px){
  .container{ padding: 0 var(--container-pad-desktop); }
}

.section{
  padding: var(--space-16) 0;
}

.section-alt{
  background: var(--cream-deep);
}

.section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}

/* Grille produit : 2 colonnes mobile / 3 desktop / 4 en grande largeur,
   réservée aux hubs à fort volume (Boutique) — cf. design system A.1 "Grille". */
.grid-products{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px){
  .grid-products{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px){
  .grid-products.grid-products-wide{ grid-template-columns: repeat(4, 1fr); }
}

/* Grille générique à N colonnes, pour les blocs non-produit (segments Pro, guides...). */
.grid-2{ display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.grid-3{ display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.grid-4{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

@media (min-width: 768px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  .grid-4{ grid-template-columns: repeat(4, 1fr); }
}

/* Largeur de lecture bridée pour le contenu éditorial (guides/articles),
   cf. design system A.2 "Sections éditoriales". */
.prose{
  max-width: 68ch;
  margin: 0 auto;
}
.prose img{
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Visibilité conditionnelle desktop/mobile, utilisée par le header (Lot 2)
   et les filtres (Lot 4) plutôt que de dupliquer des blocs entiers en PHP. */
.hide-mobile{ display: none; }
.hide-desktop{ display: block; }

@media (min-width: 1024px){
  .hide-mobile{ display: block; }
  .hide-desktop{ display: none; }
}