/*
 * layout.css - FormaSources
 * Role : structures de mise en page reutilisables (conteneur, sections,
 *        header sticky, footer, grilles). A charger apres base.css.
 * Dependances : tokens.css.
 */

/* --- Conteneur --- */

.container
{
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

.container--narrow
{
	max-width: 760px;
}

/* --- Sections --- */

.section
{
	padding-block: var(--section-py);
}

.section--muted
{
	background-color: var(--color-muted-bg);
}

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

.section__head
{
	max-width: 640px;
	margin-bottom: var(--space-2xl);
}

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

/* --- Split (texte et illustration cote a cote) --- */

.split
{
	display: grid;
	gap: var(--space-2xl);
	align-items: center;
}

@media (min-width: 900px)
{
	.split
	{
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: var(--space-3xl);
	}
}

/* La colonne de texte garde sa longueur de ligne confortable, la colonne
   d'image occupe tout ce qui reste */
.split__text
{
	max-width: var(--measure);
}

/* --- Grilles utilitaires de layout --- */

.grid
{
	display: grid;
	gap: var(--space-xl);
}

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

	.grid--3
	{
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4
	{
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Quatre entrees empilees repoussent trop loin la suite de la page :
   sur mobile elles tiennent en 2x2 */
@media (max-width: 767px)
{
	.grid--4
	{
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

/* --- Header --- */

.site-header
{
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: rgba(249, 246, 242, 0.9);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--color-border);
	transition:
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.site-header.is-scrolled
{
	background-color: rgba(249, 246, 242, 0.96);
	box-shadow: var(--shadow-subtle);
}

.site-header__inner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: var(--header-height);
}

/* --- Footer --- */

.site-footer
{
	background-color: var(--color-text);
	color: var(--color-text-inverse);
	padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer a
{
	color: var(--color-text-inverse);
}

.site-footer a:hover
{
	color: var(--color-secondary-light);
}

.site-footer__grid
{
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 1fr;
	padding-bottom: var(--space-2xl);
	border-bottom: 1px solid rgba(249, 246, 242, 0.15);
}

@media (min-width: 768px)
{
	.site-footer__grid
	{
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* Meme structure que le header (symbole + nom), adaptee au fond sombre */
.site-footer .site-footer__logo .logo__mark svg,
.site-footer .site-footer__logo .logo__mark svg path
{
	fill: var(--color-text-inverse);
}

.site-footer .site-footer__logo .logo__name
{
	color: var(--color-text-inverse);
}

.site-footer .site-footer__logo:hover .logo__mark svg,
.site-footer .site-footer__logo:hover .logo__mark svg path
{
	fill: var(--color-text-white);
}

.site-footer .site-footer__logo:hover .logo__name
{
	color: var(--color-text-white);
}

.site-footer__title
{
	font-size: var(--text-h3);
	color: var(--color-text-inverse);
	margin-bottom: var(--space-md);
}

.site-footer__slogan
{
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--text-body-lg);
	margin-top: var(--space-md);
	margin-bottom: 0;
	max-width: 22ch;
}

.site-footer__links
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer__bottom
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-xl);
	font-size: var(--text-body-sm);
	color: rgba(249, 246, 242, 0.7);
}