.md-benefits {
	padding: clamp(48px, 7vw, 80px) 24px;
	/* Fond unifié en crème sur toute la page d'accueil (demande explicite
	   de Damien, 2026-08-29 — un premier essai en blanc neutre a été
	   fait puis annulé le jour même). */
	background: var(--md-cream);
}

.md-benefits__header {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}

.md-benefits__header h2 {
	font-size: clamp(28px, 3.8vw, 44px);
	font-weight: 700;
	margin: 0 0 12px;
}

.md-benefits__header p {
	margin: 0;
	color: #4a4a4a;
}

/* Grille "bento" — 3 colonnes, valeurs copiées de drive-turismo.fr
   (.cmw-bento : grid-template-columns 3×1fr, gap 20px, rangée 450px). */
.md-benefits__grid {
	max-width: 1104px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 1000px) {
	.md-benefits__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 450px;
	}
}

.md-benefits__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
}

/* Rayon, padding et ombre copiés au pixel près de .cmw-tile sur
   drive-turismo.fr (20px clair / 28px sombre, padding 32px, double ombre
   portée). */
.md-card {
	border-radius: 20px;
	padding: 32px;
	display: flex;
	flex-direction: column;
}

.md-card--big {
	flex: 1;
	justify-content: flex-end;
}

.md-benefits__col:has(.md-card--big + .md-card) .md-card--big {
	flex: 1.6;
}

.md-benefits__col .md-card:not(.md-card--big) {
	flex: 1;
	justify-content: flex-end;
}

.md-card--light {
	background: var(--md-white);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 20px rgba(15, 23, 42, 0.05);
}

.md-card--dark {
	background: var(--md-ink);
	color: var(--md-white);
	border-radius: 28px;
}

/* Pastille icône — calquée sur drive-turismo.fr (.cmw-ico, section
   "Comment fonctionne", 46×46px, coin arrondi 12px) avec un léger effet
   liquid glass à la place de leur fond plat, à la demande explicite de
   Damien. Touche ponctuelle conforme au skill median-events-design. */
.md-card__icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	backdrop-filter: blur(10px) saturate(160%);
}

.md-card__icon svg {
	width: 22px;
	height: 22px;
}

.md-card--light .md-card__icon {
	background: rgba(47, 42, 118, 0.07);
	border: 1px solid rgba(47, 42, 118, 0.16);
	color: var(--md-indigo);
}

.md-card--dark .md-card__icon {
	background: rgba(255, 255, 255, 0.12);
	color: var(--md-white);
}

.md-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
}

.md-card p {
	margin: 0;
	font-size: 15px;
}

.md-card--dark p {
	color: rgba(255, 255, 255, 0.75);
}

.md-page__header h1 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
}

/* Grille de villes — page hub "Location photobooth" (page-location-photobooth.php). */
.md-city-grid {
	max-width: 1000px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

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

@media (min-width: 860px) {
	.md-city-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.md-city-card {
	display: block;
	border: 1px solid var(--md-line);
	border-radius: var(--md-radius-card);
	background: var(--md-white);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.md-city-card__media {
	aspect-ratio: 16 / 10;
	background-color: var(--md-blue);
	background-size: cover;
	background-position: center;
}

.md-city-card h2 {
	font-size: 17px;
	font-weight: 700;
	margin: 16px 16px 4px;
}

.md-city-card__link {
	display: block;
	margin: 0 16px 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--md-indigo);
}

.md-page__eyebrow {
	color: var(--md-indigo);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
}