:root {
	--mb-bordeaux: #9e321f;
	--mb-ink: #171717;
	--mb-muted: #67645f;
	--mb-line: #ddd9d1;
	--mb-paper: #fbfaf7;
	--mb-soft: #f2f0ec;
	--mb-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mb-sans: Arial, Helvetica, sans-serif;
}

/* Police forcée partout (Blocksy impose la sienne sinon).
   La couleur, elle, se règle élément par élément plus bas —
   ne JAMAIS remettre une règle générale sur "p"/"li" ici, ça
   écraserait les nuances (accroche/légendes en gris) ci-dessous. */
.mb-passeport,
.mb-passeport * {
	font-family: var(--mb-sans) !important;
}

.mb-passeport {
	max-width: 1100px;
	margin: 0 auto;
	padding: 4rem 1.5rem 6rem;
	color: var(--mb-ink);
}

.mb-passeport * {
	box-sizing: border-box;
}

/* En-tête */
.mb-passeport-hero {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 4rem;
}

.mb-passeport-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11px;
	font-weight: 600;
	color: var(--mb-bordeaux) !important;
	margin-bottom: 0.75rem;
}

.mb-passeport-hero h1 {
	font-family: var(--mb-serif) !important;
	font-weight: 500;
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.1;
	color: var(--mb-ink) !important;
	margin: 0 0 1.25rem;
}

.mb-passeport-lead {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--mb-muted) !important;
}

/* Titres de section — mêmes conventions que le reste du site
   (majuscules, sans-serif, espacées) plutôt que du serif */
.mb-passeport-explain h2,
.mb-passeport-example h2,
.mb-passeport-cta h2 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mb-ink) !important;
	margin: 0 0 1.25rem;
}

/* Explication */
.mb-passeport-explain {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	padding: 3rem 0;
	border-top: 1px solid var(--mb-line);
	border-bottom: 1px solid var(--mb-line);
	margin-bottom: 4rem;
}

.mb-passeport-explain-text p {
	line-height: 1.7;
	margin-bottom: 1rem;
	color: var(--mb-ink) !important;
}

.mb-passeport-fields ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-passeport-fields li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--mb-line);
	font-size: 0.95rem;
	color: var(--mb-muted) !important;
}

.mb-passeport-fields li strong {
	color: var(--mb-ink) !important;
	font-weight: 600;
	margin-right: 0.35em;
}

/* Exemple */
.mb-passeport-example {
	text-align: center;
	margin-bottom: 4rem;
}

.mb-passeport-example h2 {
	text-align: left;
}

.mb-passeport-example > p {
	max-width: 600px;
	margin: 0 auto 2rem;
	line-height: 1.6;
	color: var(--mb-muted) !important;
}

.mb-passeport-example-viewer {
	background: var(--mb-soft);
	border: 1px solid var(--mb-line);
	border-radius: 6px;
	overflow: hidden;
	max-width: 700px;
	margin: 0 auto;
}

.mb-passeport-example-viewer iframe {
	width: 100%;
	height: 620px;
	border: 0;
	display: block;
}

/* CTA finale */
.mb-passeport-cta {
	text-align: center;
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 6px;
	padding: 3rem 1.5rem;
}

.mb-passeport-cta h2 {
	text-align: center;
	margin-bottom: 1.5rem;
}

.mb-passeport-cta-btn {
	display: inline-block;
	background: var(--mb-bordeaux) !important;
	color: #fff !important;
	text-decoration: none !important;
	padding: 0.9rem 2.1rem;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mb-passeport-cta-btn:hover {
	opacity: 0.9;
}

/* Mobile */
@media (max-width: 780px) {
	.mb-passeport-explain {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.mb-passeport-example-viewer iframe {
		height: 420px;
	}
}