/*
Theme Name: Mitzpahor
Theme URI: https://www.mitzpahor.com
Description: Thème enfant d'Astra pour Mitzpahor : vulgarisation de l'investissement en actions. Blanc, minimaliste, turquoise. Une seule action évidente par page.
Author: Mitzpahor
Version: 0.2.0
Template: astra
Text Domain: mitzpahor
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================================
   1. DESIGN TOKENS  (§2 du brief)
   ========================================================================= */

:root {
	/* --- Couleurs de marque --- */
	--mz-white:      #FFFFFF;
	--mz-ink:        #1A1A1A; /* texte principal, jamais de noir pur */
	--mz-turquoise:  #1AB2D4; /* ACCENT DÉCORATIF UNIQUEMENT (voir note contraste) */
	--mz-teal:       #0B6E75; /* boutons et liens, supporte du texte blanc */
	--mz-navy:       #12294B; /* titres, accents ponctuels */

	/* --- Neutres dérivés --- */
	--mz-ink-soft:   #4A4A4A; /* texte secondaire, 8.9:1 sur blanc */
	--mz-ink-mute:   #6B6B6B; /* légendes et méta, 5.3:1 sur blanc */
	--mz-rule:       #E6E8EA; /* liserés de cartes, séparateurs */
	--mz-rule-soft:  #F1F3F4;
	--mz-wash:       #F7FAFA; /* fonds très légers */

	/* --- États dérivés du teal --- */
	--mz-teal-hover: #095A60;
	--mz-teal-wash:  rgba(11, 110, 117, 0.08);
	--mz-turq-wash:  rgba(26, 178, 212, 0.10);

	/*
	 * NOTE CONTRASTE (vérifiée, à ne pas contourner) :
	 *   #0B6E75 sur blanc ............ 6.0:1  ✓ AA texte normal
	 *   blanc sur #0B6E75 ............ 6.0:1  ✓ AA texte normal
	 *   #12294B sur blanc ........... 14.5:1  ✓ AAA
	 *   #1A1A1A sur blanc ........... 17.4:1  ✓ AAA
	 *   #1AB2D4 sur blanc ............ 2.6:1  ✗ ÉCHEC, jamais de texte
	 *   blanc sur #1AB2D4 ............ 2.6:1  ✗ ÉCHEC, jamais de texte blanc
	 *   #1A1A1A sur #1AB2D4 .......... 6.9:1  ✓ AA large + AAA à 18px
	 *   #0D3542 sur #1AB2D4 .......... 5.2:1  ✓ AA texte normal
	 * => Le turquoise ne porte QUE du texte encre foncée (carte Portefeuille).
	 *    Tout texte blanc se pose sur le teal profond.
	 *    Le teal (#0B6E75, teinte 184°) et le turquoise (#1AB2D4, teinte 191°)
	 *    ne sont qu'à 7° l'un de l'autre : la famille reste cohérente.
	 */

	/* --- Typographie --- */
	--mz-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                Roboto, "Helvetica Neue", Arial, sans-serif;

	--mz-text-xs:   0.8125rem;  /* 13px */
	--mz-text-sm:   0.9375rem;  /* 15px */
	--mz-text-base: 1.0625rem;  /* 17px, corps aéré */
	--mz-text-lg:   1.1875rem;  /* 19px */
	--mz-text-xl:   1.5rem;     /* 24px */
	--mz-text-2xl:  2rem;       /* 32px */
	--mz-text-3xl:  2.75rem;    /* 44px */
	--mz-text-4xl:  3.5rem;     /* 56px */

	--mz-leading-tight: 1.15;
	--mz-leading-snug:  1.35;
	--mz-leading-body:  1.7;  /* interligne généreux */

	--mz-tracking-tight: -0.02em;
	--mz-tracking-wide:   0.08em;

	/* --- Espacement (beaucoup de blanc) --- */
	--mz-space-1:  0.25rem;
	--mz-space-2:  0.5rem;
	--mz-space-3:  0.75rem;
	--mz-space-4:  1rem;
	--mz-space-5:  1.5rem;
	--mz-space-6:  2rem;
	--mz-space-7:  3rem;
	--mz-space-8:  4rem;
	--mz-space-9:  6rem;
	--mz-space-10: 8rem;

	/* --- Formes --- */
	--mz-radius-sm: 6px;
	--mz-radius:    10px;  /* boutons : coins légèrement arrondis */
	--mz-radius-lg: 14px;  /* cartes */

	/* --- Ombres (très légères) --- */
	--mz-shadow-card:  0 1px 2px rgba(18, 41, 75, 0.04),
	                   0 4px 16px rgba(18, 41, 75, 0.05);
	--mz-shadow-lift:  0 2px 4px rgba(18, 41, 75, 0.06),
	                   0 12px 32px rgba(18, 41, 75, 0.09);

	/* --- Mise en page --- */
	--mz-container:   1120px;
	--mz-container-narrow: 720px; /* colonnes de lecture */
	--mz-gutter:      1.5rem;

	--mz-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
	:root { --mz-gutter: 2rem; }
}

/* =========================================================================
   2. BASE
   ========================================================================= */

/*
 * Astra pose déjà ce socle, mais on ne s'y adosse pas : sans box-sizing
 * en border-box, .mz-container (width:100% + padding) déborde de l'écran.
 * Le thème doit tenir debout seul.
 */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

body,
body.ast-separate-container,
body.ast-plain-container {
	background-color: var(--mz-white);
	color: var(--mz-ink);
	font-family: var(--mz-font-sans);
	font-size: var(--mz-text-base);
	line-height: var(--mz-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--mz-font-sans);
	color: var(--mz-navy);
	line-height: var(--mz-leading-tight);
	letter-spacing: var(--mz-tracking-tight);
	font-weight: 700;
	margin-top: 0;
}

h1 { font-size: var(--mz-text-3xl); }
h2 { font-size: var(--mz-text-2xl); }
h3 { font-size: var(--mz-text-xl); }

p { margin-top: 0; }

a {
	color: var(--mz-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--mz-transition);
}

a:hover,
a:focus-visible { color: var(--mz-teal-hover); }

/* Anneau de focus visible partout, accessibilité clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--mz-teal);
	outline-offset: 3px;
	border-radius: var(--mz-radius-sm);
}

img { max-width: 100%; height: auto; }

/* Lien d'évitement.
   Masqué par découpe plutôt qu'en left:-9999px : aucun risque d'élargir
   la zone de défilement horizontal. */
.mz-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	padding: var(--mz-space-3) var(--mz-space-5);
	background: var(--mz-teal);
	color: var(--mz-white);
	border-radius: 0 0 var(--mz-radius) 0;
	font-size: var(--mz-text-sm);
	font-weight: 600;
}

.mz-skip-link:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	color: var(--mz-white);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* =========================================================================
   3. MISE EN PAGE
   ========================================================================= */

.mz-container {
	width: 100%;
	max-width: var(--mz-container);
	margin-inline: auto;
	padding-inline: var(--mz-gutter);
}

.mz-container--narrow { max-width: var(--mz-container-narrow); }

.mz-section { padding-block: var(--mz-space-8); }

@media (min-width: 768px) {
	.mz-section { padding-block: var(--mz-space-9); }
}

/* =========================================================================
   4. EN-TÊTE  (§4 : logo à gauche, navigation discrète à droite)
   ========================================================================= */

.mz-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--mz-transition);
}

.mz-header--scrolled { border-bottom-color: var(--mz-rule); }

.mz-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mz-space-5);
	min-height: 72px;
	/* L'en-tête est plus large que le contenu : le logo se rapproche du bord
	   gauche de l'écran et la barre d'onglets respire, sans toucher à la
	   colonne de lecture des pages. */
	max-width: 1680px;
}

/* --- Logo : pastille + mot-marque en texte vivant --- */
.mz-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	flex-shrink: 0;
}

.mz-logo__mark {
	width: 34px;
	height: 34px;
	display: block;
	flex-shrink: 0;
}

.mz-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.mz-logo__name {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--mz-ink);
	letter-spacing: -0.015em;
}

.mz-logo__sub {
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--mz-ink-mute);
	letter-spacing: var(--mz-tracking-wide);
	text-transform: lowercase;
	margin-top: 3px;
}

/* --- Groupe de droite : navigation, connexion, menu mobile --- */
.mz-header__right {
	display: flex;
	align-items: center;
	gap: var(--mz-space-2);
}

@media (min-width: 1320px) {
	.mz-header__right { gap: var(--mz-space-6); }
}

/* Bouton de connexion : présent sur toutes les pages, toutes tailles. */
/* Sélecteur de langue : FR | EN, à gauche du bouton Espace Premium. */
.mz-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: var(--mz-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.mz-lang__choice {
	padding: 0.25rem 0.375rem;
	border-radius: 6px;
	color: var(--mz-ink-mute);
	text-decoration: none;
}

.mz-lang__choice:hover { color: var(--mz-navy); }

.mz-lang__choice[aria-current] {
	color: var(--mz-navy);
	background: var(--mz-wash);
}

/* Sur téléphone, la place manque dans l'en-tête : le sélecteur passe dans
   le menu, sous les onglets. */
.mz-mobile-nav .mz-lang { gap: var(--mz-space-2); padding: var(--mz-space-4) 0; }

.mz-mobile-nav .mz-lang__choice {
	display: inline-block;
	padding: 0.375rem 0.625rem;
	font-size: var(--mz-text-sm);
	font-weight: 600;
	color: var(--mz-ink-mute);
	border-bottom: 0;
}

.mz-mobile-nav .mz-lang__choice[aria-current] { color: var(--mz-navy); }

@media (max-width: 560px) {
	.mz-header__right > .mz-lang { display: none; }
}

.mz-login {
	padding: 0.625rem 1.125rem;
	white-space: nowrap;
}

@media (max-width: 479px) {
	.mz-login { padding: 0.5625rem 0.875rem; }
	.mz-login svg { display: none; }
}

/* --- Navigation discrète --- */
.mz-nav { display: none; }

@media (min-width: 1320px) {
	.mz-nav { display: block; }
}

.mz-nav ul {
	display: flex;
	align-items: center;
	gap: var(--mz-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mz-nav a {
	font-size: var(--mz-text-sm);
	font-weight: 500;
	color: var(--mz-ink-soft);
	text-decoration: none;
	white-space: nowrap; /* un libellé ne se coupe jamais sur deux lignes */
	padding-block: var(--mz-space-2);
	position: relative;
}

.mz-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--mz-turquoise);
	transform: scaleX(0);
	transition: transform var(--mz-transition);
}

.mz-nav a:hover,
.mz-nav a:focus-visible,
.mz-nav .current-menu-item > a,
.mz-nav a[aria-current="page"] { color: var(--mz-ink); font-weight: 600; }

.mz-nav a:hover::after,
.mz-nav a:focus-visible::after,
.mz-nav .current-menu-item > a::after,
.mz-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Bouton menu mobile --- */
.mz-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	background: none;
	border: 0;
	border-radius: var(--mz-radius-sm);
	color: var(--mz-ink);
	cursor: pointer;
}

