/* ==========================================================================
   Media Factory — skin "trust santé" (cartes comparatif, tableau, badges)
   Chargé via mu-plugin media-factory-render.php
   ========================================================================== */

:root {
	--mf-accent: #18B7A0;       /* teal santé */
	--mf-accent-dark: #0F8A78;
	--mf-ink: #0F2B5B;
	--mf-muted: #6b7c7a;
	--mf-line: #e6e9ef;
	--mf-bg-soft: #F5F7FA;
	--mf-gold: #e0a325;
	--mf-green: #2e9c5a;
	--mf-red: #c2543d;
}
.mf-comparatif {
	font-size: 1rem;
	color: var(--mf-ink);
	margin: 2rem 0;
}

/* --- Disclosure ---------------------------------------------------------- */
.mf-disclosure {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	background: var(--mf-bg-soft);
	border: 1px solid var(--mf-line);
	border-left: 4px solid var(--mf-accent);
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: 1.5rem 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--mf-muted);
}
.mf-disclosure p { margin: 0; }
.mf-disclosure-ico {
	flex: 0 0 22px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--mf-accent);
	color: #fff;
	font-style: italic;
	font-weight: 700;
	font-family: Georgia, serif;
	display: grid; place-items: center;
	font-size: .875rem;
}

/* --- Tableau récap ------------------------------------------------------- */
.mf-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.mf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	border: 1px solid var(--mf-line);
	border-radius: 10px;
	overflow: hidden;
}
.mf-table th {
	background: var(--mf-accent);
	color: #fff;
	text-align: left;
	padding: .7rem .9rem;
	font-weight: 600;
}
.mf-table td { padding: .7rem .9rem; border-top: 1px solid var(--mf-line); vertical-align: middle; }
.mf-table tbody tr:nth-child(even) { background: var(--mf-bg-soft); }
.mf-td-rank { font-weight: 800; color: var(--mf-accent-dark); width: 2.2rem; text-align: center; }
.mf-td-name strong { display: block; }
.mf-td-sub { display: block; font-size: .875rem; color: var(--mf-muted); }
.mf-td-note { font-weight: 700; white-space: nowrap; }
.mf-td-note span { font-weight: 400; color: var(--mf-muted); font-size: .8em; }
.mf-td-prix { white-space: nowrap; }

/* --- Cartes produit ------------------------------------------------------ */
.mf-card {
	border: 1px solid var(--mf-line);
	border-radius: 14px;
	background: #fff;
	margin: 1.25rem 0;
	box-shadow: 0 2px 10px rgba(28,43,42,.04);
	overflow: hidden;
}
.mf-card.mf-rank-1 { border-color: var(--mf-accent); box-shadow: 0 4px 20px rgba(31,157,143,.12); }

.mf-card-head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem 1.1rem;
	background: var(--mf-bg-soft);
	border-bottom: 1px solid var(--mf-line);
}
.mf-rank { font-weight: 800; color: var(--mf-accent-dark); font-size: 1rem; }
.mf-badge {
	font-size: .75rem;
	font-weight: 700;
	padding: .22rem .7rem;
	border-radius: 999px;
	background: var(--mf-accent);
	color: #fff;
	letter-spacing: .2px;
}
.mf-badge-notre-choix { background: var(--mf-accent); }
.mf-badge-qualite-prix { background: var(--mf-green); }
.mf-badge-premium { background: #2b3a55; }
.mf-badge-budget { background: var(--mf-gold); color: #3a2a06; }
.mf-badge-naturel { background: #5a8f3c; }

.mf-card-body { display: flex; gap: 1.2rem; padding: 1.1rem; }
.mf-media { flex: 0 0 132px; }
.mf-thumb-img, .mf-media img { width: 132px; height: 132px; object-fit: cover; border-radius: 10px; }
.mf-main { flex: 1 1 auto; min-width: 0; }

.mf-card-titre { margin: 0 0 .1rem; font-size: 1.125rem; line-height: 1.25; }
.mf-marque { margin: 0 0 .5rem; color: var(--mf-muted); font-size: .875rem; text-transform: uppercase; letter-spacing: .4px; }

.mf-note-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mf-note { display: inline-flex; align-items: baseline; background: var(--mf-accent); color: #fff; padding: .25rem .6rem; border-radius: 8px; }
.mf-note-val { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.mf-note-max { font-size: .875rem; opacity: .85; margin-left: 1px; }
.mf-prix { font-weight: 700; }
.mf-prix small { font-weight: 400; color: var(--mf-muted); }

.mf-verdict { margin: .4rem 0 .8rem; line-height: 1.55; }

/* Critères notés */
.mf-criteres { list-style: none; margin: .5rem 0 .9rem; padding: 0; display: grid; gap: .4rem; }
.mf-criteres li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: .6rem; font-size: .875rem; }
.mf-crit-label { color: var(--mf-ink); }
.mf-bar { background: var(--mf-line); border-radius: 999px; height: 8px; overflow: hidden; }
.mf-bar-fill { display: block; height: 100%; background: var(--mf-accent); border-radius: 999px; }
.mf-crit-score { font-weight: 700; color: var(--mf-accent-dark); font-variant-numeric: tabular-nums; }

/* Pros / cons */
.mf-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .6rem 0 1rem; }
.mf-pros, .mf-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .875rem; }
.mf-pros li, .mf-cons li { padding-left: 1.5rem; position: relative; line-height: 1.4; }
.mf-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--mf-green); font-weight: 800; }
.mf-cons li::before { content: "✕"; position: absolute; left: 0; color: var(--mf-red); font-weight: 800; }

/* CTA */
.mf-cta {
	display: inline-block;
	background: var(--mf-accent);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	padding: .7rem 1.4rem;
	border-radius: 10px;
	transition: background .15s ease;
}
.mf-cta:hover { background: var(--mf-accent-dark); }
.mf-cta-mini { padding: .4rem .8rem; font-size: .875rem; border-radius: 8px; }

