/*
 * Classes de mise en page — issue 03.
 *
 * Les conteneurs placent, ils n'habillent pas. Une section porte son fond ;
 * son conteneur n'en a jamais. Aucune classe responsive : les valeurs changent
 * aux points de rupture Bricks (1279, 991, 767, 478), par media query.
 *
 * Dans Bricks, chaque classe existe en classe globale du même nom, SANS style :
 * le style vit ici, versionné. Voir theme/pel/LISEZ-MOI.md.
 */

/* --- pel-container ------------------------------------------------------ */
/* Contenu de 1280 px au plus, gouttière de part et d'autre (24 px, 16 px
   sous 767). Même géométrie que les maquettes : max-width 1280 + padding. */
.pel-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--pel-container) + 2 * var(--pel-gutter));
	margin-inline: auto;
	padding-inline: var(--pel-gutter);
}

/* --- pel-section -------------------------------------------------------- */
/* Rythme vertical 96 px, 64 sous 767 : le design system fait foi sur les
   maquettes de pages (72 / 40), décidé le 25/09. --tight : un pas plus bas,
   64 / 48, décidé le même jour. */
.pel-section {
	--pel-section-y: var(--pel-space-3xl);   /* 96 px */
	padding-block: var(--pel-section-y);
}

.pel-section--tight {
	--pel-section-y: var(--pel-space-2xl);   /* 64 px */
}

.pel-section--sable {
	background: var(--pel-sable);
}

/* Le brun ne sert qu'au pied de page. Texte en ivoire, secondaire en lin,
   jamais en champagne (4,26:1). */
.pel-section--brun {
	--pel-focus-couleur: var(--pel-ivoire);
	background: var(--pel-brun);
	color: var(--pel-ivoire);
}

@media (max-width: 767px) {
	.pel-section {
		--pel-section-y: var(--pel-space-2xl);   /* 64 px */
	}

	.pel-section--tight {
		--pel-section-y: var(--pel-space-xl);    /* 48 px */
	}
}

/* --- pel-grid ----------------------------------------------------------- */
/* Colonnes égales, gouttière de grille 24 px. Chute décidée le 25/09 :
   --3 et --4 passent à 2 colonnes sous 991, tout passe à 1 sous 478 — comme
   les cartes produit empilées des maquettes mobiles. */
.pel-grid {
	--pel-grid-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--pel-grid-cols), minmax(0, 1fr));
	gap: var(--pel-space-m);
}

.pel-grid--2 { --pel-grid-cols: 2; }
.pel-grid--3 { --pel-grid-cols: 3; }
.pel-grid--4 { --pel-grid-cols: 4; }

@media (max-width: 991px) {
	.pel-grid--3,
	.pel-grid--4 {
		--pel-grid-cols: 2;
	}
}

@media (max-width: 478px) {
	.pel-grid--2,
	.pel-grid--3,
	.pel-grid--4 {
		--pel-grid-cols: 1;
	}
}