@media (min-width: 1320px) {
	.mz-nav-toggle { display: none; }
}

.mz-nav-toggle svg { width: 22px; height: 22px; }
.mz-nav-toggle .mz-icon-close { display: none; }
.mz-nav-toggle[aria-expanded="true"] .mz-icon-close { display: block; }
.mz-nav-toggle[aria-expanded="true"] .mz-icon-open { display: none; }

/* --- Panneau mobile --- */
.mz-mobile-nav {
	display: none;
	border-top: 1px solid var(--mz-rule);
	background: var(--mz-white);
	padding-block: var(--mz-space-4) var(--mz-space-6);
}

.mz-mobile-nav.is-open { display: block; }

@media (min-width: 1320px) {
	.mz-mobile-nav,
	.mz-mobile-nav.is-open { display: none; }
}

.mz-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mz-mobile-nav a {
	display: block;
	padding: var(--mz-space-3) 0;
	font-size: var(--mz-text-lg);
	font-weight: 500;
	color: var(--mz-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--mz-rule-soft);
}

.mz-mobile-nav a[aria-current="page"],
.mz-mobile-nav .current-menu-item > a {
	color: var(--mz-teal);
	font-weight: 700;
}

/* =========================================================================
   5. BOUTONS  (coins arrondis, teal profond, texte blanc)
   ========================================================================= */

.mz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8125rem 1.625rem;
	border: 1px solid transparent;
	border-radius: var(--mz-radius);
	font-family: inherit;
	font-size: var(--mz-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mz-transition),
	            border-color var(--mz-transition),
	            color var(--mz-transition),
	            transform var(--mz-transition),
	            box-shadow var(--mz-transition);
}

/* Primaire : l'action évidente de la page. */
.mz-btn--primary {
	background: var(--mz-teal);
	color: var(--mz-white);
}

.mz-btn--primary:hover,
.mz-btn--primary:focus-visible {
	background: var(--mz-teal-hover);
	color: var(--mz-white);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(11, 110, 117, 0.22);
}

/* Secondaire : contour discret. */
.mz-btn--ghost {
	background: transparent;
	color: var(--mz-teal);
	border-color: var(--mz-rule);
}

.mz-btn--ghost:hover,
.mz-btn--ghost:focus-visible {
	border-color: var(--mz-teal);
	background: var(--mz-teal-wash);
	color: var(--mz-teal-hover);
}

.mz-btn--block { width: 100%; }

.mz-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Astra / WooCommerce / Blocs : aligner sur le bouton maison. */
.wp-block-button__link,
.ast-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--mz-teal);
	color: var(--mz-white);
	border-radius: var(--mz-radius);
	font-family: var(--mz-font-sans);
	font-weight: 600;
	transition: background-color var(--mz-transition);
}

.wp-block-button__link:hover,
.ast-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--mz-teal-hover);
	color: var(--mz-white);
}

/* =========================================================================
   6. RECTANGLES EMPILÉS DE L'ACCUEIL
   Une fonction par rectangle, les uns sous les autres. Le Portefeuille est
   en turquoise plein, texte encre foncée (jamais de blanc sur turquoise).
   ========================================================================= */

.mz-container--hub { max-width: 880px; }

.mz-hub { padding-bottom: var(--mz-space-8); }

.mz-rows {
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mz-space-5);
	padding: var(--mz-space-5) var(--mz-space-6);
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	box-shadow: var(--mz-shadow-card);
	transition: transform var(--mz-transition),
	            box-shadow var(--mz-transition),
	            border-color var(--mz-transition);
}

.mz-row:not(.mz-row--contact):hover,
.mz-row:not(.mz-row--contact):focus-within {
	transform: translateY(-2px);
	box-shadow: var(--mz-shadow-lift);
	border-color: rgba(26, 178, 212, 0.45);
}

/* Focus clavier : l'anneau entoure tout le rectangle. */
.mz-row__link:focus-visible { outline: none; }
.mz-row:has(.mz-row__link:focus-visible) {
	outline: 2px solid var(--mz-teal);
	outline-offset: 3px;
}

.mz-row__icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--mz-radius);
	background: var(--mz-turq-wash);
	color: var(--mz-teal);
}

.mz-row__body {
	flex: 1;
	min-width: 0;
}

.mz-row__kicker {
	display: block;
	margin-bottom: 2px;
	font-size: var(--mz-text-xs);
	font-weight: 600;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-row__title {
	margin: 0;
	font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
	font-weight: 700;
	color: var(--mz-navy);
	letter-spacing: -0.01em;
	line-height: var(--mz-leading-snug);
}

.mz-row__link {
	color: inherit;
	text-decoration: none;
}

.mz-row__link:hover { color: inherit; }

/* Tout le rectangle est cliquable ; un seul lien exposé (le titre). */
.mz-row__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mz-row__sub {
	margin: 2px 0 0;
	font-size: var(--mz-text-sm);
	line-height: 1.5;
	color: var(--mz-ink-soft);
}

.mz-row__arrow {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--mz-teal);
	transition: transform var(--mz-transition);
}

.mz-row:hover .mz-row__arrow { transform: translateX(4px); }

/* --- Rectangle mis en avant : le Portefeuille --- */
.mz-row--featured {
	background: var(--mz-turquoise);
	border-color: var(--mz-turquoise);
	box-shadow: 0 2px 6px rgba(11, 110, 117, 0.15),
	            0 16px 40px rgba(11, 110, 117, 0.18);
}

.mz-row--featured:hover,
.mz-row--featured:focus-within { border-color: var(--mz-turquoise); }

.mz-row--featured .mz-row__icon {
	background: rgba(255, 255, 255, 0.4);
	color: var(--mz-ink);
}

.mz-row--featured .mz-row__title { color: var(--mz-ink); }

.mz-row--featured .mz-row__kicker,
.mz-row--featured .mz-row__sub { color: #0D3542; }

/* La flèche devient un vrai bouton teal : l'action évidente de la page. */
.mz-row--featured .mz-row__arrow {
	border-radius: 999px;
	background: var(--mz-teal);
	color: var(--mz-white);
}

/* --- Rectangle contact : deux boutons directs --- */
.mz-row__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mz-space-2);
	justify-content: flex-end;
}

.mz-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius);
	font-size: var(--mz-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--mz-ink-soft);
	text-decoration: none;
	transition: border-color var(--mz-transition),
	            background-color var(--mz-transition),
	            color var(--mz-transition);
}

.mz-contact-btn:hover,
.mz-contact-btn:focus-visible {
	border-color: var(--mz-teal);
	background: var(--mz-teal-wash);
	color: var(--mz-ink);
}

