/* Cotes mesurées en direct sur drive-turismo.fr (section "Pourquoi rouler
   avec Turismo ?", 2026-08-29) via getBoundingClientRect()/getComputedStyle().
   Padding de section volontairement aligné sur le rythme déjà en place sur
   le reste de la page (clamp 48-80px, cf. cards.css/carousel.css/faq.css)
   plutôt que le 128px fixe de Turismo, qui détonnerait au milieu des
   autres sections déjà construites à ce rythme. */
.md-why {
	padding: clamp(48px, 7vw, 80px) 24px;
	/* Fond unifié en crème sur toute la page d'accueil (demande explicite
	   de Damien, 2026-08-29). */
	background: var(--md-cream);
}

.md-why__header {
	max-width: 1104px;
	margin: 0 auto 48px;
}

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

/* Ligne de 3 cartes-stats — mesures Turismo : grid 3 col, gap 16px,
   carte 357x226px, padding 48px 32px, radius 28px, même ombre douce que
   .md-card (cards.css). */
.md-why__stats {
	max-width: 1104px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

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

.md-why-stat {
	padding: 48px 32px;
	border-radius: 28px;
	background: var(--md-white);
	border: 1px solid var(--md-line);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.03),
		0 6px 20px rgba(15, 23, 42, 0.05);
	display: flex;
	flex-direction: column;
}

.md-why-stat__count {
	font-size: 34px;
	font-weight: 700;
	line-height: 34px;
	color: var(--md-ink);
}

.md-why-stat__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--md-ink);
	margin-top: 12px;
}

.md-why-stat__desc {
	font-size: 13px;
	font-weight: 400;
	color: #6a6a6a;
	line-height: 18.85px;
	margin-top: 8px;
}

/* Bloc 2 colonnes juste en dessous — chez Turismo, 0px de marge mesurée
   entre les cartes-stats et ce bloc (les cartes-stats sont censées se
   suffire à elles-mêmes pour la séparation). À l'usage sur Médian, jugé
   trop collé (retour de Damien sur capture réelle, 2026-08-29) — un
   espace ajouté, aligné sur le gap de 16px déjà utilisé entre les 3
   cartes-stats elles-mêmes, pour rester cohérent plutôt que d'inventer
   une nouvelle valeur. */
.md-why__split {
	max-width: 1104px;
	margin: 16px auto 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 900px) {
	.md-why__split {
		/* Proportion mesurée chez Turismo : 453.594px / 554.406px sur 1104px
		   ≈ 41% / 50% (le gap de 96px comble le reste). */
		grid-template-columns: 41fr 50fr;
		gap: 96px;
		align-items: start;
	}
}

.md-why__intro h3 {
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 16px;
}

.md-why__intro p {
	font-size: 20px;
	font-weight: 400;
	color: #6a6a6a;
	line-height: 32px;
	margin: 0;
}

.md-why__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Carte de bénéfice — mesures Turismo : flex row, gap 24px, padding 24px,
   radius 20px, même ombre douce que les cartes-stats et .md-card. */
.md-why-item {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px;
	border-radius: 20px;
	background: var(--md-white);
	border: 1px solid var(--md-line);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.03),
		0 6px 20px rgba(15, 23, 42, 0.05);
}

.md-why-item__icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--md-blue);
	color: var(--md-indigo);
	display: grid;
	place-items: center;
}

.md-why-item__icon svg {
	width: 24px;
	height: 24px;
}

.md-why-item h4 {
	font-size: 18px;
	font-weight: 600;
	color: var(--md-ink);
	margin: 0 0 5px;
}

.md-why-item p {
	font-size: 14px;
	font-weight: 400;
	color: #6a6a6a;
	line-height: 21px;
	margin: 0;
}

/* Lieux de réception sous « Ancrage local en Bourgogne » (0.81.0) : liste que Damien remplit
   lui-même dans l'éditeur. Vide par défaut : la liste n'est alors pas dans la page, et cette règle
   ne s'applique à rien. */
.md-why-item__places {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.md-why-item__places li {
	padding: 4px 10px;
	border-radius: var(--md-radius-pill);
	background: var(--md-blue);
	color: var(--md-indigo);
	font-size: 13px;
	line-height: 1.4;
}