/*
 * Le gabarit ville — issue 23. Référence : maquette 13, planche 7.
 * Balisage : inc/ville.php. Bloc de livraison : css/livraison.css ;
 * faits de la maison : css/evenement.css ; bandeau : css/elements.css.
 *
 * Valeurs de la maquette ramenées à l'échelle : titre 48 → titre de page,
 * textes 15-18 → 14 et 17, marges 12-24 → 16 et 24.
 */

/* --- La page ---------------------------------------------------------------- */
.pel-ville__titre {
	max-width: calc(var(--pel-container) * 0.7);
	margin: var(--pel-space-s) 0;
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-ville__chapo {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0;
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-ville__paragraphe {
	max-width: calc(var(--pel-container) * 0.6);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-ville__livraison {
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-ville__livraison-titre {
	margin: 0 0 var(--pel-space-s);
}

/* --- pel-city-block ----------------------------------------------------------- */
.pel-city-block {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-m);
	margin: var(--pel-space-m) 0 0;
}

.pel-city-block__fait {
	padding-left: var(--pel-space-s);
	border-left: var(--pel-trait) solid var(--pel-champagne);   /* décoratif */
}

.pel-city-block__cle {
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

.pel-city-block__valeur {
	margin: var(--pel-space-3xs) 0 0;
	color: var(--pel-encre);
	font-weight: 600;
}

@media (max-width: 767px) {
	.pel-ville__livraison {
		padding: var(--pel-space-s);
	}
}