.mz-contact-btn--whatsapp svg { color: #25D366; }
.mz-contact-btn--mail svg { color: var(--mz-teal); }

@media (max-width: 599px) {
	.mz-row {
		gap: var(--mz-space-4);
		padding: var(--mz-space-4) var(--mz-space-5);
	}

	.mz-row__icon {
		width: 44px;
		height: 44px;
	}

	.mz-row--contact { flex-wrap: wrap; }

	.mz-row--contact .mz-row__contact {
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.mz-contact-btn { flex: 1 1 0; justify-content: center; }
}
/* =========================================================================
   7. HÉROS DE LA PAGE D'ACCUEIL
   ========================================================================= */

.mz-hero {
	text-align: center;
	padding-block: var(--mz-space-8) var(--mz-space-7);
}

@media (min-width: 768px) {
	.mz-hero { padding-block: var(--mz-space-9) var(--mz-space-8); }
}

.mz-hero__eyebrow {
	display: inline-block;
	margin-bottom: var(--mz-space-4);
	font-size: var(--mz-text-xs);
	font-weight: 600;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-hero__title {
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: var(--mz-space-5);
	font-size: clamp(2.25rem, 6vw, var(--mz-text-4xl));
	font-weight: 800;
	color: var(--mz-navy);
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}

.mz-hero__lede {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: 0;
	font-size: var(--mz-text-lg);
	line-height: var(--mz-leading-body);
	color: var(--mz-ink-soft);
	text-wrap: pretty;
}

/* =========================================================================
   8. PAGE DU LIVRE
   Début du livre lisible, puis fondu progressif façon site de journal,
   puis accès au PDF contre e-mail.
   ========================================================================= */

.mz-book__head {
	text-align: center;
	padding-block: var(--mz-space-8) 0;
}

.mz-book__title {
	margin: 0 auto var(--mz-space-3);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	color: var(--mz-navy);
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}

.mz-book__sub {
	margin: 0 0 var(--mz-space-7);
	font-size: var(--mz-text-lg);
	color: var(--mz-ink-soft);
}

/*
 * Le fondu : toute la sélection ci-dessus reste lisible en entier (pas de
 * hauteur fixe, pas de coupe) ; seules les toutes dernières lignes
 * s'estompent doucement pour amener naturellement vers l'encadré
 * d'inscription en dessous, comme la fin d'un article avant le mur payant.
 */
.mz-excerpt {
	margin-top: var(--mz-space-8);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

.mz-excerpt h2 {
	margin: var(--mz-space-7) 0 var(--mz-space-3);
	font-size: var(--mz-text-2xl);
}

.mz-excerpt h2:first-child { margin-top: 0; }

.mz-excerpt h3 {
	margin: var(--mz-space-6) 0 var(--mz-space-2);
	font-size: var(--mz-text-lg);
}

.mz-excerpt p,
.mz-excerpt li {
	margin: 0 0 1.25em;
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--mz-ink);
}

.mz-excerpt ul { margin: 0 0 1.25em; padding-left: 1.25rem; }
.mz-excerpt li { margin-bottom: 0.6em; }
.mz-excerpt li:last-child { margin-bottom: 0; }

.mz-excerpt .mz-book-toc:first-child { margin-top: 0; }

/* Emplacement de l'extrait tant que le texte n'est pas fourni. */
.mz-skeleton { margin-bottom: 1.75rem; }

.mz-skeleton span {
	display: block;
	height: 0.8rem;
	margin-bottom: 0.8rem;
	border-radius: 4px;
	background: var(--mz-rule);
}

.mz-skeleton span:last-child { width: 62%; }

.mz-gate {
	margin-top: var(--mz-space-5);
	padding: var(--mz-space-7) var(--mz-space-6);
	text-align: center;
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule-soft);
	border-radius: var(--mz-radius-lg);
}

.mz-gate > .mz-icon {
	margin-bottom: var(--mz-space-3);
	color: var(--mz-teal);
}

.mz-gate__title {
	margin: 0 0 var(--mz-space-2);
	font-size: var(--mz-text-xl);
}

.mz-gate__text {
	max-width: 44ch;
	margin: 0 auto var(--mz-space-5);
	color: var(--mz-ink-soft);
}

.mz-gate__form {
	max-width: 520px;
	margin-inline: auto;
}

/* --- Citations (extrait du livre) --- */
.mz-cite {
	margin: var(--mz-space-5) 0;
	padding: var(--mz-space-4) var(--mz-space-5);
	border-left: 3px solid var(--mz-turquoise);
	background: var(--mz-wash);
	font-style: italic;
	color: var(--mz-ink-soft);
}

.mz-cite p { margin: 0 0 0.75em; font-size: 1rem !important; }
.mz-cite p:last-child { margin-bottom: 0; }

/* --- Graphiques du livre --- */
.mz-figure {
	margin: var(--mz-space-6) 0;
	text-align: center;
}

.mz-figure img {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--mz-radius);
	border: 1px solid var(--mz-rule-soft);
}

.mz-figure figcaption {
	margin-top: var(--mz-space-2);
	font-size: var(--mz-text-xs);
	color: var(--mz-ink-mute);
}

.mz-figure--missing {
	display: grid;
	place-items: center;
	min-height: 8rem;
	padding: var(--mz-space-5);
	background: #FFFBEB;
	border: 1px dashed #D9A404;
	border-radius: var(--mz-radius);
	color: #6B4E00;
	font-size: var(--mz-text-sm);
}

/* --- Table des matières (liste simple, non cliquable) --- */
.mz-book-toc {
	margin: var(--mz-space-6) 0 var(--mz-space-8);
	padding: var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule-soft);
	border-radius: var(--mz-radius-lg);
}

.mz-book-toc__title {
	margin: 0 0 var(--mz-space-4);
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-book-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 1;
}

@media (min-width: 700px) {
	.mz-book-toc ul { columns: 2; }
}

.mz-book-toc li {
	margin-bottom: var(--mz-space-2);
	break-inside: avoid;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

/* =========================================================================
   8b. VIDÉO EN FAÇADE (page broker)
   Image fixe + bouton lecture ; l'iframe YouTube n'est injectée qu'au clic,
   voir assets/js/ui.js. Aucune requête vers YouTube avant cette action.
   ========================================================================= */

.mz-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--mz-navy);
	border-radius: var(--mz-radius-lg);
	box-shadow: var(--mz-shadow-lift);
}

.mz-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mz-video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: rgba(18, 41, 75, 0.15);
	border: 0;
	cursor: pointer;
	transition: background-color var(--mz-transition);
}

.mz-video__play:hover,
.mz-video__play:focus-visible { background: rgba(18, 41, 75, 0.3); }

.mz-video__play svg {
	width: 68px;
	height: 68px;
	padding: 0 0 0 6px; /* recentre visuellement le triangle */
	color: var(--mz-white);
	background: var(--mz-teal);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	transition: transform var(--mz-transition), background-color var(--mz-transition);
}

.mz-video__play:hover svg,
.mz-video__play:focus-visible svg {
	background: var(--mz-teal-hover);
	transform: scale(1.06);
}

.mz-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mz-video__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--mz-white);
	background: rgba(18, 41, 75, 0.6);
	font-weight: 600;
}

/* --- Contenu long (pages simples, points clés de la page broker) --- */
.mz-prose h2 {
	margin: 0 0 var(--mz-space-3);
	font-size: var(--mz-text-xl);
}

.mz-prose p,
.mz-prose li {
	color: var(--mz-ink-soft);
	line-height: var(--mz-leading-body);
}

.mz-prose ul {
	margin: 0;
	padding-left: 1.25rem;
}

.mz-prose li { margin-bottom: var(--mz-space-3); }
.mz-prose li:last-child { margin-bottom: 0; }

/* Chapitres de la vidéo : numérotation visible, alignée. */
.mz-chapters {
	margin: 0;
	padding-left: 1.5rem;
}

.mz-chapters li {
	margin-bottom: var(--mz-space-3);
	padding-left: 0.25rem;
	color: var(--mz-ink);
}

.mz-chapters li::marker {
	color: var(--mz-teal);
	font-weight: 700;
}

/* =========================================================================
   8d. PRISE DE RENDEZ-VOUS
   ========================================================================= */

/* --- Les trois faits clés : téléphone, durée, tarif --- */
.mz-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-4);
	margin: 0 0 var(--mz-space-8);
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.mz-facts { grid-template-columns: repeat(3, 1fr); }
}

.mz-facts__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--mz-space-5);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule-soft);
	border-radius: var(--mz-radius-lg);
	color: var(--mz-teal);
}

.mz-facts__label {
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-facts__value {
	font-size: var(--mz-text-base);
	font-weight: 600;
	color: var(--mz-navy);
	line-height: 1.4;
}

/* --- Périmètre : ce qui est possible / ce qui ne l'est pas --- */
.mz-scope {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-5);
	margin-bottom: var(--mz-space-6);
}

@media (min-width: 760px) {
	.mz-scope { grid-template-columns: 1fr 1fr; }
}

.mz-scope__col {
	padding: var(--mz-space-6);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
}

.mz-scope__col--yes { border-top: 3px solid var(--mz-turquoise); }
.mz-scope__col--no { border-top: 3px solid var(--mz-ink-mute); }

.mz-scope__title {
	margin: 0 0 var(--mz-space-4);
	font-size: var(--mz-text-lg);
}

.mz-scope__col ul {
	margin: 0;
	padding-left: 1.125rem;
}

.mz-scope__col li {
	margin-bottom: var(--mz-space-3);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	color: var(--mz-ink-soft);
}

.mz-scope__col li:last-child { margin-bottom: 0; }

.mz-scope__legal {
	margin: 0 0 var(--mz-space-8);
	padding: var(--mz-space-5);
	background: var(--mz-rule-soft);
	border-radius: var(--mz-radius);
	font-size: var(--mz-text-xs);
	line-height: 1.7;
	color: var(--mz-ink-soft);
}

/* --- Le calendrier --- */
.mz-booking {
	padding: var(--mz-space-7) var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule-soft);
	border-radius: var(--mz-radius-lg);
	text-align: center;
}

.mz-booking__title {
	margin: 0 0 var(--mz-space-2);
	font-size: var(--mz-text-xl);
}

.mz-booking__text {
	max-width: 46ch;
	margin: 0 auto var(--mz-space-5);
	color: var(--mz-ink-soft);
}

.mz-booking__embed { margin-bottom: var(--mz-space-4); }

/* =========================================================================
   8f. FORMULAIRE DE CONTACT
   ========================================================================= */

.mz-form-card {
	padding: var(--mz-space-7) var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule-soft);
	border-radius: var(--mz-radius-lg);
	scroll-margin-top: 90px;
}

/*
 * Champ piège : invisible à l'écran sans être display:none, que certains
 * robots savent détecter. Il reste hors du parcours clavier grâce à
 * tabindex="-1" et hors des lecteurs d'écran grâce à aria-hidden.
 */
.mz-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mz-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-4);
}

@media (min-width: 560px) {
	.mz-form__row { grid-template-columns: 1fr 1fr; }
}

.mz-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0 0 var(--mz-space-4);
}

.mz-field label {
	font-size: var(--mz-text-sm);
	font-weight: 600;
	color: var(--mz-navy);
}

.mz-field__req { color: var(--mz-teal); }

.mz-field input,
.mz-field textarea {
	width: 100%;
	height: auto; /* Astra impose 40 px aux champs : trop bas pour notre corps de texte */
	line-height: 1.4;
	padding: 0.75rem 0.875rem;
	font-family: inherit;
	font-size: var(--mz-text-base);
	color: var(--mz-ink);
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius);
	transition: border-color var(--mz-transition), box-shadow var(--mz-transition);
}

.mz-field textarea {
	resize: vertical;
	min-height: 9rem;
	line-height: 1.6;
}

.mz-field input:focus,
.mz-field textarea:focus {
	outline: none;
	border-color: var(--mz-teal);
	box-shadow: 0 0 0 3px var(--mz-teal-wash);
}