/* --- Encadré auteur ------------------------------------------------------ */
.mf-auteur {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--mf-bg-soft, #F5F7FA);
	border: 1px solid #e6e9ef;
	border-radius: 14px;
	padding: 1.1rem 1.2rem;
	margin: 2rem 0;
}
.mf-auteur-avatar { border-radius: 50%; }
.mf-auteur-nom { margin: 0 0 .3rem; font-weight: 800; font-size: 1rem; }
.mf-auteur-role { font-weight: 600; color: #18B7A0; font-size: .875rem; }
.mf-auteur-bio { margin: 0 0 .4rem; font-size: .875rem; line-height: 1.5; color: #44514f; }
.mf-auteur-maj { margin: 0; font-size: .875rem; color: #6b7c7a; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 600px) {
	.mf-card-body { flex-direction: column; }
	.mf-media { flex-basis: auto; }
	.mf-thumb-img, .mf-media img { width: 100%; height: 180px; }
	.mf-proscons { grid-template-columns: 1fr; }
	.mf-criteres li { grid-template-columns: minmax(80px, 38%) 1fr auto; }
}

/* --- Grille équipe (page Notre équipe) ----------------------------------- */
.mf-equipe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.2rem;
	margin: 1.5rem 0;
}
.mf-equipe-card {
	border: 1px solid #e6e9ef;
	border-radius: 14px;
	background: #fff;
	padding: 1.3rem 1.1rem;
	text-align: center;
}
.mf-equipe-media { margin-bottom: .7rem; }
.mf-equipe-media .mf-auteur-avatar { border-radius: 50%; }
.mf-equipe-role { margin: .15rem 0 .6rem; color: #18B7A0; font-weight: 600; font-size: .875rem; }
.mf-equipe-card .mf-auteur-nom { margin: 0; font-size: 1.125rem; font-weight: 800; }
.mf-equipe-card .mf-auteur-bio { font-size: .875rem; line-height: 1.5; color: #44514f; margin: 0; }

/* --- Footer légal -------------------------------------------------------- */
.mf-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .55rem; margin-bottom: .5rem; font-size: .875rem; }
.mf-footer-legal a { color: inherit; text-decoration: none; opacity: .85; }
.mf-footer-legal a:hover { opacity: 1; text-decoration: underline; }
.mf-footer-legal .mf-sep { opacity: .4; }
.mf-footer-credit { margin: 0; font-size: .78rem; opacity: .68; line-height: 1.5; }

/* --- Header / branding (lockup logo + titre) ----------------------------- */
.site-header { border-bottom: 1px solid #e6e9ef; }
.site-header .site-branding-container { display: flex; align-items: center; gap: .65rem; }
.site-logo img { max-height: 46px; width: auto; height: auto; }
.main-title { font-weight: 800; letter-spacing: -.3px; }
.main-title a, .main-title a:hover { color: #0F8A78; }
.site-description { color: #6b7c7a; }

/* Accents GeneratePress -> teal (cohérence avec le moteur comparatif) */
.entry-content a { color: #0F8A78; }
.wp-block-button__link, button.button, .button { background-color: #18B7A0; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a { color: #18B7A0; }

/* --- Homepage : hero + derniers comparatifs + confiance ------------------ */
.mf-hero { text-align: center; padding: 2.6rem 1.2rem 2.2rem; background: linear-gradient(160deg, #F5F7FA, #e7f1ef); border-radius: 18px; margin: 1.5rem 0 2rem; }
.mf-hero h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 .6rem; color: #15413b; }
.mf-hero p { max-width: 620px; margin: 0 auto 1.2rem; color: #3f524f; font-size: 1rem; }

.mf-derniers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; margin: 1.2rem 0 2rem; }
.mf-post-card { border: 1px solid #e6e9ef; border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.mf-post-thumb { display: block; aspect-ratio: 16 / 9; background: #eef3f2; }
.mf-post-thumb .mf-post-img { width: 100%; height: 100%; object-fit: cover; }
.mf-post-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #d7e7e4, #eef3f2); }
.mf-post-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.mf-post-title { font-size: 1.125rem; line-height: 1.25; margin: 0; }
.mf-post-title a { color: #15413b; text-decoration: none; }
.mf-post-title a:hover { color: #18B7A0; }
.mf-post-meta { margin: 0; font-size: .875rem; color: #6b7c7a; }
.mf-post-excerpt { margin: .1rem 0 .3rem; font-size: .875rem; line-height: 1.5; color: #44514f; }
.mf-post-link { margin-top: auto; font-weight: 700; color: #0F8A78; text-decoration: none; font-size: .875rem; }

.mf-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.8rem; }
.mf-cats a { background: #fff; border: 1px solid var(--mf-line); color: #0F8A78; font-weight: 600; font-size: .875rem; padding: .4rem .95rem; border-radius: 999px; text-decoration: none; }
.mf-cats a:hover { background: var(--mf-accent); color: #fff; border-color: var(--mf-accent); }

.mf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; padding: 1.1rem 1.2rem; background: #F5F7FA; border-radius: 14px; margin: 1rem 0 2rem; }
.mf-trust a { color: #0F8A78; font-weight: 600; text-decoration: none; }
.mf-trust a:hover { text-decoration: underline; }

@media (max-width: 600px) { .mf-hero h1 { font-size: 1.75rem; } }

/* Masquer le titre "Accueil" sur la page d'accueil (le hero porte le H1) */
body.home .entry-header { display: none; }

/* --- Composants éditoriaux (articles) ------------------------------------ */
.mf-cta-wrap { margin: 1.2rem 0; }

.mf-avis { border: 1px solid var(--mf-line); border-left: 4px solid var(--mf-accent); background: var(--mf-bg-soft); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 1.6rem 0; }
.mf-avis-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.mf-avis-titre { font-weight: 800; font-size: 1.125rem; color: var(--mf-ink); }
.mf-avis-note { margin-left: auto; background: var(--mf-accent); color: #fff; font-weight: 800; padding: .2rem .65rem; border-radius: 8px; font-size: 1rem; white-space: nowrap; }
.mf-avis-body > :last-child { margin-bottom: 0; }

.mf-proscons-box { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.4rem 0; }
.mf-pc-titre { font-weight: 700; margin: 0 0 .45rem; }
.mf-pc-pour { color: var(--mf-green); }
.mf-pc-contre { color: var(--mf-red); }

/* Tableau "en bref" (table native Gutenberg) */
.entry-content .wp-block-table table { border-collapse: collapse; width: 100%; border-radius: 10px; overflow: hidden; }
.entry-content .wp-block-table th { background: var(--mf-accent); color: #fff; }
.entry-content .wp-block-table th, .entry-content .wp-block-table td { border: 1px solid var(--mf-line); padding: .6rem .85rem; text-align: left; }
.entry-content .wp-block-table tr:nth-child(even) td { background: var(--mf-bg-soft); }

@media (max-width: 600px) { .mf-proscons-box { grid-template-columns: 1fr; } }

/* ========================================================================
   DIRECTION C — Magazine affirmé (Newsreader + header sombre + coral)
   ======================================================================== */

/* Typographie globale : Inter (corps) + Newsreader (titres) */
body, button, input, select, textarea,
.entry-content, .mf-post-meta, .mf-auteur-bio {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .main-title, .site-title,
.mf-hero h1, .mf-card-titre, .mf-post-title, .ct,
.mf-avis-titre, .mf-comparatif-titre, .mf-auteur-nom {
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important;
	font-weight: 600;
	letter-spacing: -.01em;
}
body { color: #0F2B5B; }

/* Confort de lecture (article) */
.entry-content { font-size: 1rem; line-height: 1.78; }
.entry-content > p { margin: 0 0 1.25rem; }
.single .entry-title, .page .entry-title { font-size: 2.25rem; line-height: 1.08; }
.entry-content h2 { font-size: 1.75rem; line-height: 1.2; margin: 2.4rem 0 .9rem; }
.entry-content h3 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; }

/* Header sombre */
.site-header, .main-navigation, .main-navigation .inside-navigation {
	background-color: #0F2B5B !important;
}
.site-header { border-bottom: 3px solid var(--mf-accent); }
.site-header .main-title a, .site-header .site-title a,
.site-header .main-title, .site-header .site-title { color: #ffffff !important; }
.site-description { color: #9fb0aa !important; }
.main-navigation .main-nav ul li a { color: #e7ece9 !important; font-weight: 500; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a { color: #ffffff !important; }
.main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--mf-accent); }

/* Hero homepage : gros titre serif, fond clair */
.mf-hero { background: #FBFAF7 !important; border: 0.5px solid var(--mf-line); border-radius: 18px; padding: 3rem 1.6rem 2.6rem; }
.mf-hero h1 { font-size: 2.25rem; line-height: 1.06; color: #0F2B5B; margin-bottom: .7rem; }
.mf-hero p { font-size: 1.125rem; color: #4a544f; }

/* Labels catégorie coral (signature magazine) */
.mf-post-cat, .mf-cats a {
	display: inline-block; font-family: 'Inter', sans-serif !important;
	font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: #0F8A78; background: #E1F5EE; padding: .26rem .62rem; border-radius: 5px;
	text-decoration: none; border: 0; width: auto;
}
.mf-post-cat { margin-bottom: .2rem; }
.mf-cats a:hover { background: #0F8A78; color: #fff; }

/* Cartes article : titre serif présent */
.mf-post-title { font-size: 1.25rem; line-height: 1.18; }
.mf-post-title a { color: #0F2B5B; }
.mf-post-card { border-radius: 12px; }

@media (max-width: 600px) {
	.mf-hero h1 { font-size: 1.75rem; }
	.single .entry-title, .page .entry-title { font-size: 1.75rem; }
}

/* ========================================================================
   Composants inspirés des réfs (Healthline/Broadwhey/Darwin) — lots 1/2/3
   ======================================================================== */

/* CTA coral = action (le teal reste la couleur de marque) */
.mf-cta { background: #18B7A0 !important; }
.mf-cta:hover { background: #0F8A78 !important; }

/* Top bar de confiance */
.mf-topbar { background: var(--mf-accent); color: #fff; font-size: .875rem; }
.mf-topbar-inner { max-width: 1100px; margin: 0 auto; padding: .42rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mf-topbar-trust { display: inline-flex; align-items: center; gap: .4rem; }
.mf-topbar-link { color: #fff !important; text-decoration: underline; font-weight: 600; white-space: nowrap; }

/* Encadré "L'essentiel" */
.mf-essentiel { background: #F5F7FA; border: 0.5px solid #e6e9ef; border-radius: 14px; padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.mf-essentiel-titre { font-family: 'Newsreader', serif !important; font-weight: 600; font-size: 1.25rem; margin: 0 0 .6rem; color: #0F2B5B; }
.mf-essentiel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mf-essentiel li { position: relative; padding-left: 1.4rem; line-height: 1.55; }
.mf-essentiel li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #18B7A0; }

/* Byline (haut d'article) */
.mf-byline { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; padding-bottom: 1.1rem; border-bottom: 0.5px solid var(--mf-line); }
.mf-byline .avatar { border-radius: 50%; }
.mf-by-line1 { font-size: 1rem; }
.mf-by-name { font-weight: 700; color: #0F2B5B; }
.mf-by-role { color: #7c857f; margin-left: .35rem; }
.mf-by-line2 { font-size: .875rem; color: #7c857f; margin-top: 1px; }

/* Sommaire "Sur cette page" */
.mf-toc { background: var(--mf-bg-soft); border: 0.5px solid var(--mf-line); border-radius: 12px; padding: .55rem .95rem; margin: 0 0 1.4rem; }
.mf-toc-title { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #7c857f; }
.mf-toc-title::-webkit-details-marker { display: none; }
.mf-toc-title::after { content: "+"; font-size: 1.05rem; line-height: 1; color: #0F8A78; }
.mf-toc[open] .mf-toc-title::after { content: "\2212"; }
.mf-toc[open] .mf-toc-title { margin-bottom: .6rem; }
.mf-toc ul { margin: 0; padding: 0 0 0 1rem; }
.mf-toc li { margin: .22rem 0; }
.mf-toc a { color: #0F8A78; text-decoration: none; }
.mf-toc a:hover { text-decoration: underline; }

/* Sidebar : Notre recommandation */
.mf-reco { background: #fff; border: 1px solid var(--mf-accent); border-radius: 14px; padding: 1.1rem 1.2rem; margin: 0 0 1.5rem; }
.mf-reco-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0F8A78; margin: 0 0 .5rem; }
.mf-reco-img { text-align: center; margin-bottom: .6rem; }
.mf-reco-img img { max-width: 100%; height: auto; border-radius: 8px; max-height: 170px; }
.mf-reco-titre { font-family: 'Newsreader', serif !important; font-weight: 600; font-size: 1.125rem; margin: 0 0 .3rem; }
.mf-reco-note { display: inline-block; background: var(--mf-accent); color: #fff; font-weight: 700; font-size: .875rem; padding: .12rem .55rem; border-radius: 6px; margin: 0 0 .5rem; }
.mf-reco-txt { font-size: .875rem; color: #44514f; line-height: 1.5; margin: 0 0 .8rem; }
.mf-reco .mf-cta { display: block; text-align: center; }

/* Sidebar : À lire aussi */
.mf-aside-related { background: var(--mf-bg-soft); border-radius: 14px; padding: 1.1rem 1.2rem; }
.mf-aside-title { font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #7c857f; margin: 0 0 .6rem; }
.mf-aside-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mf-aside-related a { color: #0F2B5B; text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1.3; display: block; }
.mf-aside-related a:hover { color: var(--mf-accent); }

/* Score + barres de critères (anneau + barres animées) */
.mf-score { border: 0.5px solid var(--mf-line); border-radius: 14px; padding: 1.3rem 1.5rem; margin: 1.6rem 0; background: #fff; }
.mf-score-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.mf-score-head { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex-shrink: 0; }
.mf-score-ring { position: relative; width: 96px; height: 96px; }
.mf-score-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.mf-ring-bg { fill: none; stroke: var(--mf-line); stroke-width: 8; }
.mf-ring-fg { fill: none; stroke: var(--mf-accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--o); animation: mfRing 1.1s ease-out; }
.mf-score-ringnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--mf-ink); }
.mf-score-ringnum small { font-size: .7rem; font-weight: 500; color: var(--mf-muted); margin-left: 1px; }
.mf-score-kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: #7c857f; text-align: center; }
.mf-score-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; flex: 1; min-width: 240px; }
.mf-score-rows li { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; align-items: center; gap: .7rem; font-size: .875rem; }
.mf-score-lab { color: var(--mf-ink); }
.mf-score-num { font-weight: 700; color: var(--mf-accent-dark); font-variant-numeric: tabular-nums; }
.mf-bar-fill { transform-origin: left; animation: mfGrow .9s ease-out; }
.mf-bar-fill.is-hi { background: var(--mf-accent); }
.mf-bar-fill.is-mid { background: var(--mf-gold); }
.mf-bar-fill.is-lo { background: var(--mf-red); }
@keyframes mfRing { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--o); } }
@keyframes mfGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mf-ring-fg, .mf-bar-fill { animation: none; } }

/* Fiche d'identité (specs à icônes) */
.mf-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin: 1.6rem 0; }
.mf-spec { background: #fff; border: 0.5px solid var(--mf-line); border-radius: 14px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.mf-spec-ico { color: var(--mf-accent); width: 22px; height: 22px; margin-bottom: .25rem; }
.mf-spec-ico svg { width: 22px; height: 22px; }
.mf-spec-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--mf-ink); line-height: 1.15; }
.mf-spec-lab { font-size: .8rem; color: var(--mf-muted); }

/* Jauge pédagogique */
.mf-jauge { margin: 1.8rem 0; }
.mf-jauge-titre { font-weight: 700; color: var(--mf-ink); font-size: .95rem; margin: 0 0 1.6rem; }
.mf-jauge-track { position: relative; display: flex; height: 12px; border-radius: 999px; margin: 2.4rem .5rem 0; }
.mf-jauge-seg { height: 100%; flex: 1; }
.mf-jauge-seg.s1 { background: #9FE1CB; border-radius: 999px 0 0 999px; }
.mf-jauge-seg.s2 { background: #FAC775; }
.mf-jauge-seg.s3 { background: #F09595; border-radius: 0 999px 999px 0; }
.mf-jauge-marker { position: absolute; bottom: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.mf-jauge-mlab { font-weight: 700; font-size: .8rem; color: var(--mf-ink); white-space: nowrap; margin-bottom: 3px; }
.mf-jauge-tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--mf-ink); margin-bottom: 2px; }
.mf-jauge-ref { position: absolute; top: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.mf-jauge-reftick { width: 2px; height: 9px; background: var(--mf-muted); border-radius: 2px; }
.mf-jauge-reflab { font-size: .72rem; color: var(--mf-muted); white-space: nowrap; margin-top: 2px; }
.mf-jauge-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--mf-muted); margin-top: 2.4rem; }

/* Pour qui / pas pour qui */
.mf-pourqui { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: 1.6rem 0; }
.mf-pq-col { border-radius: 14px; padding: 1rem 1.2rem; }
.mf-pq-yes { background: #E1F5EE; }
.mf-pq-no { background: var(--mf-bg-soft); }
.mf-pq-titre { display: flex; align-items: center; gap: .4rem; font-weight: 700; margin: 0 0 .55rem; font-size: .95rem; }
.mf-pq-titre svg { width: 18px; height: 18px; flex-shrink: 0; }
.mf-pq-yes .mf-pq-titre { color: var(--mf-accent-dark); }
.mf-pq-no .mf-pq-titre { color: var(--mf-muted); }
.mf-pq-col ul { margin: 0; padding-left: 1.15rem; font-size: .9rem; line-height: 1.65; }
.mf-pq-yes ul { color: #0b5a49; }
.mf-pq-no ul { color: #5c6b68; }

/* Echelle multi-marques (desktop = jauge SVG ; mobile = liste classee) */
.mf-echelle { margin: 1.8rem 0; }
.mf-ech-titre { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--mf-ink); font-size: 1.15rem; margin: 0 0 1rem; }
.mf-ech-desktop { border: 0.5px solid var(--mf-line); border-radius: 14px; padding: .6rem 1rem; background: #fff; }
.mf-ech-svg { width: 100%; height: auto; display: block; }
.mf-ech-mobile { display: none; }
.mf-ech-badge { display: inline-block; background: var(--mf-accent); color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.mf-ech-svg a { cursor: pointer; }
.mf-ech-svg a text { transition: fill .12s; }
.mf-ech-svg a:hover text { fill: #0b6d5e; }
.mf-ech-li-link { display: block; text-decoration: none; color: inherit; }
@media (max-width: 720px) {
	.mf-ech-desktop { display: none; }
	.mf-ech-mobile { display: block; list-style: none; margin: 0; padding: 0; }
	.mf-ech-mobile li { padding: .6rem 0; border-bottom: 1px solid var(--mf-line); }
	.mf-ech-mobile li:last-child { border-bottom: none; }
	.mf-ech-li-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
	.mf-ech-li-head b { font-size: .98rem; color: var(--mf-ink); font-weight: 700; }
	.mf-ech-li-head small { font-size: .8rem; color: var(--mf-muted); }
	.mf-ech-li-bar { display: block; height: 9px; background: var(--mf-bg-soft); border-radius: 999px; overflow: hidden; }
	.mf-ech-li-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #a9ddd2, #18B7A0); border-radius: 999px; }
	.mf-ech-mobile li.is-win { background: #E1F5EE; border-radius: 12px; padding: .75rem; border-bottom: none; margin: .2rem 0; }
	.mf-ech-mobile li.is-win .mf-ech-li-head b { color: var(--mf-accent-dark); font-family: 'Montserrat', sans-serif; font-weight: 800; }
	.mf-ech-mobile li.is-win .mf-ech-li-bar > span { background: var(--mf-accent); }
}

/* Catégories en icônes (home) */
.mf-clusters { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin: 0 0 2.2rem; }
.mf-cluster { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: #0F2B5B; }
.mf-cluster-ico { width: 66px; height: 66px; border-radius: 50%; background: var(--mf-bg-soft); border: 1px solid var(--mf-line); display: grid; place-items: center; color: var(--mf-accent); transition: background .15s, color .15s, border-color .15s; }
.mf-cluster-ico svg { width: 30px; height: 30px; }
.mf-cluster:hover .mf-cluster-ico { background: var(--mf-accent); color: #fff; border-color: var(--mf-accent); }
.mf-cluster-lab { font-weight: 600; font-size: .875rem; text-align: center; line-height: 1.2; }

@media (max-width: 600px) {
	.mf-topbar-inner { font-size: .75rem; }
	.mf-score-rows li { grid-template-columns: minmax(90px, 42%) 1fr auto; }
}

/* Disclosure discret (1 ligne, conforme mais léger) */
.mf-disclosure-mini { font-size: .875rem; color: #8a9491; line-height: 1.5; margin: 0 0 1.4rem; }
.mf-disclosure-mini strong { color: #5f6b67; font-weight: 600; }
.mf-disclosure-mini a { color: #0F8A78; }

/* Bannière "Notre n°1" — carte produit claire (Option A, validée 2026-06-15) */
.mf-gagnant { display: flex; align-items: center; gap: 1.1rem; background: #fff; color: var(--mf-ink); border: 1px solid var(--mf-line); border-left: 4px solid var(--mf-accent); border-radius: 14px; box-shadow: 0 6px 20px rgba(20,32,29,.06); padding: 1rem 1.2rem; margin: 0 0 1.6rem; }
.mf-gagnant-media { flex: 0 0 96px; }
.mf-gagnant-media img { width: 96px; height: auto; max-height: 120px; object-fit: contain; display: block; }
.mf-gagnant-info { flex: 1 1 auto; min-width: 0; }
.mf-gagnant-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.mf-gagnant-kicker { background: #18B7A0; color: #fff; font-weight: 800; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 6px; line-height: 1; }
.mf-gagnant-note { display: inline-flex; align-items: baseline; background: var(--mf-accent); color: #fff; font-weight: 800; padding: .2rem .55rem; border-radius: 8px; font-size: 1rem; line-height: 1; }
.mf-gagnant-titre { display: block; font-family: 'Newsreader', serif !important; font-weight: 600; font-size: 1.25rem; line-height: 1.1; color: var(--mf-ink); margin-bottom: .45rem; }
.mf-gagnant-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.mf-gagnant-points li { position: relative; padding-left: 1.3rem; font-size: .875rem; color: #3f524f; line-height: 1.45; }
.mf-gagnant-points li::before { content: "✓"; position: absolute; left: 0; color: var(--mf-accent); font-weight: 800; }
.mf-gagnant-txt { display: block; color: var(--mf-muted); font-size: .875rem; line-height: 1.45; }
.mf-gagnant-cta { flex: 0 0 auto; white-space: nowrap; padding: .8rem 1.5rem; font-size: 1rem; }
@media (max-width: 600px) {
	.mf-gagnant { flex-direction: column; align-items: stretch; }
	.mf-gagnant-media { align-self: flex-start; }
	.mf-gagnant-cta { width: 100%; text-align: center; }
}

/* Note interne (placeholder à remplacer) */
.mf-note-edit { font-size: .875rem; color: #9a7b52; background: #fdf6ec; border: 1px dashed #e6cfa8; border-radius: 8px; padding: .6rem .85rem; }

/* Carte produit (image + marque + note + 2 liens) */
.mf-produit { display: flex; gap: 1.3rem; background: #fff; border: 1px solid var(--mf-line); border-radius: 14px; padding: 1.2rem 1.3rem; margin: 1.3rem 0; }
.mf-produit-top { border-color: var(--mf-accent); box-shadow: 0 4px 18px rgba(31,157,143,.10); }
.mf-produit-media { flex: 0 0 150px; position: relative; }
.mf-produit-media img { width: 150px; height: 150px; object-fit: contain; }
.mf-produit-noimg { display: block; width: 150px; height: 150px; border-radius: 10px; background: linear-gradient(135deg, #d7e7e4, #eef3f2); }
.mf-produit-rang { position: absolute; top: -8px; left: -8px; background: var(--mf-accent-dark); color: #fff; font-weight: 800; font-size: .875rem; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.mf-produit-main { flex: 1 1 auto; min-width: 0; }
.mf-produit-titre { font-family: 'Newsreader', serif !important; font-size: 1.25rem; line-height: 1.18; margin: .3rem 0 .45rem; }
.mf-produit-meta { display: flex; align-items: center; gap: .9rem; margin-bottom: .55rem; flex-wrap: wrap; }
.mf-produit-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1rem; }
.mf-produit-avis { color: #0F8A78; font-weight: 700; text-decoration: none; }
.mf-produit-avis:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.mf-produit { flex-direction: column; }
	.mf-produit-media, .mf-produit-media img, .mf-produit-noimg { flex-basis: auto; width: 100%; height: 200px; }
}

/* Contenu plus large sur desktop (header + contenu) */
.grid-container { max-width: 1340px !important; }

/* Hero d'article plafonné -> le CTA "Notre n°1" remonte au-dessus du pli */
.featured-image.page-header-image-single img { max-height: 340px; width: 100%; object-fit: cover; }
/* Mobile : image à la une à ras du bloc (pas de liseré blanc autour) = même largeur visuelle que le texte (rompr 16/07) */
@media (max-width: 768px) { .inside-article > .featured-image.page-header-image-single { margin-left: -4px !important; margin-right: -4px !important; } }

/* Hero "cover magazine" (advertorials / dossiers) */
.mf-cover-post .entry-header, .mf-cover-post .featured-image { display: none; }
.mf-cover { position: relative; min-height: 420px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; margin: 0 0 1.6rem; }
.mf-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,11,.88) 0%, rgba(8,12,11,.35) 45%, rgba(8,12,11,.08) 100%); }
.mf-cover-inner { position: relative; z-index: 1; padding: 1.9rem; }
.mf-cover-kicker { display: inline-block; background: #18B7A0; color: #fff; font-weight: 800; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .78rem; border-radius: 5px; margin-bottom: .75rem; }
.mf-cover-title { font-family: 'Newsreader', serif !important; color: #fff !important; font-size: 2.25rem; line-height: 1.06; margin: 0; font-weight: 600; max-width: 20ch; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
@media (max-width: 600px) { .mf-cover { min-height: 320px; } .mf-cover-title { font-size: 1.75rem; } }

/* ========================================================================
   FAQ en accordéons (schema FAQPage) — <details>/<summary>, sans JS
   ======================================================================== */
.mf-faq { margin: 1.6rem 0; display: grid; gap: .7rem; }
.mf-faq-item { background: #fff; border: 1px solid var(--mf-line); border-radius: 12px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.mf-faq-item[open] { border-color: var(--mf-accent); box-shadow: 0 4px 16px rgba(31,157,143,.08); }
.mf-faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font-family: 'Newsreader', serif !important; font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--mf-ink); }
.mf-faq-q::-webkit-details-marker { display: none; }
.mf-faq-q::after { content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--mf-bg-soft); color: var(--mf-accent-dark); font-size: 1.25rem; font-weight: 700; display: grid; place-items: center; transition: background .15s ease, color .15s ease; }
.mf-faq-item[open] .mf-faq-q::after { content: "\2212"; background: var(--mf-accent); color: #fff; }
.mf-faq-q:hover { color: var(--mf-accent-dark); }
.mf-faq-a { padding: 0 1.2rem 1.1rem; line-height: 1.7; color: #3f524f; }
.mf-faq-a > :first-child { margin-top: 0; }
.mf-faq-a > :last-child { margin-bottom: 0; }
.mf-faq-a a { color: #0F8A78; }
.mf-faq-item[open] .mf-faq-a { animation: mf-faq-in .18s ease; }
@keyframes mf-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ========================================================================
   Barre de thèmes sous le header (structure menu façon Cannabiste, sans marketplace)
   ======================================================================== */
.mf-catbar { background: #F5F7FA; border-bottom: 1px solid #e6e9ef; }
.mf-catbar-inner { max-width: 1340px; margin: 0 auto; padding: .5rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.7rem; }
.mf-catbar-link { display: inline-flex; align-items: center; gap: .5rem; color: #0F2B5B; font-weight: 600; font-size: .875rem; text-decoration: none; padding: .4rem 0; }
.mf-catbar-ico { display: grid; place-items: center; color: var(--mf-accent); }
.mf-catbar-ico svg { width: 18px; height: 18px; }
.mf-catbar-link:hover, .mf-catbar-link:hover .mf-catbar-ico { color: #0F8A78; }
@media (max-width: 700px) {
	.mf-catbar-inner { flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; -webkit-overflow-scrolling: touch; }
	.mf-catbar-link { white-space: nowrap; }
}

/* ========================================================================
   DESIGN SYSTEM v2 — réf absolue (listicle Wake) recolorée Direction C
   Titres sans-serif bold (Montserrat) + pills hard-shadow + cartes bordées.
   Validé rompr 2026-06-16. Accent = teal + coral. cf design-reference.md / ADR-012.
   ======================================================================== */

/* 1) Typo : titres en sans-serif bold (Montserrat) au lieu du serif Newsreader */
h1, h2, h3, h4, h5, h6,
.entry-title, .main-title, .site-title, .mf-hero h1,
.mf-card-titre, .mf-post-title, .mf-avis-titre, .mf-comparatif-titre, .mf-auteur-nom,
.mf-essentiel-titre, .mf-reco-titre, .mf-gagnant-titre, .mf-produit-titre, .mf-cover-title,
.mf-faq-q {
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -.015em;
}
.single .entry-title, .page .entry-title { line-height: 1.05; }
.entry-content h2 { font-weight: 800 !important; }
.entry-content h3 { font-weight: 700 !important; }

/* 2) Surlignage de titre (.mf-hl) + kicker de section (.mf-kicker) */
.mf-hl { background: #FFE3A6; padding: 0 .14em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mf-kicker { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #a08a7d; margin: 0 0 .45rem; }

/* 3) Boutons = pills à ombre portée nette (hard shadow), avec feedback au clic */
.mf-cta {
	border-radius: 999px !important;
	border: 2px solid #0F2B5B;
	box-shadow: 4px 4px 0 #0F2B5B;
	transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.mf-cta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0F2B5B; }
.mf-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0F2B5B; }
.mf-cta-mini { box-shadow: 3px 3px 0 #0F2B5B; }

/* 4) Cartes = bordure encre + hard shadow + coins arrondis */
.mf-card, .mf-produit, .mf-essentiel, .mf-score, .mf-faq-item {
	border: 1.5px solid #0F2B5B !important;
	border-radius: 16px !important;
	box-shadow: 5px 5px 0 #0F2B5B;
}
.mf-avis { border: 1.5px solid #0F2B5B !important; border-left: 1.5px solid #0F2B5B !important; border-radius: 16px !important; box-shadow: 5px 5px 0 #0F2B5B; }
.mf-essentiel { background: #F5F7FA !important; }

/* 5) FAQ : toggle + / × façon réf (cercle clair -> cercle encre à l'ouverture) */
.mf-faq-q::after { content: "+"; background: #F1EFE8 !important; color: #0F2B5B !important; width: 27px; height: 27px; font-size: 1.125rem; }
.mf-faq-item[open] .mf-faq-q::after { content: "\00d7"; background: #0F2B5B !important; color: #fff !important; }
.mf-faq-item[open] { box-shadow: 5px 5px 0 #0F2B5B; }

/* 6) Bloc "Notre n°1" = reco premium (carte crème bordée), version média sans prix */
.mf-gagnant {
	background: #F5F7FA !important;
	border: 1.5px solid #0F2B5B !important;
	border-radius: 20px !important;
	box-shadow: 6px 6px 0 #0F2B5B;
	padding: 1.3rem 1.4rem;
}
.mf-gagnant-kicker { border: 2px solid #0F2B5B; border-radius: 999px; }
.mf-gagnant-media img { border: 1.5px solid #0F2B5B; border-radius: 12px; background: #fff; }
.mf-gagnant-titre { font-size: 1.75rem; }

/* 7) On garde la sidebar / méta légères (pas de hard shadow partout = évite la surcharge) */
.mf-byline, .mf-toc, .mf-aside-related { box-shadow: none; }
.mf-reco { border: 1.5px solid #0F2B5B; border-radius: 16px; box-shadow: 4px 4px 0 #0F2B5B; }

/* ========================================================================
   HEADER — proposition B (clair magazine, accent coral). Validé rompr 2026-06-16.
   Menu par type de page ; la barre de thèmes (.mf-catbar) reste en 2e niveau.
   ======================================================================== */
.site-header, .main-navigation, .main-navigation .inside-navigation { background-color: #ffffff !important; }
.site-header { border-bottom: 2px solid #0F2B5B !important; }
.site-header .main-title a, .site-header .site-title a, .site-header .main-title, .site-header .site-title { color: #0F2B5B !important; }
.site-description { color: #6b7c7a !important; }
.menu-toggle, .menu-toggle:hover { color: #0F2B5B !important; }
.main-navigation .main-nav ul li a { color: #0F2B5B !important; font-family: 'Montserrat', sans-serif; font-weight: 700; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a { color: #18B7A0 !important; }
.main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -3px 0 #18B7A0; }

/* Déroulants (sous-menus) = carte bordée + hard shadow (DA v2) */
.main-navigation .main-nav ul ul {
	background: #ffffff;
	border: 1.5px solid #0F2B5B;
	box-shadow: 5px 5px 0 #0F2B5B;
	border-radius: 12px;
	padding: 6px;
}
.main-navigation .main-nav ul ul li a { color: #0F2B5B !important; font-weight: 600; border-radius: 8px; }
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.current-menu-item > a { background: #F5F7FA; color: #0F2B5B !important; box-shadow: none; }

/* Section "Notre équipe de rédaction" (home) + cartes équipe alignées DA v2 */
.mf-equipe-card { border: 1.5px solid #0F2B5B !important; border-radius: 16px; box-shadow: 5px 5px 0 #0F2B5B; }
.mf-equipe-more { text-align: center; margin: 1.5rem 0 .5rem; }
.mf-illus-avatar { background: transparent; }

/* ========================================================================
   MOBILE-FIRST — optimisations < 768px (≈ 80-90% du trafic). Voir ADR-014.
   ======================================================================== */
@media (max-width: 768px) {
	/* Ombres portées réduites (plus légères sur petit écran) */
	.mf-card, .mf-produit, .mf-essentiel, .mf-score, .mf-faq-item, .mf-avis,
	.mf-gagnant, .mf-reco, .mf-equipe-card { box-shadow: 3px 3px 0 #0F2B5B; }
	/* Titres calibrés mobile (punchy sans déborder) */
	.single .entry-title, .page .entry-title { font-size: 1.75rem; line-height: 1.12; }
	.entry-content h2 { font-size: 1.25rem; }
	.entry-content h3 { font-size: 1.125rem; }
	.mf-hero h1 { font-size: 1.75rem; }
	.mf-gagnant-titre { font-size: 1.25rem; }
	/* Tap targets confortables */
	.mf-cta { padding: .92rem 1.4rem; }
	/* Tableaux : scroll horizontal propre (pas de débordement de page) */
	.entry-content .wp-block-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* Barre de thèmes : scrollable, scrollbar masquée */
	.mf-catbar-inner { scrollbar-width: none; }
	.mf-catbar-inner::-webkit-scrollbar { display: none; }
	/* Sous-menus header : pleine largeur dans le burger (pas de carte flottante) */
	.main-navigation .main-nav ul ul { box-shadow: none; border-radius: 0; border-width: 0 0 1px 0; }
	/* Contenu : marges latérales confortables */
	.grid-container { padding-left: 16px; padding-right: 16px; }
}

/* ===== Mobile : header (burger aligné) + déroulants à plat + cover ===== */
@media (max-width: 768px) {
	/* Logo + burger sur une seule ligne, alignés verticalement */
	.inside-header { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px; }
	/* Menu ouvert : passe en pleine largeur sous le logo (overlay), items alignés à gauche */
	#site-navigation { flex-basis: 100%; }
	.main-navigation.toggled .main-nav ul { text-align: left; }
	.site-branding-container { display: flex; align-items: center; flex: 1 1 auto; margin: 0; }
	.site-logo img { max-height: 40px; }
	.mobile-menu-control-wrapper { flex: 0 0 auto !important; margin: 0 !important; width: auto !important; }
	/* Burger : pas de fond gris, couleur encre */
	.mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:focus,
	.main-navigation .menu-toggle { background: transparent !important; color: #0F2B5B !important; padding: 6px 4px !important; }
	/* Menu ouvert : sous-menus à plat (pas de carte flottante), items en retrait */
	.main-navigation .main-nav ul ul { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
	.main-navigation .main-nav ul ul li a { padding-left: 30px !important; }
	#site-navigation .main-nav > ul > li { border-bottom: 1px solid #eef0ef; }
	/* Cover hero : marges latérales garanties (jamais bord à bord) */
	.mf-cover { margin-left: 0 !important; margin-right: 0 !important; border-radius: 14px; min-height: 300px; }
}

/* ========================================================================
   CHARTE v3 — Santé Que Choisir "média d'enquête conso" (validée 2026-06-16)
   Bleu marine #0F2B5B + turquoise #18B7A0 + jaune #FFC93C, Montserrat. Premium épuré.
   ======================================================================== */

/* Logo image (lockup fourni) ; le nom est dans le logo -> on masque le titre texte */
.site-logo img, .custom-logo, .header-image { max-height: 52px; width: auto; height: auto; }
.main-title { display: none !important; }

/* Texte courant gris ardoise ; titres en marine */
body, .entry-content { color: #2b3340; }
h1, h2, h3, h4, h5, h6, .entry-title, .mf-hero h1, .mf-card-titre, .mf-post-title,
.mf-produit-titre, .mf-gagnant-titre, .mf-essentiel-titre, .mf-reco-titre, .mf-avis-titre,
.mf-faq-q, .mf-comparatif-titre, .mf-auteur-nom { color: #0F2B5B !important; }
.mf-hero h1 { text-transform: uppercase; letter-spacing: -.01em; }

/* Cartes : épurées (bordure fine, plus de hard shadow) */
.mf-card, .mf-produit, .mf-essentiel, .mf-score, .mf-faq-item, .mf-avis, .mf-equipe-card,
.main-navigation .main-nav ul ul {
	box-shadow: none !important;
	border: 1px solid #e6e9ef !important;
	border-radius: 14px !important;
}
.mf-faq-item[open] { border-color: #18B7A0 !important; box-shadow: none !important; }
.mf-essentiel { background: #F5F7FA !important; }
.mf-gagnant, .mf-reco { border: 1px solid #e6e9ef !important; box-shadow: 0 8px 24px rgba(15,43,91,.08) !important; border-radius: 16px !important; }
.mf-gagnant { background: #F5F7FA !important; }

/* Boutons : pill turquoise plein, net (Montserrat) */
.mf-cta { background: #18B7A0 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 8px !important; font-family: 'Montserrat', sans-serif; font-weight: 800; }
.mf-cta:hover { background: #0F8A78 !important; transform: none !important; box-shadow: none !important; }
.mf-cta:active { transform: none !important; box-shadow: none !important; }

/* Tampon "Notre n°1" = jaune enquête ; toggle FAQ ouvert turquoise */
.mf-gagnant-kicker { background: #FFC93C !important; color: #0F2B5B !important; border: 0 !important; }
.mf-faq-item[open] .mf-faq-q::after { background: #18B7A0 !important; color: #fff !important; }

/* Catbar gris clair (topbar reste turquoise) */
.mf-catbar { background: #F5F7FA; border-bottom: 1px solid #e6e9ef; }

/* Hero : tampon "enquête" + bandeau de chiffres (Montserrat Black) */
.mf-hero-stamp { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; background: #FFC93C; color: #0F2B5B; padding: 5px 12px; border-radius: 4px; transform: rotate(-3deg); margin-bottom: 1rem; }
.mf-stats { display: flex; justify-content: space-around; gap: 1rem; flex-wrap: wrap; background: #0F2B5B; border-radius: 14px; padding: 1.1rem 1.2rem; margin: 0 0 2rem; text-align: center; }
.mf-stats b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.75rem; line-height: 1; color: #FFC93C; }
.mf-stats > div:nth-child(2) b { color: #18B7A0; }
.mf-stats > div:nth-child(3) b { color: #fff; }
.mf-stats span { font-size: .875rem; color: #c7d0e0; }

/* ===== Menu mobile — Option 2 : overlay accordéon plein écran (validé rompr 2026-06-16) ===== */
@media (max-width: 768px) {
	#site-navigation.toggled { background: #fff; min-height: calc(100vh - 56px); }
	.main-navigation.toggled .main-nav > ul { padding-bottom: 24px; }
	.main-navigation .main-nav ul li { border-bottom: 1px solid #eef1f5; }
	.main-navigation .main-nav ul li a {
		font-family: 'Montserrat', sans-serif !important; font-weight: 800; font-size: 1.125rem;
		color: #0F2B5B !important; padding: 16px 18px;
	}
	.main-navigation .main-nav ul ul { background: transparent !important; }
	.main-navigation .main-nav ul ul li a { font-family: 'Inter', sans-serif !important; font-weight: 600; font-size: .875rem; color: #0F2B5B !important; padding: 12px 18px 12px 30px; }
	/* Toggle accordéon en rond (chevron GP) */
	.main-navigation .menu-item-has-children .dropdown-menu-toggle {
		background: transparent !important; border-radius: 0; width: auto; height: auto;
		display: inline-flex; align-items: center; justify-content: center; padding: 0;
		margin-right: 14px; color: #0F2B5B;
	}
	.main-navigation .menu-item-has-children.sfHover > a .dropdown-menu-toggle { background: transparent !important; color: #18B7A0; }
}

/* ===== Comparatif : tableau "en bref" + bande réassurance (CRO) ===== */
.mf-reassure { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin: 1.1rem 0 1.6rem; padding: 0; font-size: .875rem; color: #4B5563; font-family: 'Inter', sans-serif; }
.mf-reassure span { display: inline-flex; align-items: center; gap: .35rem; }
.mf-reassure span::before { content: "✓"; color: #18B7A0; font-weight: 800; }

.mf-bref-wrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.mf-bref { width: 100%; border-collapse: collapse; font-size: .875rem; font-family: 'Inter', sans-serif; border: 1px solid #e6e9ef; border-radius: 12px; overflow: hidden; }
.mf-bref th { background: #0F2B5B; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; padding: .7rem .8rem; text-align: left; white-space: nowrap; }
.mf-bref td { padding: .7rem .8rem; border-top: 1px solid #e6e9ef; vertical-align: middle; }
.mf-bref-rang { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #eef1f6; color: #0F2B5B; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: .72rem; margin-right: .45rem; vertical-align: middle; }
.mf-bref-marque { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #0F2B5B; white-space: nowrap; }
.mf-bref-note { font-family: 'Montserrat', sans-serif; font-weight: 900; color: #18B7A0; white-space: nowrap; }
.mf-bref-note small { color: #9aa3b2; font-weight: 700; font-size: .68em; }
.mf-bref-badge { background: #FFC93C; color: #0F2B5B; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .75rem; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }
.mf-bref-plus { color: #4B5563; }
.mf-bref-win td { background: #E1F5EE; box-shadow: inset 3px 0 0 #18B7A0; }
.mf-bref-win .mf-bref-rang { background: #18B7A0; color: #fff; }
@media (max-width: 600px) {
	.mf-bref { min-width: 660px; }
	.mf-bref-plus { min-width: 170px; }
}

/* ===== Sticky CTA mobile (barre fixe bas) ===== */
.mf-sticky { display: none; }
@media (max-width: 768px) {
	.mf-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-top: 1px solid #e6e9ef; box-shadow: 0 -4px 18px rgba(15,43,91,.12); padding: 9px 14px; }
	.mf-sticky-txt { font-size: .875rem; color: #4B5563; line-height: 1.25; }
	.mf-sticky-txt strong { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #0F2B5B; }
	.mf-sticky-cta { flex: 0 0 auto; background: #18B7A0; color: #fff !important; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .875rem; text-decoration: none; padding: 11px 16px; border-radius: 8px; white-space: nowrap; }
	.single .site-footer, .single .footer-widgets { padding-bottom: 70px; }
}

/* ===== Comparatif = page de conversion (pas de titre thème / image / byline / sidebar) ===== */
.mf-clp .entry-header, .mf-clp .featured-image, .mf-clp .page-header-image-single, .mf-clp .entry-meta { display: none !important; }
.mf-clp-hero { text-align: center; padding: 1.2rem 0 1.6rem; }
.mf-clp-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #18B7A0; margin-bottom: .7rem; }
.mf-clp-title { font-family: 'Montserrat', sans-serif !important; font-weight: 900; font-size: 2.25rem; line-height: 1.06; color: #0F2B5B !important; margin: 0 0 .7rem; }
.mf-clp-sub { font-size: 1.125rem; color: #4B5563; max-width: 640px; margin: 0 auto 1.3rem; line-height: 1.5; }
.mf-clp-cta { font-size: 1rem; padding: 1rem 2rem; }
.mf-clp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.3rem; margin: 1.3rem 0 0; font-size: .875rem; color: #4B5563; }
.mf-clp-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.mf-clp-trust span::before { content: "✓"; color: #18B7A0; font-weight: 800; }
@media (max-width: 600px) { .mf-clp-sub { font-size: 1rem; } }

/* ===== Polish mobile (retours rompr 2026-06-16) ===== */
@media (max-width: 768px) {
	/* Burger : plus grand et centré verticalement avec le logo */
	.inside-header { align-items: center !important; }
	.mobile-menu-control-wrapper { align-self: center; display: flex; align-items: center; }
	.menu-toggle { font-size: 26px !important; line-height: 1 !important; padding: 6px !important; }
	.menu-toggle .gp-icon svg, .menu-toggle svg { width: 28px !important; height: 28px !important; }
	/* Topbar sur une seule ligne */
	.mf-topbar-inner { font-size: .75rem; padding-top: 5px; padding-bottom: 5px; gap: .6rem; }
	.mf-topbar-trust { white-space: nowrap; }
	/* Sticky CTA : label puis titre produit sur sa propre ligne (pas de coupure au milieu) */
	.mf-sticky-txt { display: flex; flex-direction: column; line-height: 1.2; gap: 1px; min-width: 0; flex: 1 1 auto; }
	.mf-sticky-lab { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .78rem; color: #9aa3b2; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Titre du sticky sur UNE seule ligne en mobile (rompr 16/07) : nowrap + ellipsis de sécurité */
	.mf-sticky-txt strong { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
	/* Comparatif : hero collé en haut (le padding réel de la carte est géré plus bas dans le bloc .mf-clp) */
	.mf-clp-hero { padding-top: 0; padding-bottom: 1rem; }
}

/* ===== Mobile : moins d'imbrication de blocs, contenu qui respire (largeur utile) ===== */
@media (max-width: 768px) {
	.grid-container { padding-left: 12px !important; padding-right: 12px !important; }
	.separate-containers .inside-article { padding: 16px 4px !important; }
	.mf-hero { padding: 1.4rem .6rem !important; border: 0 !important; margin: 0 0 1.3rem !important; }
}

/* ===== Pages classement (mf-clp) = landing épurée TRAFIC FROID : barre de thèmes masquée, header compact "ads" (logo réduit centré, AUCUN menu ni sur desktop ni sur mobile) ===== */
.mf-clp .mf-catbar { display: none !important; }
/* Topbar simplifiée sur trafic froid : on garde le signal de confiance (centré), on retire le lien « Notre méthode » (point de sortie) — moins de bruit sur une page de conversion */
.mf-clp .mf-topbar-inner { justify-content: center !important; }
.mf-clp .mf-topbar-link { display: none !important; }
.mf-clp .site-header { border-bottom: 1px solid #e6e9ef; }
/* Header resserré (le grand blanc venait du padding vertical du header GP ~40px) + logo réduit */
.mf-clp .inside-header { padding-top: 14px !important; padding-bottom: 14px !important; }
.mf-clp .site-logo img, .mf-clp .custom-logo, .mf-clp .header-image { max-height: 40px !important; }
/* Desktop : header épuré (logo centré, menu principal masqué) ; le hamburger GP est déjà masqué hors mobile */
@media (min-width: 769px) {
	.mf-clp #site-navigation { display: none !important; }
	.mf-clp .inside-header { justify-content: center !important; }
	.mf-clp .site-branding-container { margin: 0 auto !important; }
	/* Desktop : réduire le grand blanc header → titre (retour rompr). Petite bande grise 10px gardée pour la cohérence "cartes sur fond gris". */
	.mf-clp .site-content { padding-top: 0 !important; }
	.mf-clp .site-main { margin-top: 10px !important; }
	.mf-clp .inside-article { padding-top: 14px !important; }
	.mf-clp .mf-clp-hero { padding-top: .2rem; }
}
/* Mobile : header "ads" épuré pour le TRAFIC FROID — PAS de menu du tout (menu principal ET hamburger masqués), logo réduit et centré, bruit minimal = moins de sorties sur une page de conversion (rompr 2026-07-15). La nav reste accessible dans le footer. */
@media (max-width: 768px) {
	.mf-clp .inside-header { padding: 10px 20px !important; justify-content: center !important; }
	/* le conteneur logo a flex-grow:1 (pleine largeur) → centrer le logo dedans ; le titre texte vide (.site-branding) est masqué pour ne pas absorber l'espace via ses marges auto et pousser le logo à gauche */
	.mf-clp .site-branding-container { margin: 0 auto !important; justify-content: center !important; }
	.mf-clp .site-branding-container .site-branding { display: none !important; }
	.mf-clp .site-branding-container .site-logo { margin: 0 !important; }
	.mf-clp .site-logo img, .mf-clp .custom-logo, .mf-clp .header-image { max-height: 32px !important; }
	/* On masque TOUTE la navigation du header : menu principal + bouton hamburger (GP rend les deux avec .main-navigation ; ici on veut vraiment les deux masqués, à l'inverse des pages normales) */
	.mf-clp #site-navigation,
	.mf-clp #mobile-menu-control-wrapper,
	.mf-clp .mobile-menu-control-wrapper,
	.mf-clp .menu-toggle { display: none !important; }
	.mf-clp .site-content, .mf-clp #content, .mf-clp .site-main { margin-top: 0 !important; padding-top: 0 !important; }
	/* Espace header → titre (résout le conflit .separate-containers .inside-article = 16px + neutralise le margin-top GP de .entry-content) */
	.mf-clp .inside-article { padding-top: 14px !important; }
	.mf-clp .entry-content { margin-top: 0 !important; }
	.mf-clp .mf-clp-hero { margin-top: 0 !important; padding-top: 0 !important; }
}

/* ===== Landing-outil (quiz/test) : pas de carte blanche GP autour de l'outil =====
   L'outil (.mf-quiz) est en pleine largeur (full-bleed) et apporte son propre
   conteneur. La carte blanche GP .inside-article (fond + bordure + coins arrondis)
   dépassait alors en retrait derrière le test → liseré blanc désaligné. On la
   neutralise sur ces pages ; le padding est conservé pour le bloc SEO sous l'outil.
   rompr 2026-07-10. */
.mf-landing-pure .inside-article {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Footer : navigation du site (sections + thèmes) reportée ici */
.mf-footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem 2.5rem; justify-content: center; max-width: 1000px; margin: 0 auto 1.5rem; text-align: left; }
.mf-footer-col { min-width: 150px; }
.mf-footer-col h4 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #18B7A0; margin: 0 0 .6rem; }
.mf-footer-col a { display: block; color: inherit; text-decoration: none; font-size: .875rem; margin: .32rem 0; opacity: .85; }
.mf-footer-col a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 600px) { .mf-footer-nav { gap: 1.2rem 2rem; } .mf-footer-col { min-width: 42%; } }

/* ===== Composants CRO comparatif (refonte 2026-06-17) ===== */
.mf-alerte { background: #FFF8E6; border: 1px solid #FFE3A3; border-left: 4px solid #FFC93C; border-radius: 10px; padding: 1rem 1.2rem; margin: 1.6rem 0; }
.mf-alerte-titre { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #0F2B5B; margin: 0 0 .4rem; font-size: 1rem; }
.mf-alerte p { margin: 0; color: #4B5563; }
/* .mf-pourqui : boîte blanche bordée RETIRÉE (rompr 2026-07-16) — on garde juste les 2 cartes vert/gris
   pleine largeur (cf .mf-pourqui grille l.449 + .mf-pq-col). L'ancienne version liste ci-dessous = vestige. */
.mf-pourqui-list { list-style: none; margin: 0; padding: 0; }
.mf-pourqui-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .8rem; padding: .75rem 0; border-bottom: 1px solid #eef1f5; }
.mf-pourqui-list li:last-child { border-bottom: 0; }
.mf-pq-need { color: #4B5563; }
.mf-pq-ans { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #18B7A0; text-align: right; }
.mf-pq-ans small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: .8rem; color: #9aa3b2; }
.mf-prix-cadre { background: #0F2B5B; color: #fff; border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.8rem 0 1rem; }
.mf-prix-cadre p { margin: 0; }
.mf-prix-cadre strong { color: #FFC93C; }
.mf-temoignages { margin: 1.2rem 0; display: grid; gap: 1rem; }
.mf-temoignages blockquote { margin: 0; background: #fff; border: 1px solid #e6e9ef; border-left: 4px solid #18B7A0; border-radius: 10px; padding: 1rem 1.2rem; font-style: italic; color: #2b3a4a; }
.mf-temoignages cite { display: block; margin-top: .5rem; font-style: normal; font-weight: 700; font-size: .8rem; color: #9aa3b2; }
.mf-temoignages-note { font-size: .85rem; color: #4B5563; margin: 0; }

/* Avis clients ([mf_avis_clients]) — bloc texte citable, pas de widget tiers */
.mf-avisclients { margin: 1.6rem 0; }
.mf-ac-head { margin-bottom: 1rem; }
.mf-ac-titre { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--mf-ink); margin: 0 0 .45rem; }
.mf-ac-agg { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.mf-ac-stars { color: var(--mf-gold); letter-spacing: 1px; font-size: 1.05rem; line-height: 1; }
.mf-ac-note { font-weight: 800; color: var(--mf-ink); }
.mf-ac-note small { font-weight: 600; color: var(--mf-muted); }
.mf-ac-nb { color: var(--mf-muted); font-size: .9rem; }
.mf-ac-source { background: var(--mf-bg-soft); border: 1px solid var(--mf-line); color: var(--mf-ink); font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.mf-ac-grid { display: grid; gap: 1rem; }
.mf-ac-card { margin: 0; background: #fff; border: 1px solid var(--mf-line); border-left: 4px solid var(--mf-accent); border-radius: 10px; padding: 1rem 1.2rem; }
.mf-ac-cardstars { display: block; color: var(--mf-gold); letter-spacing: 1px; font-size: .95rem; line-height: 1; margin-bottom: .45rem; }
.mf-ac-texte { margin: 0; font-style: italic; color: #2b3a4a; }
.mf-ac-cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; font-size: .8rem; color: var(--mf-muted); }
@media (min-width: 700px) { .mf-ac-grid { grid-template-columns: 1fr 1fr; } }

/* Tableau "en bref" : seule la marque gagnante (n°1) est cliquable (lien affilié) */
.mf-bref-link { color: #18B7A0; font-weight: 800; text-decoration: none; border-bottom: 2px solid rgba(24,183,160,.35); }
.mf-bref-link:hover { border-bottom-color: #18B7A0; }

/* Bloc offre ([mf_offre]) — page avis : prix d'accroche + garantie + CTA clic vers la marque */
.mf-offre { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; background: var(--mf-bg-soft); border: 1px solid var(--mf-line); border-left: 4px solid var(--mf-accent); border-radius: 14px; padding: 1.3rem 1.4rem; margin: 1.8rem 0; }
.mf-offre-media { flex: 0 0 78px; }
.mf-offre-media img { width: 78px; height: auto; max-height: 104px; object-fit: contain; display: block; border-radius: 10px; }
.mf-offre-main { flex: 1 1 55%; min-width: 0; }
.mf-offre-label { display: inline-block; background: #FFC93C; color: #0F2B5B; font-family: Montserrat, sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .62rem; border-radius: 999px; margin: 0 0 .5rem; line-height: 1; }
.mf-offre-titre { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.125rem; color: var(--mf-ink); margin: 0 0 .5rem; }
.mf-offre-prix { margin: 0; color: var(--mf-ink); line-height: 1.2; }
.mf-offre-from { font-size: .875rem; color: var(--mf-muted); }
.mf-offre-prix strong { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.75rem; color: var(--mf-ink); }
.mf-offre-det { font-size: .875rem; color: var(--mf-muted); }
.mf-offre-gar { margin: .6rem 0 0; font-size: .875rem; font-weight: 700; color: var(--mf-accent-dark); }
.mf-offre-action { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.mf-offre-cta { display: block; text-align: center; }
.mf-offre-code { margin: 0; text-align: center; font-size: .75rem; color: var(--mf-muted); }
.mf-offre-code strong { color: var(--mf-ink); }
/* Code promo proéminent (aide la conversion, rompr 2026-07-16) */
.mf-offre-promo { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .45rem .7rem; border: 2px dashed var(--mf-accent); border-radius: 12px; background: #F4FBF9; }
.mf-offre-promo-lab { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-accent-dark); }
.mf-offre-promo-code { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--mf-ink); letter-spacing: .05em; }
.mf-offre-promo-val { background: var(--mf-accent); color: #fff; font-weight: 800; font-size: .85rem; padding: .22rem .5rem; border-radius: 8px; line-height: 1; white-space: nowrap; }
@media (min-width: 600px) { .mf-offre { flex-wrap: nowrap; justify-content: space-between; gap: 1.3rem; } .mf-offre-media { flex-basis: 92px; } .mf-offre-media img { width: 92px; max-height: 116px; } .mf-offre-main { flex: 1 1 auto; } .mf-offre-action { flex: 0 0 auto; min-width: 240px; } }

/* CTA "notre classement" (mf_compcta) — doit sauter aux yeux (drainage comparatif sur pages avis, rompr 16/07) */
.mf-compcta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(135deg, #18B7A0, #0F8A78); border-radius: 16px; padding: 1.15rem 1.3rem; margin: 1.8rem 0; box-shadow: 0 10px 26px rgba(24,183,160,.30); }
.mf-compcta-ico { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); border-radius: 12px; }
.mf-compcta-ico svg { width: 26px; height: 26px; }
.mf-compcta-body { flex: 1 1 220px; min-width: 0; }
.mf-compcta-t { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.12rem; color: #fff; margin: 0 0 .2rem; line-height: 1.2; }
.mf-compcta-s { font-size: .9rem; color: rgba(255,255,255,.92); margin: 0; line-height: 1.35; }
.mf-compcta-btn { flex: 0 0 auto; background: #FFC93C; color: #0F2B5B !important; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1rem; padding: .85rem 1.5rem; border-radius: 12px; text-decoration: none; box-shadow: 0 5px 16px rgba(15,43,91,.22); white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.mf-compcta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,43,91,.3); }
@media (max-width: 560px) { .mf-compcta { gap: .8rem; } .mf-compcta-btn { flex-basis: 100%; text-align: center; } }

/* [mf_lire] — pont editorial vers un autre article (maillage INTERNE, dofollow, meme onglet).
   A ne pas confondre avec .mf-cta (bouton affilie sortant). */
.mf-lire { display: flex; flex-direction: column; gap: .3rem; background: #fff; border: 1.5px solid var(--mf-ink); border-left: 6px solid var(--mf-accent); border-radius: 14px; box-shadow: 4px 4px 0 var(--mf-ink); padding: 1rem 1.2rem; margin: 1.8rem 0; }
.mf-lire-kicker { font-family: Montserrat, sans-serif; font-weight: 800; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-accent-dark); }
.mf-lire-titre { font-family: Newsreader, Georgia, serif; font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--mf-ink); text-decoration: none; }
.mf-lire-titre:hover { text-decoration: underline; }
.mf-lire-desc { margin: .15rem 0 .35rem; color: var(--mf-muted); line-height: 1.5; }
.mf-lire-cta { align-self: flex-start; font-family: Montserrat, sans-serif; font-weight: 800; font-size: .95rem; color: var(--mf-accent-dark); text-decoration: none; }
.mf-lire-cta:hover { text-decoration: underline; }

/* ==========================================================================
   [mf_quiz] — quiz de conversion (charte SQC, mobile-first, config-driven).
   Namespacé .mf-quiz / .mfq-* (aucune collision). Sélecteurs scopés sous
   .mf-quiz pour gagner en spécificité face au thème/.entry-content.
   ========================================================================== */
.mf-quiz { width: calc(100vw - 16px); max-width: none; margin: .6rem calc(50% - 50vw + 8px); background: var(--mf-bg-soft); border: 1px solid var(--mf-line); border-radius: 18px; padding: 1.3rem .95rem 1.5rem; color: var(--mf-ink); font-family: Inter, system-ui, sans-serif; min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; }
.mf-quiz .mfq-stage { width: 100%; }
.mf-quiz svg { display: inline-block; vertical-align: middle; }
.mf-quiz .mfq-kick { display: inline-block; background: #FFC93C; color: #5b4600; font-family: Montserrat, sans-serif; font-weight: 800; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .32rem .7rem; border-radius: 6px; }
.mf-quiz .mfq-title { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.2; margin: .7rem 0 .3rem; color: var(--mf-ink); }
.mf-quiz .mfq-q { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.25; margin: .8rem 0 .2rem; color: var(--mf-ink); }
.mf-quiz .mfq-sub { font-size: .95rem; line-height: 1.5; color: var(--mf-muted); margin: 0 0 1rem; }
.mf-quiz .mfq-meta { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 600; color: var(--mf-muted); margin-bottom: .5rem; }
.mf-quiz .mfq-back { background: none; border: none; color: var(--mf-muted); font-family: Inter, sans-serif; font-size: .82rem; cursor: pointer; padding: .2rem 0; display: inline-flex; align-items: center; gap: .25rem; }
.mf-quiz .mfq-back svg { width: 15px; height: 15px; }
.mf-quiz .mfq-back:hover { color: var(--mf-ink); }
.mf-quiz .mfq-bar { height: 7px; background: #e3e8ef; border-radius: 99px; overflow: hidden; }
.mf-quiz .mfq-bar > span { display: block; height: 100%; background: var(--mf-accent); border-radius: 99px; transition: width .3s ease; }
.mf-quiz .mfq-opt { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: #fff; border: 1.5px solid #e3e8ef; border-radius: 12px; padding: .85rem .9rem; margin: .55rem 0; cursor: pointer; font-family: Inter, sans-serif; font-size: .96rem; font-weight: 500; color: var(--mf-ink); transition: border-color .15s, background .15s, transform .05s; }
.mf-quiz .mfq-opt:hover { border-color: var(--mf-accent); background: #fbffff; }
.mf-quiz .mfq-opt:active { transform: scale(.99); }
.mf-quiz .mfq-opt.is-sel { border-color: var(--mf-accent); background: #e4f6f2; }
.mf-quiz .mfq-oic { flex: 0 0 40px; height: 40px; border-radius: 10px; background: #e4f6f2; color: var(--mf-accent-dark); display: flex; align-items: center; justify-content: center; }
.mf-quiz .mfq-oic svg { width: 21px; height: 21px; }
.mf-quiz .mfq-opt.is-sel .mfq-oic { background: var(--mf-accent); color: #fff; }
.mf-quiz .mfq-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: var(--mf-accent); color: #fff; border: none; border-radius: 12px; padding: .95rem 1.2rem; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1rem; cursor: pointer; margin-top: .4rem; }
.mf-quiz .mfq-btn:hover { background: var(--mf-accent-dark); }
.mf-quiz .mfq-btn svg { width: 19px; height: 19px; }
.mf-quiz .mfq-btn:disabled { opacity: .45; cursor: not-allowed; }
.mf-quiz .mfq-btn:disabled:hover { background: var(--mf-accent); }
.mf-quiz .mfq-next { margin-top: .75rem; }
.mf-quiz .mfq-hint { display: inline-block; background: #e4f6f2; color: var(--mf-accent-dark); font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .3rem .75rem; margin: .35rem 0 .1rem; }
.mf-quiz .mfq-eml { width: 100%; padding: .85rem .9rem; border: 1.5px solid #e3e8ef; border-radius: 12px; font-family: Inter, sans-serif; font-size: .96rem; color: var(--mf-ink); background: #fff; margin: .3rem 0 .1rem; }
.mf-quiz .mfq-eml:focus { outline: none; border-color: var(--mf-accent); }
.mf-quiz .mfq-eml.is-err { border-color: var(--mf-red); }
.mf-quiz .mfq-err { color: var(--mf-red); font-size: .78rem; min-height: 1rem; margin: .25rem 0 0; }
.mf-quiz .mfq-lock { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--mf-muted); margin-top: .85rem; }
.mf-quiz .mfq-lock svg { width: 15px; height: 15px; }
.mf-quiz .mfq-skip { background: none; border: none; color: var(--mf-muted); font-size: .82rem; cursor: pointer; margin-top: .9rem; width: 100%; text-decoration: underline; }
.mf-quiz .mfq-skip:hover { color: var(--mf-ink); }
.mf-quiz .mfq-card { background: #fff; border: 1.5px solid #e3e8ef; border-radius: 14px; padding: 1.1rem; margin-top: .2rem; }
.mf-quiz .mfq-reco-head { display: flex; gap: .95rem; align-items: center; }
.mf-quiz .mfq-pack { flex: 0 0 82px; }
.mf-quiz .mfq-pack img { width: 82px; height: auto; display: block; border-radius: 6px; }
.mf-quiz .mfq-reco-main { flex: 1 1 auto; min-width: 0; }
.mf-quiz .mfq-reco-nom { font-family: Montserrat, sans-serif; font-weight: 900; font-size: 1.15rem; line-height: 1.2; color: var(--mf-ink); }
.mf-quiz .mfq-reco-sub { font-size: .82rem; color: var(--mf-muted); margin: .15rem 0 .6rem; }
.mf-quiz .mfq-reco-note { display: flex; align-items: center; gap: .6rem; }
.mf-quiz .mfq-score { font-family: Montserrat, sans-serif; font-weight: 900; font-size: 1.35rem; color: var(--mf-ink); background: #e4f6f2; border-radius: 9px; padding: .25rem .6rem; line-height: 1; }
.mf-quiz .mfq-score b { font-weight: 700; font-size: .8rem; color: var(--mf-accent-dark); }
.mf-quiz .mfq-note-lab { font-size: .78rem; color: var(--mf-muted); line-height: 1.3; }
.mf-quiz .mfq-why { list-style: none; padding: 0; margin: 1rem 0 0; }
.mf-quiz .mfq-why li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.5; margin: .6rem 0; color: #243b63; }
.mf-quiz .mfq-why li svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--mf-accent); margin-top: .05rem; }
/* Bloc offre du resultat : DA claire alignee sur [mf_offre] (wake-avis), plus de pave marine */
.mf-quiz .mfq-offer { background: #F4FBF9; color: var(--mf-ink); border: 2px solid var(--mf-accent); border-radius: 14px; padding: 1.1rem 1rem; margin-top: 1rem; box-shadow: 0 8px 22px rgba(24,183,160,.14); }
.mf-quiz .mfq-offer-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.mf-quiz .mfq-offer-pre { font-size: .9rem; color: var(--mf-muted); }
.mf-quiz .mfq-offer-big { font-family: Montserrat, sans-serif; font-weight: 900; font-size: 1.75rem; color: var(--mf-ink); }
.mf-quiz .mfq-offer-detail { font-size: .85rem; color: var(--mf-muted); }
.mf-quiz .mfq-pill { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--mf-line); color: var(--mf-ink); border-radius: 999px; padding: .3rem .65rem; font-size: .76rem; font-weight: 600; }
.mf-quiz .mfq-pill svg { width: 14px; height: 14px; color: var(--mf-accent-dark); }
.mf-quiz .mfq-pill b { color: var(--mf-ink); }
.mf-quiz .mfq-pill-code { border: 2px dashed var(--mf-accent); border-radius: 12px; padding: .45rem .7rem; gap: .5rem; }
.mf-quiz .mfq-code-lab { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-accent-dark); }
.mf-quiz .mfq-pill-code b { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .05em; }
.mf-quiz .mfq-code-val { background: var(--mf-accent); color: #fff; font-weight: 800; font-size: .8rem; padding: .2rem .45rem; border-radius: 8px; line-height: 1; white-space: nowrap; }
.mf-quiz .mfq-cta { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: var(--mf-accent); color: #fff !important; border-radius: 11px; padding: .9rem 1.2rem; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1rem; text-decoration: none; margin-top: .2rem; }
.mf-quiz .mfq-cta:hover { background: var(--mf-accent-dark); }
.mf-quiz .mfq-cta svg { width: 18px; height: 18px; }
.mf-quiz .mfq-legal { font-size: .72rem; color: var(--mf-muted); line-height: 1.5; margin: .8rem 0 0; }
.mf-quiz .mfq-alt { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .9rem; font-size: .88rem; font-weight: 600; color: var(--mf-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.mf-quiz .mfq-alt svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mf-quiz .mfq-alt:hover { color: var(--mf-ink); }
.mf-quiz .mfq-redo { background: none; border: none; color: var(--mf-accent-dark); font-family: Inter, sans-serif; font-weight: 600; font-size: .82rem; cursor: pointer; margin-top: 1rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.mf-quiz .mfq-redo svg { width: 15px; height: 15px; }
.mf-quiz .mfq-num { font-family: Montserrat, sans-serif; font-weight: 900; font-size: 1.05rem; color: var(--mf-accent-dark); }
.mf-quiz .mfq-echo { font-weight: 600; font-size: .95rem; color: var(--mf-accent-dark); margin: .8rem 0 0; }
.mf-quiz .mfq-proof { display: inline-flex; align-items: center; gap: .45rem; background: #FFC93C; color: #0F2B5B; border-radius: 999px; padding: .5rem .85rem; font-size: .8rem; font-weight: 700; margin-bottom: .75rem; white-space: nowrap; max-width: 100%; }
.mf-quiz .mfq-proof svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (min-width: 600px) {
	.mf-quiz { width: auto; max-width: 800px; margin: .8rem auto; min-height: 62vh; padding: 2.6rem 2.8rem 2.8rem; }
	.mf-quiz .mfq-title { font-size: 2.1rem; }
	.mf-quiz .mfq-q { font-size: 1.55rem; }
	.mf-quiz .mfq-sub { font-size: 1.02rem; }
	.mf-quiz .mfq-opt { padding: 1.05rem 1.15rem; font-size: 1.02rem; margin: .65rem 0; }
	.mf-quiz .mfq-hint { font-size: .84rem; }
	.mf-quiz .mfq-oic { flex: 0 0 44px; height: 44px; }
	.mf-quiz .mfq-oic svg { width: 23px; height: 23px; }
	.mf-quiz .mfq-btn { padding: 1.1rem 1.3rem; font-size: 1.1rem; }
	.mf-quiz .mfq-pack { flex-basis: 108px; }
	.mf-quiz .mfq-pack img { width: 108px; }
	.mf-quiz .mfq-reco-nom { font-size: 1.3rem; }
	.mf-quiz .mfq-why li { font-size: .96rem; }
	.mf-quiz .mfq-echo { font-size: 1.05rem; }
}

/* ========================================================================
   DA v4 — HIÉRARCHIE VISUELLE (brief Jeff, 2026-07-13) — cf ADR-026
   Même charte SQC (marine #0F2B5B / turquoise #18B7A0 / jaune #FFC93C,
   Montserrat + Inter) mais hiérarchie extrême : l'utilisateur comprend
   l'important en < 3 s. Rouge #E53935 = couleur d'attention. Notes géantes,
   cartes profondes, n°1 qui gagne avant lecture, badges/encadrés/stats,
   CTA dominants, micro-animations discrètes. Mobile first (base < 769px).
   ======================================================================== */

/* --- Variables + utilitaires "mots importants" --------------------------- */
:root {
	--mf-alert: #E53935;
	--mf-alert-soft: #FDECEA;
	--mf-jaune: #FFC93C;
	--mf-jaune-soft: #FFF8E6;
	--mf-line-2: #e2e7f0;
	--mf-shadow-1: 0 1px 3px rgba(15,43,91,.06), 0 10px 26px rgba(15,43,91,.08);
	--mf-shadow-2: 0 4px 12px rgba(15,43,91,.09), 0 20px 46px rgba(15,43,91,.15);
}
/* Un seul style d'emphase à la fois : rouge (attention) / bleu (institutionnel) / turquoise (positif) */
.mf-rouge { color: var(--mf-alert); font-weight: 700; }
.mf-bleu  { color: var(--mf-ink); font-weight: 700; }
.mf-pos   { color: #0F8A78; font-weight: 700; }
.entry-content > p strong, .entry-content > ul li strong, .entry-content > ol li strong { color: var(--mf-ink); }
.entry-content { color: #3d4757; } /* corps discret -> les titres/chiffres ressortent */
.entry-content a { transition: color .15s ease; }

/* --- Typographie : 4 niveaux de lecture nets (base mobile) ---------------- */
.single .entry-title, .page .entry-title { font-size: 2rem; line-height: 1.08; font-weight: 900 !important; letter-spacing: -.02em; }
.entry-content h2 { font-size: 1.5rem; line-height: 1.18; font-weight: 900 !important; margin: 2.9rem 0 .9rem; }
.entry-content h2::before { content: ""; display: block; width: 46px; height: 5px; border-radius: 99px; background: var(--mf-accent); margin-bottom: .65rem; }
.entry-content h3 { font-size: 1.2rem; font-weight: 800 !important; margin: 2rem 0 .6rem; }
.mf-clp-title { font-size: 2.1rem; }
@media (min-width: 769px) {
	.single .entry-title, .page .entry-title { font-size: 2.75rem; }
	.entry-content h2 { font-size: 2rem; margin: 4rem 0 1rem; }
	.entry-content h3 { font-size: 1.35rem; }
	.mf-hero h1 { font-size: 2.7rem; }
	.mf-clp-title { font-size: 3rem; }
}

/* --- Cartes : profondeur douce, coins arrondis, indépendance -------------- */
.mf-card, .mf-produit, .mf-essentiel, .mf-score, .mf-avis, .mf-equipe-card,
.mf-post-card, .mf-offre, .mf-alerte, .mf-lire, .mf-ac-card, .mf-faq-item, .mf-spec {
	border: 1px solid var(--mf-line-2) !important;
	border-radius: 16px !important;
	box-shadow: var(--mf-shadow-1) !important;
}
.mf-faq-item[open] { border-color: var(--mf-accent) !important; box-shadow: var(--mf-shadow-1) !important; }
.mf-gagnant, .mf-reco { border-radius: 18px !important; box-shadow: var(--mf-shadow-1) !important; }
@media (hover: hover) {
	.mf-post-card, .mf-produit, .mf-equipe-card { transition: transform .22s ease, box-shadow .22s ease; }
	.mf-post-card:hover, .mf-produit:hover, .mf-equipe-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-2) !important; }
}
.mf-post-thumb { overflow: hidden; }
.mf-post-thumb .mf-post-img { transition: transform .35s ease; }
.mf-post-card:hover .mf-post-img { transform: scale(1.05); }

/* --- Le comparatif : le n°1 gagne avant même de lire ---------------------- */
.mf-produit-top {
	position: relative;
	border: 2px solid var(--mf-accent) !important;
	box-shadow: 0 6px 18px rgba(24,183,160,.16), 0 22px 48px rgba(15,43,91,.16) !important;
	background: linear-gradient(180deg, #F4FBF9 0%, #fff 30%);
	padding-top: 2.3rem;
	margin-top: 2.2rem;
}
.mf-produit-top .mf-badge {
	position: absolute; top: -16px; left: 1.1rem;
	background: var(--mf-jaune); color: var(--mf-ink);
	font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .78rem;
	letter-spacing: .06em; text-transform: uppercase;
	padding: .48rem 1rem; border-radius: 999px;
	box-shadow: 0 6px 16px rgba(15,43,91,.18);
}
@media (min-width: 769px) {
	.mf-produit-top { margin-left: -18px; margin-right: -18px; padding: 2.5rem 2rem 1.7rem; }
	.mf-produit-top .mf-cta { font-size: 1.1rem; padding: 1.05rem 2.3rem; }
}
/* Notes = éléments graphiques géants */
.mf-produit .mf-note { padding: .34rem .75rem; border-radius: 12px; }
.mf-produit .mf-note-val { font-size: 1.7rem; }
.mf-produit-top .mf-note-val { font-size: 2.1rem; }
.mf-avis-note { font-size: 1.35rem; padding: .3rem .8rem; border-radius: 10px; }
.mf-gagnant-note { font-size: 1.3rem; }
.mf-score-ring, .mf-score-ring svg { width: 132px; height: 132px; }
.mf-score-ringnum { font-size: 2.3rem; }
.mf-score-ringnum small { font-size: .95rem; }
.mf-offre-prix strong { font-size: 2.3rem; }
/* Ligne gagnante du tableau "en bref" (desktop) */
.mf-bref-win td { background: #E1F5EE; box-shadow: inset 4px 0 0 var(--mf-accent); }
.mf-bref-win .mf-bref-note { font-size: 1.15rem; color: #0F8A78; }

/* --- Statistiques en blocs (le chiffre 3x plus gros que le texte) --------- */
.mf-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin: 2rem 0; }
.mf-statbloc { text-align: center; padding: 1.4rem 1rem 1.25rem; border-radius: 16px; background: var(--mf-bg-soft); border: 1px solid var(--mf-line-2); box-shadow: var(--mf-shadow-1); }
.mf-statbloc b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; color: var(--mf-ink); margin-bottom: .4rem; }
.mf-statbloc span { display: block; font-size: .875rem; color: #4B5563; line-height: 1.35; }
.mf-statbloc.is-turquoise b { color: #0F8A78; }
.mf-statbloc.is-rouge b { color: var(--mf-alert); }
.mf-statbloc.is-jaune { background: var(--mf-jaune-soft); border-color: #FFE3A3; }
.mf-statbloc.is-marine { background: var(--mf-ink); border-color: var(--mf-ink); }
.mf-statbloc.is-marine b { color: var(--mf-jaune); }
.mf-statbloc.is-marine span { color: #c7d0e0; }

/* --- Bibliothèque de badges ([mf_badge] -> .mf-tag) ----------------------- */
.mf-tag { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .36rem .8rem; border-radius: 6px; line-height: 1.25; vertical-align: middle; }
.mf-tag--enquete { background: var(--mf-jaune); color: var(--mf-ink); }
.mf-tag--test    { background: var(--mf-ink); color: #fff; }
.mf-tag--choix   { background: var(--mf-accent); color: #fff; }
.mf-tag--reco    { background: #E1F5EE; color: #0F8A78; border: 1px solid var(--mf-accent); }
.mf-tag--valide  { background: #E1F5EE; color: #0F8A78; }
.mf-tag--qp      { background: var(--mf-jaune-soft); color: #8a6d1a; border: 1px solid #FFE3A3; }
.mf-tag--nouveau { background: var(--mf-alert); color: #fff; }
.mf-tag--alerte  { background: var(--mf-alert-soft); color: var(--mf-alert); border: 1px solid #f5c6c2; }
.mf-tag--maj     { background: var(--mf-bg-soft); color: #4B5563; border: 1px solid var(--mf-line-2); }

/* --- Encadrés éditoriaux ([mf_encadre] -> .mf-enc) ------------------------ */
.mf-enc { display: flex; gap: .95rem; align-items: flex-start; border-radius: 16px; padding: 1.25rem 1.35rem; margin: 2rem 0; border: 1px solid var(--mf-line-2); background: var(--mf-bg-soft); box-shadow: var(--mf-shadow-1); }
.mf-enc-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mf-ink); color: #fff; }
.mf-enc-ico svg { width: 20px; height: 20px; }
.mf-enc-body { flex: 1 1 auto; min-width: 0; }
.mf-enc-titre { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--mf-ink); margin: 0 0 .35rem; }
.mf-enc-body p { margin: 0 0 .5rem; }
.mf-enc-body > :last-child { margin-bottom: 0; }
.mf-enc--savoir .mf-enc-ico { background: var(--mf-jaune); color: var(--mf-ink); }
.mf-enc--retenir { background: #E1F5EE; border-color: #bfe9df; }
.mf-enc--retenir .mf-enc-ico { background: var(--mf-accent); }
.mf-enc--alerte { background: var(--mf-alert-soft); border-color: #f5c6c2; }
.mf-enc--alerte .mf-enc-ico { background: var(--mf-alert); }
.mf-enc--alerte .mf-enc-titre { color: var(--mf-alert); }
.mf-enc--verdict { background: var(--mf-ink); border-color: var(--mf-ink); color: #e8edf6; }
.mf-enc--verdict .mf-enc-titre { color: var(--mf-jaune); }
.mf-enc--verdict .mf-enc-ico { background: var(--mf-jaune); color: var(--mf-ink); }
.mf-enc--verdict a { color: #7fe0d1; }
.mf-enc--verdict strong { color: var(--mf-jaune); }
.mf-enc--avis { background: var(--mf-jaune-soft); border-color: #FFE3A3; }
.mf-enc--avis .mf-enc-ico { background: var(--mf-jaune); color: var(--mf-ink); }

/* --- CTA : ils dominent la page ------------------------------------------- */
.mf-cta {
	font-size: 1.02rem;
	padding: 1rem 1.9rem;
	border-radius: 12px !important;
	box-shadow: 0 5px 16px rgba(24,183,160,.35) !important;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.mf-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 9px 24px rgba(24,183,160,.45) !important; }
.mf-cta:active { transform: translateY(0) !important; box-shadow: 0 3px 10px rgba(24,183,160,.3) !important; }
.mf-cta-mini { font-size: .9rem; padding: .6rem 1.1rem; }
.mf-clp-cta { font-size: 1.1rem; padding: 1.15rem 2.4rem; }
.mf-sticky-cta { padding: 13px 20px; font-size: .95rem; box-shadow: 0 5px 14px rgba(24,183,160,.4); }

/* --- Respiration (desktop : le contenu devient premium) ------------------- */
.entry-content > p { margin-bottom: 1.35rem; }
@media (min-width: 769px) {
	.separate-containers .inside-article { padding: 2.6rem 3rem; }
	.mf-score, .mf-specs, .mf-produit, .mf-faq, .mf-offre, .mf-echelle, .mf-enc, .mf-statgrid { margin-top: 2.2rem; margin-bottom: 2.2rem; }
}

/* Tableaux Gutenberg : en-tête marine (cohérence institutionnelle) */
.entry-content .wp-block-table th { background: var(--mf-ink); }

/* --- Micro-animations : apparition douce au scroll (JS + IO, no-JS safe) --- */
html.mf-js .mf-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
html.mf-js .mf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.mf-js .mf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.mf-post-card, .mf-produit, .mf-equipe-card, .mf-cta, .mf-post-thumb .mf-post-img { transition: none !important; transform: none !important; }
}

/* --- Mobile : cartes pleine largeur, notes centrées, tableau -> cartes ----- */
@media (max-width: 768px) {
	.mf-note-row { justify-content: center; }
	.mf-produit-actions { flex-direction: column; align-items: stretch; gap: .7rem; }
	.mf-produit-actions .mf-cta { width: 100%; text-align: center; font-size: 1.05rem; }
	.mf-produit-actions .mf-produit-avis { text-align: center; }
	.mf-statbloc b { font-size: 2.1rem; }
	.mf-produit-top { margin-top: 2rem; }
	/* Tableau "en bref" : chaque ligne devient une carte (fini le scroll horizontal) */
	.mf-bref { min-width: 0; border: 0; background: transparent; }
	.mf-bref thead { display: none; }
	.mf-bref, .mf-bref tbody, .mf-bref tr, .mf-bref td { display: block; width: 100%; }
	.mf-bref tr { border: 1px solid var(--mf-line-2); border-radius: 14px; box-shadow: var(--mf-shadow-1); margin: 0 0 .9rem; padding: .95rem 1.05rem; background: #fff; }
	.mf-bref td { border: 0; padding: .18rem 0; }
	.mf-bref td[data-th]::before { content: attr(data-th) " : "; font-weight: 600; color: #7b8494; font-size: .8rem; }
	.mf-bref-marque { font-size: 1.08rem; margin-bottom: .15rem; }
	.mf-bref-note { font-size: 1.35rem; }
	.mf-bref tr.mf-bref-win { border: 2px solid var(--mf-accent); background: #F4FBF9; }
	.mf-bref tr.mf-bref-win td { background: transparent; box-shadow: none; }
}

/* ========================================================================
   DA v5 — COMPOSANTS FUNNEL COMPARATIF (mf5-*) — cf ADR-027
   Mécanique meilleure-alternative-cafe.com recodée charte SQC : bandeau de
   classement (rouge = n°1), checklists à icônes pleines, note géante +
   étoiles, pill promo, CTA empilés pleine largeur, colonne unique 600px.
   Périmètre pilote : pages de test + quiz (validé rompr 2026-07-14) ;
   les classes ne s'activent que là où le markup mf5-* est posé.
   ======================================================================== */
.mf5-wrap { max-width: 600px; margin: 0 auto; }
.mf5-card { position: relative; background: #fff; border: 1px solid var(--mf-line-2); border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(15,43,91,.10), 0 24px 54px rgba(15,43,91,.14); margin: 1.8rem 0 2.4rem; }
.mf5-card.is-top { border: 2px solid var(--mf-accent); box-shadow: 0 8px 22px rgba(24,183,160,.18), 0 28px 60px rgba(15,43,91,.18); }
.mf5-bandeau { display: flex; align-items: center; gap: .65rem; background: var(--mf-ink); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; padding: .62rem .95rem; }
.mf5-card.is-top .mf5-bandeau { background: var(--mf-alert); }
.mf5-rang { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--mf-ink); font-weight: 900; font-size: 1.05rem; }
.mf5-card.is-top .mf5-rang { color: var(--mf-alert); }
.mf5-bandeau-lab { margin-left: auto; background: var(--mf-jaune); color: var(--mf-ink); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: .3rem .65rem; border-radius: 999px; white-space: nowrap; }
.mf5-media { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #d7e7e4, #eef3f2); position: relative; }
.mf5-media--photo { background: #fff; display: grid; place-items: center; border-bottom: 1px solid #eef1f5; }
.mf5-media--photo img { max-height: 96%; max-width: 86%; width: auto; height: auto; object-fit: contain; }
.mf5-body { padding: 1.3rem 1.2rem 1.5rem; text-align: center; }
.mf5-body .mf-marque { margin-bottom: .15rem; }
.mf5-titre { font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: 1.55rem; line-height: 1.12; color: var(--mf-ink) !important; margin: 0 0 .9rem; }
.mf5-check { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; text-align: left; }
.mf5-check li { display: block; position: relative; padding-left: 34px; text-align: left; font-size: .95rem; font-weight: 600; color: #26314a; line-height: 1.45; }
.mf5-check .ic { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--mf-accent); color: #fff; display: grid; place-items: center; }
.mf5-check .ic svg { width: 13px; height: 13px; }
.mf5-check li.ko .ic { background: var(--mf-alert); }
.mf5-check li.ko { color: #6b7480; font-weight: 500; }
.mf5-check li strong { color: var(--mf-ink); }
.mf5-notewrap { margin: 1.1rem 0 .4rem; }
.mf5-note { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; color: var(--mf-ink); }
.mf5-note small { font-size: 1.15rem; font-weight: 700; color: #7b8494; margin-left: 2px; }
.mf5-stars { display: block; color: var(--mf-jaune); font-size: 1.45rem; letter-spacing: 4px; line-height: 1.3; }
.mf5-stars .off { opacity: .22; }
.mf5-promo { display: inline-block; background: var(--mf-jaune-soft); border: 1.5px solid #FFDF8C; color: #7a5d10; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .88rem; padding: .5rem 1.05rem; border-radius: 999px; margin: .7rem 0 1rem; }
.mf5-promo b { color: var(--mf-alert); }
.mf5-ctas { display: grid; gap: .7rem; }
.mf5-ctas .mf-cta { display: block; width: 100%; text-align: center; font-size: 1.12rem; padding: 1.12rem 1.4rem; border-radius: 14px !important; }
.mf5-cta2 { display: block; width: 100%; text-align: center; background: #fff; border: 2px solid var(--mf-ink); color: var(--mf-ink) !important; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; padding: .95rem 1.4rem; border-radius: 14px; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.mf5-cta2:hover { background: var(--mf-bg-soft); transform: translateY(-1px); }
.mf5-stamp { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; background: var(--mf-jaune); color: var(--mf-ink); padding: 6px 13px; border-radius: 5px; transform: rotate(-2deg); margin-bottom: 1rem; }
.mf5-methodo { font-size: .8rem; color: #6b7480; line-height: 1.65; max-width: 540px; margin: 1.1rem auto 0; text-align: center; }
.mf5-methodo strong { color: var(--mf-ink); }
.mf5-secttitle { text-align: center; }
.mf5-secttitle::before { margin-left: auto; margin-right: auto; }

/* --- Bloc offre : CTA beaucoup plus punchy (aligné sur la bannière reco, rompr 2026-07-14) */
.mf-offre { border: 2px solid var(--mf-accent) !important; background: #F4FBF9 !important; box-shadow: 0 8px 22px rgba(24,183,160,.14) !important; }
.mf-offre-cta { font-size: 1.15rem; padding: 1.2rem 2.2rem; border-radius: 14px !important; box-shadow: 0 6px 20px rgba(24,183,160,.45) !important; }
.mf-offre-cta:hover { box-shadow: 0 10px 26px rgba(24,183,160,.5) !important; }

/* --- v5 partout : hero clp = tampon jaune + variantes media + funnel centré */
.mf-clp-kicker { background: var(--mf-jaune); color: var(--mf-ink); font-size: .74rem; letter-spacing: .12em; padding: 6px 13px; border-radius: 5px; transform: rotate(-2deg); }
.mf5-media--cover { aspect-ratio: 1 / 1; }
.mf5-media--cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf5-media--cover::after, .mf5-media--photo::after { content: none; }
.mf5-media--photo img { max-height: 96%; max-width: 86%; width: auto; height: auto; object-fit: contain; padding: 8px 0; }
.mf-clp .mf5-card { max-width: 600px; margin-left: auto; margin-right: auto; }
.mf-clp .mf5-methodo { max-width: 600px; margin-left: auto; margin-right: auto; }


/* --- v5.1 (retours rompr 2026-07-14) : cartes compactes + desktop 2 colonnes --- */
.mf5-card { margin: 1.5rem 0 2rem; }
.mf5-bandeau { padding: .5rem .85rem; font-size: .98rem; }
.mf5-media--cover { aspect-ratio: 4 / 3; }
.mf5-body { padding: 1.1rem 1.05rem 1.2rem; }
.mf5-titre { font-size: 1.4rem; margin-bottom: .75rem; }
.mf5-check { gap: .42rem; margin-bottom: .9rem; }
.mf5-check li { font-size: .92rem; padding-left: 31px; }
.mf5-check .ic { width: 20px; height: 20px; top: 2px; }
.mf5-check .ic svg { width: 12px; height: 12px; }
.mf5-notewrap { margin: .8rem 0 .2rem; }
.mf5-note { font-size: 2.9rem; }
.mf5-stars { font-size: 1.25rem; letter-spacing: 3px; }
.mf5-promo { margin: .45rem 0 .8rem; padding: .42rem .9rem; font-size: .84rem; }
.mf5-ctas { gap: .6rem; }
.mf5-ctas .mf-cta { font-size: 1.05rem; padding: 1rem 1.2rem; }
.mf5-cta2 { padding: .85rem 1.2rem; font-size: .95rem; }
/* Desktop : carte large, image a gauche, contenu a droite (ref meilleure-alternative-cafe) */
@media (min-width: 769px) {
	.mf-clp .mf5-card { max-width: none; }
	.mf5-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.mf5-bandeau { grid-column: 1 / -1; }
	.mf5-media, .mf5-media--cover, .mf5-media--photo { aspect-ratio: auto; height: 100%; min-height: 320px; }
	.mf5-media--cover img { height: 100%; }
	.mf5-media--photo img { max-height: 82%; }
	.mf5-body { text-align: left; padding: 1.4rem 1.6rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; }
	.mf5-titre { font-size: 1.5rem; }
	.mf5-notewrap { display: flex; align-items: baseline; gap: .9rem; margin: .8rem 0 .3rem; }
	.mf5-note { font-size: 2.7rem; }
	.mf5-stars { font-size: 1.15rem; }
	.mf5-ctas { display: flex; width: 100%; margin-top: auto; }
	.mf5-ctas > * { flex: 1 1 0; }
	.mf5-ctas .mf-cta { font-size: 1.02rem; padding: .95rem 1.1rem; }
}


/* Sticky CTA : bouton jaune, plus discret (rompr 2026-07-14 soir) */
@media (max-width: 768px) {
	.mf-sticky-cta { background: var(--mf-jaune); color: var(--mf-ink) !important; font-size: .95rem; padding: 12px 18px; border-radius: 10px; box-shadow: 0 4px 12px rgba(15,43,91,.22); flex: 0 0 auto; }
}
@media (min-width: 769px) {
	.mf-sticky-cta { background: var(--mf-jaune); color: var(--mf-ink) !important; }
}

/* --- Quiz : accents v5 (scopés .mf-quiz, config/JS intouchés) ------------- */
.mf-quiz .mfq-card { border: 2px solid var(--mf-accent); box-shadow: 0 8px 22px rgba(24,183,160,.16), 0 20px 44px rgba(15,43,91,.14); border-radius: 18px; overflow: hidden; }
.mf-quiz .mfq-score { font-size: 2.1rem; padding: .3rem .75rem; border-radius: 12px; }
/* Relief couleur (retour rompr 2026-07-20, aligne comparatif v5) : rouge = classement/attention, jaune = tampon note */
.mf-quiz .mfq-cta { white-space: nowrap; }
.mf-quiz .mfq-why li b { color: var(--mf-ink); font-weight: 800; }
.mf-quiz .mfq-cta svg { width: 20px; height: 20px; }
/* Questions : volume + contraste (retour rompr) — cartes profondes + rotation 4 couleurs des chips d'icones */
.mf-quiz .mfq-meta > span:first-child { color: var(--mf-ink); font-weight: 800; font-size: .82rem; }
.mf-quiz .mfq-bar { height: 8px; }
.mf-quiz .mfq-opt { box-shadow: 0 3px 12px rgba(15,43,91,.07); }
.mf-quiz .mfq-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,43,91,.12); }
.mf-quiz .mfq-opt:active { transform: scale(.99); }
.mf-quiz .mfq-opt:nth-of-type(4n+2) .mfq-oic { background: #FFF3D1; color: #0F2B5B; }
.mf-quiz .mfq-opt:nth-of-type(4n+3) .mfq-oic { background: var(--mf-alert-soft); color: var(--mf-alert); }
.mf-quiz .mfq-opt:nth-of-type(4n+4) .mfq-oic { background: #E8EEF9; color: #0F2B5B; }
.mf-quiz .mfq-opt.is-sel .mfq-oic { background: var(--mf-accent); color: #fff; }
.mf-quiz h2::before { display: none; }                     /* pas de barre v4 dans le quiz : elle doublonnait la barre de progression */
.mf-quiz .mfq-rank { margin: -1.1rem -1.1rem 1rem; background: var(--mf-alert); color: #fff; font-family: Montserrat, sans-serif; font-weight: 800; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; text-align: center; padding: .5rem .9rem; }
.mf-quiz .mfq-score { background: #FFC93C; color: var(--mf-ink); }
.mf-quiz .mfq-score b { color: #0F2B5B; }
.mf-quiz .mfq-echo { color: var(--mf-alert); }
.mf-quiz .mfq-hint { background: #FFF3D1; color: #0F2B5B; }
.mf-quiz .mfq-cta-top { margin: .9rem 0 .2rem; }
.mf-quiz .mfq-reco-nom { font-size: 1.3rem; }
.mf-quiz .mfq-why li svg { background: var(--mf-accent); color: #fff; border-radius: 50%; padding: 3px; width: 21px; height: 21px; }
.mf-quiz .mfq-cta { font-size: 1.1rem; padding: 1.05rem 1.3rem; border-radius: 14px; box-shadow: 0 5px 16px rgba(24,183,160,.35); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.mf-quiz .mfq-cta:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(24,183,160,.45); }
.mf-quiz .mfq-offer-big { font-size: 2.3rem; }
.mf-quiz .mfq-btn { border-radius: 14px; }
@media (min-width: 600px) {
	.mf-quiz .mfq-reco-nom { font-size: 1.5rem; }
	.mf-quiz .mfq-score { font-size: 2.4rem; }
}

/* --- Section "Qu'est-ce qu'en dit la science" ([mf_science] -> .mf-sci) — DA v4 --- */
.mf-sci { border: 1px solid var(--mf-line-2); border-radius: 18px; padding: 1.3rem 1.15rem; margin: 2.2rem 0; background: #fff; box-shadow: var(--mf-shadow-1); }
.mf-sci-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.mf-sci-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mf-accent); color: #fff; }
.mf-sci-ico svg { width: 22px; height: 22px; }
.mf-sci-titre { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.3rem; line-height: 1.15; color: var(--mf-ink); margin: 0; }
.mf-sci-intro { color: #3d4757; margin: .2rem 0 1rem; }
.mf-sci-list { display: flex; flex-direction: column; gap: .75rem; }
.mf-sci-item { display: flex; gap: .95rem; align-items: flex-start; padding: .95rem; border: 1px solid var(--mf-line); border-radius: 14px; background: var(--mf-bg-soft); }
.mf-sci-num { flex: 0 0 88px; text-align: center; padding-top: .1rem; }
.mf-sci-num b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--mf-accent); }
.mf-sci-num span { display: block; font-size: .7rem; color: var(--mf-muted); margin-top: .3rem; line-height: 1.25; }
.mf-sci-body { flex: 1 1 auto; min-width: 0; }
.mf-sci-actif { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--mf-ink); margin: 0 0 .25rem; }
.mf-sci-find { color: #3d4757; font-size: .95rem; margin: 0 0 .45rem; }
.mf-sci-link { display: inline-block; font-weight: 700; font-size: .9rem; color: var(--mf-accent-dark); text-decoration: none; }
.mf-sci-link:hover { text-decoration: underline; }
.mf-sci-link--none { color: var(--mf-muted); font-weight: 600; }
.mf-sci-maj { font-size: .78rem; color: var(--mf-muted); font-style: italic; margin: 1rem 0 0; }
@media (min-width: 600px) {
	.mf-sci { padding: 1.6rem 1.5rem; }
	.mf-sci-num { flex-basis: 108px; }
	.mf-sci-num b { font-size: 2.2rem; }
	.mf-sci-item { padding: 1.1rem 1.15rem; }
}