/* ==========================================================================
   Layout : conteneur, grille 12 colonnes, utilitaires de mise en page.
   ========================================================================== */

.site {
	overflow-x: clip; /* aucun débordement horizontal de page (tampon, titres display) */
}

/* Conteneur de la maquette : 1556 px, marges de 182 px à 1920. */
.conteneur {
	width: var(--container);
	margin-inline: auto;
}

/* Grille 12 colonnes, gouttière 16 px. */
.grille {
	display: grid;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	column-gap: var(--gutter);
}

/* Section de page (enveloppe commune à tous les layouts Flexible Content). */
.section {
	position: relative;
}

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

/* Titres de section en FreightBig italique 42/50. */
.titre-section {
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-titre-section);
	line-height: var(--lh-titre-section);
}

/* Titres « display » Gotham Bold 120/110. */
.titre-display {
	font-family: var(--ff-sans);
	font-weight: var(--fw-bold);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

.titre-display--fantome {
	color: var(--c-blue-ghost);
}

.titre-display--blanc {
	color: var(--c-white);
}

/* Remplacement d'un média manquant : bloc neutre à la bonne taille. */
.media-vide {
	background: var(--c-blue-ghost);
}