.mz-field__hint {
	font-size: var(--mz-text-xs);
	color: var(--mz-ink-mute);
}

/* --- Retour après envoi --- */
.mz-notice {
	margin: 0 0 var(--mz-space-5);
	padding: var(--mz-space-4) var(--mz-space-5);
	border-radius: var(--mz-radius);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	border: 1px solid transparent;
}

.mz-notice--ok {
	background: var(--mz-turq-wash);
	border-color: var(--mz-turquoise);
	color: #0D3542;
}

.mz-notice--ko {
	background: #FFF5F5;
	border-color: #E0A0A0;
	color: #7A2E2E;
}

/* WhatsApp en alternative au formulaire (page Service Client) */
.mz-contact__alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--mz-space-3) var(--mz-space-4);
	margin: 0 0 var(--mz-space-6);
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

.mz-contact__alt p { margin: 0; }

.mz-contact__note {
	margin: var(--mz-space-6) 0 0;
	text-align: center;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-mute);
}

/* =========================================================================
   8g. OFFRE D'ABONNEMENT (page Portefeuille)
   Deux cadres de tarif côte à côte, un cadre « déjà abonné », puis le
   secondaire en petit : conditions et avertissement.
   ========================================================================= */

/* Sélecteur de devise : trois boutons accolés, au-dessus des cadres */
.mz-currency {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mz-space-3);
	margin: 0 0 var(--mz-space-5);
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

.mz-currency__group {
	display: inline-flex;
	padding: 3px;
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
	border-radius: 999px;
}

.mz-currency__choice {
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	font-size: var(--mz-text-sm);
	font-weight: 600;
	color: var(--mz-ink-soft);
	text-decoration: none;
	transition: background-color var(--mz-transition), color var(--mz-transition);
}

.mz-currency__choice:hover,
.mz-currency__choice:focus-visible { color: var(--mz-navy); }

.mz-currency__choice[aria-pressed="true"] {
	background: var(--mz-white);
	color: var(--mz-navy);
	box-shadow: 0 1px 2px rgba(18, 41, 75, 0.12);
}

.mz-plans[hidden] { display: none; }

.mz-plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-5);
	margin: 0 0 var(--mz-space-6);
}

@media (min-width: 720px) {
	.mz-plans { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.mz-plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--mz-space-7) var(--mz-space-6) var(--mz-space-6);
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	box-shadow: var(--mz-shadow-card);
}

.mz-plan--featured {
	border-color: var(--mz-turquoise);
	border-top: 4px solid var(--mz-turquoise);
}

.mz-plan__kicker {
	margin-bottom: var(--mz-space-4);
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-plan__price {
	margin: 0;
	white-space: nowrap; /* « 140 CHF / an » tient sur une ligne */
	font-size: clamp(2.25rem, 6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--mz-navy);
}

.mz-plan__price small {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--mz-ink-soft);
}

.mz-plan__tag {
	display: inline-block;
	margin-top: var(--mz-space-4);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: #E3F6FA; /* teinte turquoise très claire, texte teal dessus (5,5:1) */
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-plan__note {
	margin: var(--mz-space-4) 0 0;
	min-height: 2.6em;
	font-size: var(--mz-text-sm);
	line-height: 1.5;
	color: var(--mz-ink-soft);
}

.mz-plan .mz-btn {
	width: 100%;
	max-width: 260px;
	margin-top: var(--mz-space-6);
	padding-top: var(--mz-space-4);
	padding-bottom: var(--mz-space-4);
}

/* --- Déjà abonné --- */
.mz-member {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mz-space-4) var(--mz-space-6);
	margin: 0 0 var(--mz-space-6);
	padding: var(--mz-space-5) var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
}

.mz-member__text { flex: 1 1 260px; }

.mz-member__title {
	margin: 0 0 0.25rem;
	font-size: var(--mz-text-lg);
	color: var(--mz-navy);
}

.mz-member__lead {
	margin: 0;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

.mz-member__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mz-space-3);
}

.mz-member__remember {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: 34ch;
	font-size: var(--mz-text-xs);
	line-height: 1.5;
	color: var(--mz-ink-mute);
	cursor: pointer;
}

.mz-member__remember input {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--mz-teal);
}

/* --- Le secondaire, en petit --- */
.mz-offer__terms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mz-space-2) var(--mz-space-6);
	max-width: 42rem;
	margin: 0 auto var(--mz-space-5);
	padding: 0;
	list-style: none;
	font-size: var(--mz-text-sm);
	line-height: 1.5;
	color: var(--mz-ink-soft);
}

/* La puce est posée dans la marge du texte : sur deux lignes, le texte reste aligné. */
.mz-offer__terms li {
	position: relative;
	padding-left: 1rem;
}

.mz-offer__terms li::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mz-turquoise);
}

@media (max-width: 600px) {
	.mz-offer__terms {
		grid-template-columns: 1fr;
	}
}

.mz-offer__legal {
	margin: 0 0 var(--mz-space-7);
	font-size: var(--mz-text-xs);
	line-height: 1.7;
	text-align: center;
	color: var(--mz-ink-mute);
}

/* Ligne d'acceptation, sous les deux cadres de tarif. */
.mz-offer__consent {
	margin: calc(-1 * var(--mz-space-3)) 0 var(--mz-space-6);
	font-size: var(--mz-text-xs);
	line-height: 1.6;
	text-align: center;
	color: var(--mz-ink-soft);
}

/* Cadrage de l'offre : quatre lignes courtes, lisibles avant l'achat. */
.mz-offer__frame {
	margin: 0 0 var(--mz-space-7);
	padding: var(--mz-space-5) var(--mz-space-6);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	color: var(--mz-ink-soft);
}

.mz-offer__frame-title {
	margin: 0 0 var(--mz-space-3);
	font-size: var(--mz-text-base);
	color: var(--mz-navy);
}

.mz-offer__frame ul {
	margin: 0 0 var(--mz-space-3);
	padding: 0;
	list-style: none;
}

.mz-offer__frame li + li { margin-top: var(--mz-space-2); }

.mz-offer__frame strong { color: var(--mz-ink); }

/* =========================================================================
   8g-2. ARGUMENTAIRE DU PORTEFEUILLE (texte de vente, entre les deux tarifs)
   Une colonne de lecture : un titre fort, des intertitres marqués d'un trait
   turquoise, peu d'effets. Le turquoise ne porte jamais de texte.
   ========================================================================= */

.mz-pitch {
	margin: var(--mz-space-8) 0 var(--mz-space-7);
	padding-top: var(--mz-space-8);
	border-top: 1px solid var(--mz-rule);
}

.mz-pitch__eyebrow {
	display: block;
	margin-bottom: var(--mz-space-3);
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-pitch__title {
	margin: 0 0 var(--mz-space-5);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	line-height: var(--mz-leading-tight);
	letter-spacing: var(--mz-tracking-tight);
	color: var(--mz-navy);
	text-wrap: balance;
}

.mz-pitch p {
	margin: 0 0 var(--mz-space-4);
	line-height: var(--mz-leading-body);
	color: var(--mz-ink-soft);
}

/* Le chapeau : plus grand, plus sombre. */
.mz-pitch p.mz-pitch__intro {
	margin-bottom: var(--mz-space-6);
	font-size: var(--mz-text-lg);
	line-height: 1.6;
	color: var(--mz-ink);
}

.mz-pitch__names { color: var(--mz-navy); }

/* Intertitres : un court trait turquoise, puis le titre. */
.mz-pitch__h {
	margin: var(--mz-space-8) 0 var(--mz-space-4);
	font-size: clamp(1.3125rem, 3.4vw, 1.625rem);
	line-height: var(--mz-leading-snug);
	letter-spacing: var(--mz-tracking-tight);
	color: var(--mz-navy);
	text-wrap: balance;
}

.mz-pitch__h::before {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: var(--mz-space-4);
	border-radius: 2px;
	background: var(--mz-turquoise);
}

/* Une définition en marge du propos (le « moat »). */
.mz-pitch p.mz-pitch__aside {
	margin: var(--mz-space-5) 0;
	padding: var(--mz-space-4) var(--mz-space-5);
	border-left: 3px solid var(--mz-turquoise);
	border-radius: 0 var(--mz-radius) var(--mz-radius) 0;
	background: var(--mz-wash);
	font-size: var(--mz-text-sm);
	line-height: 1.65;
}

/* La phrase à retenir d'une partie. */
.mz-pitch p.mz-pitch__key {
	margin: var(--mz-space-5) 0;
	font-size: var(--mz-text-lg);
	font-weight: 700;
	line-height: var(--mz-leading-snug);
	color: var(--mz-navy);
}

/* Un repère chiffré, encadré, sans gros chiffres : c'est un fait, pas une promesse. */
.mz-pitch p.mz-pitch__fact {
	margin: var(--mz-space-6) 0 0;
	padding: var(--mz-space-5) var(--mz-space-6);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	background: var(--mz-white);
	box-shadow: var(--mz-shadow-card);
	color: var(--mz-ink);
}

/* Listes : pastilles turquoise, ou numéros pour les principes. */
.mz-pitch__list,
.mz-pitch__steps {
	margin: 0 0 var(--mz-space-5);
	padding: 0;
	list-style: none;
}

.mz-pitch__list li,
.mz-pitch__steps li {
	position: relative;
	margin-bottom: var(--mz-space-3);
	line-height: var(--mz-leading-body);
	color: var(--mz-ink-soft);
}

.mz-pitch__list li { padding-left: 1.5rem; }

.mz-pitch__list li::before {
	content: '';
	position: absolute;
	left: 0.15rem;
	top: 0.68em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mz-turquoise);
}

.mz-pitch__steps { counter-reset: mz-step; }

.mz-pitch__steps li {
	counter-increment: mz-step;
	min-height: 2rem;
	padding-left: 2.85rem;
	margin-bottom: var(--mz-space-4);
}

