/*
 * Produc-son — Mise en page
 * Conteneurs, sections et grilles. Rien d'autre : pas de Bootstrap, pas de framework de grille.
 */

/* ---- Conteneur ---- */
.ps-container {
	width: 100%;
	max-width: var(--ps-container);
	margin-inline: auto;
	padding-inline: var(--ps-gutter);
}

.ps-container--narrow {
	max-width: var(--ps-container-narrow);
}

/* ---- Section ---- */
.ps-section {
	padding-block: var(--ps-section-y);
}

.ps-section--tight {
	padding-block: calc(var(--ps-section-y) * 0.6);
}

.ps-section--alt {
	background-color: var(--ps-surface-alt);
}

.ps-section--dark {
	background-color: var(--ps-surface-dark);
	color: var(--ps-white);
}

.ps-section--dark .ps-section__intro,
.ps-section--dark .ps-text-muted {
	color: color-mix(in srgb, var(--ps-white) 72%, transparent);
}

.ps-section--gradient {
	background: var(--ps-gradient);
	color: var(--ps-black);
}

/* En-tête de section : surtitre, titre, chapô */
.ps-section__head {
	max-width: var(--ps-container-narrow);
	margin-bottom: var(--ps-space-7);
}

.ps-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.ps-section__eyebrow {
	display: inline-block;
	margin-bottom: var(--ps-space-3);
	font-size: var(--ps-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ps-accent);
}

.ps-section__title {
	margin-bottom: var(--ps-space-4);
}

.ps-section__intro {
	margin: 0;
	font-size: var(--ps-text-lg);
	color: var(--ps-text-muted);
}

.ps-section__foot {
	margin-top: var(--ps-space-7);
	text-align: center;
}

/* ---- Grille ---- */
.ps-grid {
	display: grid;
	gap: var(--ps-space-5);
}

/* Grille auto-adaptative : le nombre de colonnes suit la largeur disponible. */
.ps-grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* Avec une seule carte, auto-fit l'étirerait sur toute la largeur : on la
   ramène à une taille de carte normale. */
.ps-grid > :only-child {
	max-width: 460px;
}

.ps-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.ps-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.ps-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* Deux colonnes texte/média, empilées sous 900px */
.ps-split {
	display: grid;
	gap: clamp(var(--ps-space-5), 4vw, var(--ps-space-8));
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.ps-split {
		grid-template-columns: 1fr 1fr;
	}

	.ps-split--reverse > :first-child {
		order: 2;
	}
}

/* ---- Utilitaires de flux (peu nombreux, volontairement) ---- */
.ps-stack > * + * {
	margin-top: var(--ps-space-4);
}

.ps-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-3);
	align-items: center;
}

.ps-center {
	text-align: center;
}

.ps-text-muted {
	color: var(--ps-text-muted);
}

/* ---- Squelette de page ---- */
.ps-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ps-main {
	flex: 1 0 auto;
}

/* Gabarit page + colonne latérale */
.ps-with-sidebar {
	display: grid;
	gap: var(--ps-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
	.ps-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--ps-space-8);
	}
}