.mz-pitch__steps li::before {
	content: counter(mz-step);
	position: absolute;
	left: 0;
	top: -0.05em;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #E3F6FA; /* même teinte que les étiquettes de tarif, texte teal dessus (5,5:1) */
	font-size: var(--mz-text-sm);
	font-weight: 700;
	color: var(--mz-teal);
}

/* Ce que vous recevez : un cadre à part. */
.mz-pitch__box {
	margin: var(--mz-space-8) 0 0;
	padding: var(--mz-space-6);
	border-radius: var(--mz-radius-lg);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
}

.mz-pitch__box .mz-pitch__h { margin-top: 0; }
.mz-pitch__box .mz-pitch__list { margin-bottom: 0; }
.mz-pitch__box .mz-pitch__list li:last-child { margin-bottom: 0; }

/* La conclusion, centrée, juste au-dessus des tarifs. */
.mz-pitch__close {
	margin: var(--mz-space-8) 0 var(--mz-space-6);
	text-align: center;
}

.mz-pitch__close-title {
	margin: 0 0 var(--mz-space-4);
	font-size: clamp(1.5rem, 4.2vw, 2rem);
	line-height: var(--mz-leading-tight);
	letter-spacing: var(--mz-tracking-tight);
	color: var(--mz-navy);
	text-wrap: balance;
}

.mz-pitch p.mz-pitch__price {
	margin: var(--mz-space-5) 0 var(--mz-space-2);
	font-size: var(--mz-text-lg);
	font-weight: 700;
	color: var(--mz-navy);
}

/* La mention de bas de page, en petit. */
.mz-pitch p.mz-pitch__legal {
	margin: 0;
	font-size: var(--mz-text-xs);
	line-height: 1.7;
	color: var(--mz-ink-mute);
}

@media (max-width: 480px) {
	.mz-pitch__box { padding: var(--mz-space-5); }
	.mz-pitch p.mz-pitch__fact { padding: var(--mz-space-5); }
}

/* =========================================================================
   8h. PAGES LÉGALES
   ========================================================================= */

.mz-legal__updated {
	margin: 0 0 var(--mz-space-6);
	font-size: var(--mz-text-xs);
	color: var(--mz-ink-mute);
}

/* Bandeau : ces textes ne sont pas définitifs. */
.mz-review {
	margin: 0 0 var(--mz-space-7);
	padding: var(--mz-space-4) var(--mz-space-5);
	background: #FFF5F5;
	border: 1px solid #E0A0A0;
	border-radius: var(--mz-radius);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	color: #7A2E2E;
}

.mz-review strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--mz-text-xs);
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: #7A2E2E;
}

/* Information manquante, à fournir par Louis : impossible à manquer. */
.mz-fill {
	padding: 0.05rem 0.4rem;
	background: #FFFBEB;
	border: 1px dashed #D9A404;
	border-radius: var(--mz-radius-sm);
	color: #6B4E00;
	font-weight: 600;
	font-size: 0.9em;
}

.mz-legal .mz-prose h2 {
	margin-top: var(--mz-space-7);
	font-size: var(--mz-text-xl);
}

.mz-legal .mz-prose h2:first-child { margin-top: 0; }

/* Nom et adresse de l'éditeur : une image, jamais du texte. */
.mz-legal__identity { margin: 0 0 var(--mz-space-4); }
.mz-legal__identity img { display: block; max-width: 100%; height: auto; }
.mz-legal__mail { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }

.mz-legal .mz-prose h3 {
	margin: var(--mz-space-5) 0 var(--mz-space-2);
	font-size: var(--mz-text-base);
	color: var(--mz-navy);
}

.mz-legal .mz-prose p,
.mz-legal .mz-prose li { font-size: var(--mz-text-base); }

/* =========================================================================
   8i. NEWS PRO 3 (miroir des posts X)
   ========================================================================= */

.mz-news-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-4);
}

.mz-news-item {
	padding: var(--mz-space-5) var(--mz-space-6);
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-left: 3px solid var(--mz-turquoise);
	border-radius: var(--mz-radius-lg);
	box-shadow: var(--mz-shadow-card);
}

.mz-news-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mz-space-3);
	margin-bottom: var(--mz-space-3);
	font-size: var(--mz-text-xs);
	color: var(--mz-ink-mute);
}

.mz-news-item__kind {
	padding: 0.1rem 0.55rem;
	background: var(--mz-turq-wash);
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: var(--mz-teal);
}

.mz-news-item__text {
	margin: 0 0 var(--mz-space-3);
	font-size: var(--mz-text-base);
	line-height: 1.7;
	color: var(--mz-ink);
	overflow-wrap: anywhere;
}

.mz-news-item__link {
	font-size: var(--mz-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.mz-news-item__link::after { content: " \2197"; }

/* Réponse X : sous le post d'origine, décalée vers la droite */
.mz-news-item--reply {
	margin-left: var(--mz-space-6);
	margin-top: calc(-1 * var(--mz-space-2));
	background: var(--mz-wash);
	border-left-color: var(--mz-teal);
	box-shadow: none;
}

.mz-news-item__reply {
	font-size: var(--mz-text-base);
	line-height: 1;
	color: var(--mz-teal);
}

@media (max-width: 480px) {
	.mz-news-item--reply { margin-left: var(--mz-space-4); }
}

/* Graphique joint au post (reçu de x_posts_sync.py) */
.mz-news-item__chart {
	margin: 0.75rem 0 0.5rem;
}
.mz-news-item__chart img {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
}

.mz-news-synced,
.mz-news-empty {
	margin: var(--mz-space-6) 0 0;
	text-align: center;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-mute);
}

/* =========================================================================
   8e. MENTION LÉGALE DE COLLECTE D'E-MAIL
   Affichée sous chaque point de collecte (livre, newsletter, rendez-vous).
   ========================================================================= */

.mz-privacy-notice {
	max-width: 56ch;
	margin: var(--mz-space-4) auto 0;
	font-size: var(--mz-text-xs);
	line-height: 1.6;
	color: var(--mz-ink-mute);
}

.mz-privacy-notice a { font-weight: 600; }

.mz-privacy-notice__missing {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background: #FFFBEB;
	border: 1px dashed #D9A404;
	border-radius: var(--mz-radius-sm);
	color: #6B4E00;
	font-weight: 600;
}

/* =========================================================================
   9. PIED DE PAGE
   ========================================================================= */

/* --- Bloc « Suivre les analyses », pied de page de l'accueil uniquement ---
   Contient le formulaire newsletter Systeme.io (mitzpahor_embed()). */
.mz-newsletter {
	padding: var(--mz-space-6);
	margin-bottom: var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule-soft);
	border-radius: var(--mz-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-5);
}

@media (min-width: 860px) {
	.mz-newsletter {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--mz-space-6) var(--mz-space-7);
	}
}

.mz-newsletter__intro { flex-shrink: 0; max-width: 32ch; }

.mz-newsletter__title {
	margin: 0 0 var(--mz-space-1);
	font-size: var(--mz-text-base);
	font-weight: 700;
	color: var(--mz-navy);
}

.mz-newsletter__text {
	margin: 0;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-mute);
}

.mz-newsletter__form { flex: 1; min-width: 0; max-width: 420px; }

.mz-newsletter .mz-embed-placeholder { text-align: left; }

.mz-footer {
	margin-top: var(--mz-space-9);
	padding-block: var(--mz-space-7) var(--mz-space-6);
	border-top: 1px solid var(--mz-rule);
	background: var(--mz-white);
	font-size: var(--mz-text-sm);
}

.mz-footer__top {
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-5);
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--mz-space-6);
}

@media (min-width: 768px) {
	.mz-footer__top { flex-direction: row; align-items: center; }
}

.mz-footer__giving {
	max-width: 46ch;
	margin: 0;
	color: var(--mz-ink-mute);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
}

.mz-footer__socials {
	display: flex;
	gap: var(--mz-space-3);
	flex-shrink: 0;
}

.mz-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius);
	color: var(--mz-ink-soft);
	transition: color var(--mz-transition),
	            border-color var(--mz-transition),
	            background-color var(--mz-transition);
}

.mz-social:hover,
.mz-social:focus-visible {
	color: var(--mz-teal);
	border-color: var(--mz-teal);
	background: var(--mz-teal-wash);
}

.mz-social svg { width: 17px; height: 17px; }

.mz-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mz-space-2) var(--mz-space-5);
	list-style: none;
	margin: 0 0 var(--mz-space-5);
	padding: var(--mz-space-5) 0 0;
	border-top: 1px solid var(--mz-rule-soft);
}

.mz-footer__legal a {
	color: var(--mz-ink-mute);
	text-decoration: none;
	font-size: var(--mz-text-xs);
}

.mz-footer__legal a:hover,
.mz-footer__legal a:focus-visible {
	color: var(--mz-ink);
	text-decoration: underline;
}

.mz-footer__base {
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-3);
	color: var(--mz-ink-mute);
	font-size: var(--mz-text-xs);
	line-height: 1.6;
}

@media (min-width: 768px) {
	.mz-footer__base { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

.mz-footer__risk {
	max-width: 70ch;
	margin: 0;
	color: var(--mz-ink-mute);
	font-size: var(--mz-text-xs);
	line-height: 1.6;
}

/* =========================================================================
   10. ZONES À COMPLÉTER PAR LOUIS
   Repère visuel volontairement voyant : ne doit jamais partir en ligne.
   ========================================================================= */

.mz-todo {
	position: relative;
	margin-block: var(--mz-space-5);
	padding: var(--mz-space-5) var(--mz-space-5) var(--mz-space-5) var(--mz-space-6);
	background: #FFFBEB;
	border: 1px dashed #D9A404;
	border-radius: var(--mz-radius);
	color: #6B4E00;
	font-size: var(--mz-text-sm);
	line-height: 1.6;
}

.mz-todo__label {
	display: block;
	margin-bottom: var(--mz-space-2);
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: #8A6400;
}

.mz-todo p:last-child { margin-bottom: 0; }

/* --- Lien Systeme.io pas encore branché ---
   Même palette que .mz-todo : un bouton ou bloc qui pointe encore vers un
   espace réservé « [COLLER_...] » reste visuellement marqué comme tel,
   plutôt que de sembler fonctionner. */
.mz-is-placeholder {
	border-color: #D9A404 !important;
	border-style: dashed !important;
	background: #FFFBEB !important;
	color: #6B4E00 !important;
	box-shadow: none !important;
}

.mz-is-placeholder:hover,
.mz-is-placeholder:focus-visible {
	background: #FEF3C7 !important;
	color: #6B4E00 !important;
}

/* --- Bloc d'intégration Systeme.io (formulaire livre, newsletter) ---
   Tant que le code fourni par Systeme.io n'est pas collé dans functions.php,
   l'espace réservé s'affiche ici en clair : impossible de le manquer. */
.mz-embed-placeholder {
	padding: var(--mz-space-5);
	background: #FFFBEB;
	border: 1px dashed #D9A404;
	border-radius: var(--mz-radius);
	text-align: center;
}

.mz-embed-placeholder__label {
	display: block;
	margin-bottom: var(--mz-space-2);
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: var(--mz-tracking-wide);
	text-transform: uppercase;
	color: #8A6400;
}

.mz-embed-placeholder code {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: rgba(217, 164, 4, 0.12);
	border-radius: var(--mz-radius-sm);
	font-size: var(--mz-text-sm);
	color: #6B4E00;
}

/* =========================================================================
   8j. PAGE 3E PILIER : en-tête compact, questionnaire visible sans défiler
   ========================================================================= */

.mz-p3o-page .mz-hero { padding-block: var(--mz-space-5) var(--mz-space-4); }

@media (min-width: 768px) {
	.mz-p3o-page .mz-hero { padding-block: var(--mz-space-6) var(--mz-space-5); }
}

.mz-p3o-page .mz-hero__eyebrow { margin-bottom: var(--mz-space-3); }
.mz-p3o-page .mz-hero__title { max-width: 34ch; margin-bottom: var(--mz-space-4); font-size: clamp(2rem, 5vw, 2.75rem); }

/* Les formes de 3e pilier, en une ligne de pastilles */
.mz-p3o-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mz-space-2);
	max-width: 80ch;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mz-p3o-types li {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--mz-rule);
	border-radius: 999px;
	font-size: var(--mz-text-sm);
	font-weight: 600;
	color: var(--mz-navy);
	background: var(--mz-white);
}

.mz-p3o-types__none {
	border-style: dashed;
	font-weight: 500;
	color: var(--mz-ink-soft);
}
/* En-tête du questionnaire : moins d'air au-dessus de la première question */
.mz-p3o-page .p3o-head { margin-bottom: 16px; }
.mz-p3o-page .p3o-head h2 { font-size: clamp(21px, 2.4vw, 28px); }

/* =========================================================================
   8k. COMPARATIF 3E PILIER (page d'accueil des quatre comparatifs, gratuits)
   ========================================================================= */

.mz-comp-block { margin: 0 0 var(--mz-space-7); }

.mz-comp-block__title,
.mz-comp-keynote__title,
.mz-comp-guarantee__title,
.mz-comp-legal__title {
	margin: 0 0 var(--mz-space-4);
	font-size: var(--mz-text-xl);
	color: var(--mz-navy);
}

.mz-comp-list {
	margin: 0;
	padding-left: 1.125rem;
}

.mz-comp-list li {
	margin-bottom: var(--mz-space-3);
	line-height: var(--mz-leading-body);
}

.mz-comp-list li:last-child { margin-bottom: 0; }
.mz-comp-list strong { color: var(--mz-navy); }

.mz-comp-note {
	margin: var(--mz-space-5) 0 0;
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	color: var(--mz-ink-soft);
}

/* Les trois grilles de pondération, côte à côte dès qu'il y a la place */
.mz-comp-grids {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-4);
	margin: var(--mz-space-5) 0 0;
}

@media (min-width: 720px) {
	.mz-comp-grids { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.mz-comp-grid {
	padding: var(--mz-space-5);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
}

.mz-comp-grid h3 {
	margin: 0 0 var(--mz-space-4);
	font-size: var(--mz-text-base);
	color: var(--mz-teal);
}

.mz-comp-grid ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mz-text-sm);
}

.mz-comp-grid li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mz-space-3);
	padding: 0.4rem 0;
	border-top: 1px solid var(--mz-rule-soft);
	line-height: 1.4;
	color: var(--mz-ink-soft);
}

.mz-comp-grid li:first-child { border-top: 0; }

.mz-comp-grid b {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var(--mz-navy);
}

/* Encadré turquoise : l'indépendance */
.mz-comp-keynote {
	margin: 0 0 var(--mz-space-7);
	padding: var(--mz-space-6);
	background: #E3F6FA; /* teinte turquoise très claire, texte encre dessus */
	border-left: 4px solid var(--mz-turquoise);
	border-radius: 0 var(--mz-radius-lg) var(--mz-radius-lg) 0;
}

.mz-comp-keynote p { margin: 0 0 var(--mz-space-3); }
.mz-comp-keynote p:last-child { margin-bottom: 0; }

/* La garantie : le bloc le plus visible de la page */
.mz-comp-guarantee {
	margin: 0 0 var(--mz-space-7);
	padding: var(--mz-space-6);
	background: var(--mz-white);
	border: 2px solid var(--mz-teal);
	border-radius: var(--mz-radius-lg);
	text-align: center;
}

.mz-comp-guarantee__title {
	margin-bottom: var(--mz-space-3);
	font-size: var(--mz-text-2xl);
}

.mz-comp-guarantee p {
	max-width: 58ch;
	margin: 0 auto;
	color: var(--mz-ink-soft);
}

.mz-comp-buy { margin: 0 0 var(--mz-space-5); }

/* Le cadre juridique : en bas, mais lisible, jamais en petits caractères */
.mz-comp-legal {
	margin: var(--mz-space-7) 0 0;
	padding: var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
}

.mz-comp-legal p {
	margin: 0 0 var(--mz-space-4);
	line-height: var(--mz-leading-body);
	color: var(--mz-ink-soft);
}

.mz-comp-legal p:last-child { margin-bottom: 0; }
.mz-comp-legal strong { color: var(--mz-navy); }

/* Renvoi vers le comparatif, posé sous le questionnaire 3e pilier */
.mz-comp-teaser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mz-space-4) var(--mz-space-6);
	margin: var(--mz-space-7) 0 0;
	padding: var(--mz-space-5) var(--mz-space-6);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
}

.mz-comp-teaser__text { flex: 1 1 280px; }

.mz-comp-teaser__title {
	margin: 0 0 0.25rem;
	font-size: var(--mz-text-lg);
	color: var(--mz-navy);
}

.mz-comp-teaser__lead {
	margin: 0;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

/* =========================================================================
   11. MOUVEMENT RÉDUIT
   ========================================================================= */

/* =========================================================================
   8l. COMPARATIF 3E PILIER : pages de catégorie (fragments générés)
   Les classes .mz-cmp-* sont émises par build_pages.py. Le principe des
   pages : lisible sans expertise, court en surface, le détail derrière un
   <details>. Aucun JS : le repli est natif.
   ========================================================================= */

/* Accueil : les quatre catégories en cartes cliquables */
.mz-cmp-hub {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-4);
	margin: 0 0 var(--mz-space-5);
}

@media (min-width: 720px) {
	.mz-cmp-hub { grid-template-columns: 1fr 1fr; }
}

.mz-cmp-hub__item {
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-3);
	padding: var(--mz-space-6) var(--mz-space-5);
	background: var(--mz-white);
	border: 2px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	box-shadow: 0 6px 18px rgba(18, 41, 75, 0.06);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.mz-cmp-hub__item:hover,
.mz-cmp-hub__item:focus-visible {
	border-color: var(--mz-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(11, 110, 117, 0.16);
}

.mz-cmp-hub__title {
	font-size: var(--mz-text-xl);
	font-weight: 800;
	line-height: 1.2;
	color: var(--mz-navy);
}

.mz-cmp-hub__text {
	flex: 1;
	font-size: var(--mz-text-base);
	line-height: 1.5;
	color: var(--mz-ink-soft);
}

/* L'appel à l'action est un vrai bouton, pas un petit lien. */
.mz-cmp-hub__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mz-space-2);
	margin-top: var(--mz-space-2);
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--mz-teal);
	font-size: var(--mz-text-base);
	font-weight: 700;
	color: var(--mz-white);
}

.mz-cmp-hub__item:hover .mz-cmp-hub__cta { background: var(--mz-teal-hover); }

/* Entête compact des pages de catégorie */
.mz-hero--compact .mz-hero__title { font-size: clamp(1.9rem, 4vw, 2.6rem); }

.mz-hero__eyebrow--link {
	text-decoration: none;
	color: var(--mz-teal);
}

.mz-hero__eyebrow--link:hover { text-decoration: underline; }

.mz-hero__meta {
	margin: var(--mz-space-3) 0 0;
	max-width: 62ch;
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

/* Corps de page */
.mz-cmp-lead {
	margin: 0 0 var(--mz-space-5);
	max-width: 68ch;
	font-size: var(--mz-text-lg);
	line-height: 1.55;
	color: var(--mz-ink);
}

/* Sous le titre de la page : la même phrase, en plus petit, centrée. */
.mz-hero .mz-cmp-lead {
	margin: var(--mz-space-3) auto 0;
	max-width: 60ch;
	font-size: var(--mz-text-base);
	color: var(--mz-ink-soft);
}

.mz-cmp-h2 {
	margin: var(--mz-space-7) 0 var(--mz-space-4);
	font-size: var(--mz-text-xl);
	color: var(--mz-navy);
}

.mz-cmp-h3 {
	margin: var(--mz-space-5) 0 var(--mz-space-3);
	font-size: var(--mz-text-base);
	color: var(--mz-teal);
}

.mz-cmp-note {
	margin: 0 0 var(--mz-space-4);
	padding: var(--mz-space-4) var(--mz-space-5);
	background: var(--mz-wash);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	color: var(--mz-ink-soft);
}

.mz-cmp-note b { color: var(--mz-navy); }

.mz-cmp-list {
	margin: 0 0 var(--mz-space-4);
	padding-left: 1.125rem;
}

.mz-cmp-list li {
	margin-bottom: var(--mz-space-2);
	line-height: 1.55;
}

/* Le podium : une carte pleine largeur par offre.
   En haut, le rang, le nom et le chiffre qui classe. En dessous, les faits
   en tuiles (étiquette au-dessus, valeur en dessous) : une valeur longue
   passe à la ligne DANS sa tuile, elle ne peut plus sortir de la carte. */
.mz-cmp-podium {
	display: flex;
	flex-direction: column;
	gap: var(--mz-space-4);
	margin: 0 0 var(--mz-space-5);
}

.mz-cmp-card {
	padding: var(--mz-space-5);
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	box-shadow: var(--mz-shadow-card);
}

.mz-cmp-card--1 {
	border-color: var(--mz-teal);
	box-shadow: 0 0 0 1px var(--mz-teal), var(--mz-shadow-card);
}

.mz-cmp-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mz-space-3) var(--mz-space-4);
}

.mz-cmp-card__rank {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--mz-wash);
	color: var(--mz-teal);
	font-size: var(--mz-text-base);
	font-weight: 800;
}

.mz-cmp-card--1 .mz-cmp-card__rank {
	background: var(--mz-teal);
	color: var(--mz-white);
}

.mz-cmp-card__rank sup { font-size: .6em; margin-left: 1px; }

.mz-cmp-card__id {
	flex: 1 1 12rem;
	min-width: 0;
}

.mz-cmp-card__name {
	margin: 0;
	font-size: var(--mz-text-lg);
	line-height: 1.2;
	color: var(--mz-navy);
}

.mz-cmp-card__product {
	margin: 2px 0 0;
	font-size: var(--mz-text-sm);
	line-height: 1.35;
	color: var(--mz-ink-soft);
}

.mz-cmp-card__figure {
	flex: 0 0 auto;
	margin: 0;
	text-align: right;
	font-size: var(--mz-text-2xl);
	font-weight: 800;
	line-height: 1.1;
	color: var(--mz-navy);
}

.mz-cmp-card__figure small {
	display: block;
	margin-top: var(--mz-space-1);
	font-size: var(--mz-text-xs);
	font-weight: 500;
	color: var(--mz-ink-soft);
}

@media (max-width: 559px) {
	.mz-cmp-card__figure { flex-basis: 100%; text-align: left; }
}

.mz-cmp-card__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: var(--mz-space-3);
	margin: var(--mz-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.mz-cmp-card__facts li {
	min-width: 0;
	padding: var(--mz-space-3);
	background: var(--mz-wash);
	border-radius: var(--mz-radius);
}

.mz-cmp-card__facts span {
	display: block;
	margin-bottom: 2px;
	font-size: var(--mz-text-xs);
	color: var(--mz-ink-soft);
}

.mz-cmp-card__facts b {
	display: block;
	font-size: var(--mz-text-sm);
	line-height: 1.35;
	overflow-wrap: anywhere;
	color: var(--mz-navy);
}

.mz-cmp-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mz-space-2) var(--mz-space-5);
	margin-top: var(--mz-space-4);
}

.mz-cmp-card__more { flex: 0 1 auto; }
.mz-cmp-card__more[open] { flex: 1 1 100%; }

/* L'engagement d'indépendance : l'argument central de l'onglet, jamais en
   petits caractères gris. */
.mz-indep {
	margin: 0 0 var(--mz-space-6);
	padding: var(--mz-space-5);
	background: var(--mz-teal-wash);
	border: 1px solid var(--mz-teal);
	border-radius: var(--mz-radius-lg);
}

.mz-indep__title {
	display: flex;
	align-items: center;
	gap: var(--mz-space-3);
	margin: 0 0 var(--mz-space-3);
	font-size: var(--mz-text-lg);
	font-weight: 800;
	color: var(--mz-navy);
}

.mz-indep__mark {
	flex: 0 0 auto;
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: var(--mz-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.mz-indep__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mz-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mz-text-sm);
	line-height: 1.5;
	color: var(--mz-ink);
}

@media (min-width: 760px) {
	.mz-indep__list { grid-template-columns: repeat(3, 1fr); gap: var(--mz-space-5); }
}

.mz-indep__list strong {
	display: block;
	color: var(--mz-navy);
}

.mz-indep__date {
	margin: var(--mz-space-3) 0 0;
	font-size: var(--mz-text-xs);
	color: var(--mz-ink-soft);
}

.mz-indep--compact {
	display: inline-flex;
	align-items: center;
	gap: var(--mz-space-3);
	margin: var(--mz-space-4) auto 0;
	padding: var(--mz-space-2) var(--mz-space-4);
	border-radius: 999px;
	font-size: var(--mz-text-sm);
	line-height: 1.4;
	text-align: left;
	color: var(--mz-ink);
}

.mz-indep--compact strong { color: var(--mz-navy); }
.mz-indep--compact .mz-indep__mark { width: 1.3rem; height: 1.3rem; }

/* Encadré « Avant le 31 décembre » (mitzpahor_rappel_31_decembre), du
   1er octobre au 31 décembre. Texte blanc sur bleu nuit (14.5:1) ; la
   pastille du compte à rebours est en encre sur turquoise (6.9:1). */
.mz-rappel {
	margin: 0 0 var(--mz-space-6);
	padding: var(--mz-space-5);
	background: var(--mz-navy);
	border-radius: var(--mz-radius-lg);
	color: var(--mz-white);
}

.mz-rappel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mz-space-3);
	margin: 0 0 var(--mz-space-3);
}

.mz-rappel__title {
	margin: 0;
	font-size: var(--mz-text-lg);
	font-weight: 800;
	line-height: 1.3;
	color: var(--mz-white);
}

.mz-rappel__count {
	flex: 0 0 auto;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--mz-turquoise);
	font-size: var(--mz-text-sm);
	font-weight: 700;
	color: var(--mz-ink);
	white-space: nowrap;
}

.mz-rappel__text {
	margin: 0;
	font-size: var(--mz-text-sm);
	line-height: 1.55;
	color: var(--mz-white);
}

.mz-rappel__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mz-space-2);
	margin: var(--mz-space-3) 0 0;
	font-size: var(--mz-text-xs);
	color: rgba(255, 255, 255, 0.85);
}

.mz-rappel a {
	color: var(--mz-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mz-rappel a:hover,
.mz-rappel a:focus-visible { text-decoration-thickness: 2px; }

/* Bouton Précédent des pages du comparatif */
.mz-back {
	display: inline-flex;
	align-items: center;
	gap: var(--mz-space-2);
	margin: 0 0 var(--mz-space-4);
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--mz-rule);
	border-radius: 999px;
	background: var(--mz-white);
	font-size: var(--mz-text-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--mz-navy);
}

.mz-back::before {
	content: "\2190";
	color: var(--mz-teal);
}

.mz-back:hover,
.mz-back:focus-visible { border-color: var(--mz-teal); }

/* En haut à gauche, et il suit le défilement : la barre est collante sous
   l'en-tête du site et n'a pas de hauteur, elle ne décale donc rien.
   --mz-header-h est mesurée par ui.js ; 80px si le script ne tourne pas. */
.mz-backbar {
	position: sticky;
	top: calc(var(--mz-header-h, 80px) + var(--mz-space-3));
	z-index: 50;
	height: 0;
	padding-left: var(--mz-space-4);
}

.mz-backbar .mz-back {
	margin: var(--mz-space-3) 0 0;
	box-shadow: var(--mz-shadow-card);
}

/* Hors carte, la liste de faits sur deux colonnes */
.mz-cmp-facts {
	margin: 0 0 var(--mz-space-3);
	padding: 0;
	list-style: none;
	font-size: var(--mz-text-sm);
}

.mz-cmp-facts li {
	display: flex;
	justify-content: space-between;
	gap: var(--mz-space-3);
	padding: var(--mz-space-2) 0;
	border-top: 1px solid var(--mz-rule);
	color: var(--mz-ink-soft);
}

.mz-cmp-facts li:first-child { border-top: 0; }

.mz-cmp-facts b {
	text-align: right;
	color: var(--mz-navy);
}

.mz-cmp-facts--wide { max-width: 64ch; }

.mz-cmp-list--tight { margin: var(--mz-space-2) 0 0; }
.mz-cmp-note p { margin: 0; }
.mz-cmp-note p + ul { margin-top: var(--mz-space-2); }

/* Le cadre légal réduit à un paragraphe */
p.mz-cmp-legal {
	margin: var(--mz-space-6) 0 0;
	padding: var(--mz-space-4) var(--mz-space-5);
}

.mz-cmp-src {
	font-size: var(--mz-text-xs);
	color: var(--mz-teal);
}

/* Les étapes numérotées (page assurance séparée) */
.mz-cmp-steps {
	margin: 0 0 var(--mz-space-5);
	padding: 0;
	list-style: none;
	counter-reset: etape;
}

.mz-cmp-steps > li {
	position: relative;
	margin: 0 0 var(--mz-space-4);
	padding: var(--mz-space-5) var(--mz-space-5) var(--mz-space-5) calc(var(--mz-space-5) + 3.2rem);
	background: var(--mz-white);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius-lg);
	counter-increment: etape;
}

.mz-cmp-steps > li::before {
	content: counter(etape);
	position: absolute;
	left: var(--mz-space-5);
	top: var(--mz-space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: var(--mz-teal);
	color: var(--mz-white);
	font-weight: 800;
}

.mz-cmp-steps__title {
	margin: 0 0 var(--mz-space-2);
	font-size: var(--mz-text-lg);
	color: var(--mz-navy);
}

.mz-cmp-steps p { margin: 0 0 var(--mz-space-3); }
.mz-cmp-steps .mz-cmp-list { margin-bottom: 0; }
.mz-cmp-steps a { color: var(--mz-teal); font-weight: 600; }

@media (max-width: 559px) {
	.mz-cmp-steps > li { padding-left: var(--mz-space-5); padding-top: calc(var(--mz-space-5) + 3rem); }
}

/* L'avertissement : ce qu'il faut savoir avant de choisir */
.mz-cmp-warn {
	margin: 0 0 var(--mz-space-5);
	padding: var(--mz-space-4) var(--mz-space-5);
	background: var(--mz-turq-wash);
	border-left: 4px solid var(--mz-turquoise);
	border-radius: 0 var(--mz-radius) var(--mz-radius) 0;
	line-height: 1.6;
	color: var(--mz-ink);
}

.mz-cmp-warn p { margin: 0 0 var(--mz-space-2); }
.mz-cmp-warn p:last-child { margin-bottom: 0; }
.mz-cmp-warn b { color: var(--mz-navy); }

/* Les questions à poser : la question en gros, le pourquoi derrière un clic */
.mz-cmp-questions {
	margin: 0 0 var(--mz-space-5);
	padding-left: 1.5rem;
}

.mz-cmp-questions li {
	margin-bottom: var(--mz-space-4);
	padding-left: var(--mz-space-2);
}

.mz-cmp-questions li::marker {
	font-weight: 700;
	color: var(--mz-teal);
}

.mz-cmp-q {
	margin: 0 0 var(--mz-space-2);
	font-size: var(--mz-text-base);
	font-weight: 600;
	line-height: 1.45;
	color: var(--mz-navy);
}

/* Les replis : natifs, sans JS */
.mz-cmp-details {
	margin: 0 0 var(--mz-space-3);
	border: 1px solid var(--mz-rule);
	border-radius: var(--mz-radius);
	background: var(--mz-white);
}

.mz-cmp-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mz-space-4);
	padding: var(--mz-space-4) var(--mz-space-5);
	font-weight: 600;
	color: var(--mz-navy);
	cursor: pointer;
	list-style: none;
	border-radius: var(--mz-radius);
	transition: background-color .15s ease;
}

.mz-cmp-details > summary::-webkit-details-marker { display: none; }

.mz-cmp-details > summary:hover,
.mz-cmp-details > summary:focus-visible { background: var(--mz-wash); }

.mz-cmp-details__title small {
	display: block;
	margin-top: 2px;
	font-size: var(--mz-text-sm);
	font-weight: 400;
	color: var(--mz-ink-soft);
}

/* Le chevron, à droite : il dit qu'on peut dérouler, et se retourne une fois ouvert. */
.mz-cmp-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin: -4px 4px 0 0;
	border-right: 2px solid var(--mz-teal);
	border-bottom: 2px solid var(--mz-teal);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.mz-cmp-details[open] > summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Le premier repli après un classement prend ses distances. */
.mz-cmp-podium + .mz-cmp-details,
.mz-cmp-note + .mz-cmp-details,
.mz-cmp-warn + .mz-cmp-details { margin-top: var(--mz-space-5); }

/* Les questions à poser : le repli à ne pas manquer. Un bandeau plein et
   foncé, le seul de la page, pour ne pas le confondre avec les encadrés
   d'explication, qui sont clairs. */
.mz-cmp-details--key {
	border: 2px solid var(--mz-navy);
	background: var(--mz-white);
	overflow: hidden;
}

.mz-cmp-details--key > summary {
	padding-block: var(--mz-space-5);
	border-radius: 0;
	background: var(--mz-navy);
	font-size: var(--mz-text-xl);
	line-height: 1.25;
	color: var(--mz-white);
}

.mz-cmp-details--key > summary:hover,
.mz-cmp-details--key > summary:focus-visible { background: var(--mz-teal); }

.mz-cmp-details--key > summary::after {
	width: 12px;
	height: 12px;
	border-color: var(--mz-white);
}

.mz-cmp-details--key .mz-cmp-details__title small { color: rgba(255, 255, 255, 0.82); }

.mz-cmp-details__tag {
	display: table;
	margin-bottom: var(--mz-space-2);
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--mz-turquoise);
	font-size: var(--mz-text-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mz-navy);
}

.mz-cmp-details--key > .mz-cmp-details__body {
	padding-top: var(--mz-space-4);
	color: var(--mz-ink);
}

.mz-cmp-details__body {
	padding: 0 var(--mz-space-5) var(--mz-space-4);
	font-size: var(--mz-text-sm);
	line-height: 1.6;
	color: var(--mz-ink-soft);
}

.mz-cmp-details__body p:last-child { margin-bottom: 0; }

.mz-cmp-why {
	border: 0;
	background: transparent;
	margin: 0;
}

.mz-cmp-why summary {
	padding: 0;
	font-size: var(--mz-text-sm);
	font-weight: 500;
	color: var(--mz-teal);
}

.mz-cmp-why p {
	margin: var(--mz-space-2) 0 0;
	font-size: var(--mz-text-sm);
	line-height: 1.55;
	color: var(--mz-ink-soft);
}

/* Le tableau complet : il tient dans la page, sans défilement horizontal.
   Largeurs fixes par colonne, texte qui passe à la ligne. Sous 760px,
   chaque ligne devient une fiche, l'intitulé de colonne devant la valeur. */
.mz-cmp-details:has(.mz-cmp-table) .mz-cmp-details__body { padding: 0; }

.mz-cmp-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--mz-text-xs);
	line-height: 1.5;
}

.mz-cmp-table th {
	padding: var(--mz-space-3);
	background: var(--mz-navy);
	color: var(--mz-white);
	text-align: left;
	font-weight: 600;
	vertical-align: bottom;
}

.mz-cmp-table td {
	padding: var(--mz-space-3);
	border-top: 1px solid var(--mz-rule);
	vertical-align: top;
	overflow-wrap: anywhere;
}

.mz-cmp-table tbody tr:nth-child(even) td { background: var(--mz-wash); }

.mz-cmp-table th:first-child,
.mz-cmp-table__name { width: 17%; }

.mz-cmp-table__name b { display: block; color: var(--mz-navy); }

.mz-cmp-table__note {
	width: 4.5rem;
	text-align: center;
}

.mz-cmp-table td.mz-cmp-table__note b {
	font-size: var(--mz-text-base);
	color: var(--mz-navy);
}

.mz-cmp-table small { color: var(--mz-ink-soft); }

/* Titres : la performance prend la place, coût et part d'actions restent étroits */
.mz-cmp-table--titres th:nth-child(2) { width: 16%; }
.mz-cmp-table--titres th:nth-child(3) { width: 14%; }
.mz-cmp-table--titres td:nth-child(4) b { color: var(--mz-navy); }

/* Comptes : la colonne d'explication prend la place, le taux reste étroit */
.mz-cmp-table--compte th:nth-child(2) { width: 15%; }
.mz-cmp-table--compte th:nth-child(3) { width: 38%; }
.mz-cmp-table--compte td:nth-child(2) b { font-size: var(--mz-text-sm); color: var(--mz-navy); }

@media (max-width: 759px) {
	.mz-cmp-table,
	.mz-cmp-table tbody,
	.mz-cmp-table tr,
	.mz-cmp-table td { display: block; width: auto; }

	.mz-cmp-table thead { display: none; }

	.mz-cmp-table tr {
		padding: var(--mz-space-3) var(--mz-space-4);
		border-top: 1px solid var(--mz-rule);
	}

	.mz-cmp-table tbody tr:nth-child(even) { background: var(--mz-wash); }
	.mz-cmp-table tbody tr:nth-child(even) td { background: transparent; }

	.mz-cmp-table td {
		padding: 3px 0;
		border: 0;
		text-align: left;
	}

	.mz-cmp-table td[data-label]::before {
		content: attr(data-label) " : ";
		font-weight: 600;
		color: var(--mz-navy);
	}

	.mz-cmp-table__name { width: auto; font-size: var(--mz-text-sm); }
	.mz-cmp-table__name b { display: inline; }
}

.mz-cmp-tag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--mz-wash);
	color: var(--mz-ink-soft);
	font-size: var(--mz-text-xs);
	font-weight: 600;
}

/* Le cadre juridique, lisible, jamais en petits caractères */
.mz-cmp-legal {
	margin: var(--mz-space-7) 0 0;
	padding: var(--mz-space-5);
	background: var(--mz-wash);
	border-radius: var(--mz-radius);
	font-size: var(--mz-text-sm);
	line-height: 1.7;
	color: var(--mz-ink-soft);
}

.mz-cmp-legal strong { color: var(--mz-navy); }
.mz-cmp-legal p:last-child { margin-bottom: 0; }

/* Vers les autres catégories */
.mz-cmp-others {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mz-space-3);
	margin: var(--mz-space-6) 0 0;
}

.mz-cmp-others__label {
	font-size: var(--mz-text-sm);
	color: var(--mz-ink-soft);
}

.mz-btn--small { padding: 8px 14px; font-size: var(--mz-text-sm); }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.mz-row:hover,
	.mz-row:focus-within,
	.mz-row:hover .mz-row__arrow,
	.mz-btn--primary:hover { transform: none; }
}

/* Un seul cadre de tarif (site anglais sans formule annuelle) */
.mz-plans--single { grid-template-columns: minmax(0, 420px); justify-content: center; }

/* Illustrations des rubriques (28/10/2026) : le dessin remplit toute la tuile. */
.mz-row__icon--illus,
.mz-row--featured .mz-row__icon--illus {
	background: none;
	overflow: hidden;
}
.mz-row__icon--illus .mz-illus {
	display: block;
	width: 100%;
	height: 100%;
}