/* ==========================================================================
   Media Factory : skin "On mérite" (cartes comparatif, tableau, badges)
   CHARTE On mérite, La voix franche. Chargé via mu-plugin media-factory-render.php
   ========================================================================== */

:root {
	--mf-accent: #5432A8;       /* framboise OAO (marque, CTA, liens forts) */
	--mf-accent-dark: #432886;  /* framboise foncee (hover/pressed) */
	--mf-ink: #211A2C;          /* encre brun-noir (titres) */
	--mf-muted: var(--mf-muted);
	--mf-line: #E4DEEF;         /* filets, bordures douces */
	--mf-bg-soft: #EFEAF8;      /* fond doux creme */
	--mf-bg-page: #FFFFFF;      /* fond de page creme chaud (ajout OAO) */
	--mf-gold: #5432A8;         /* ambre dore (notes, etoiles) */
	--mf-green: #2F6B45;        /* vert sapin (positif, checklists) */
	--mf-red: #A33724;          /* orange brule (negatif) */
	/* Corps de texte OAO = #3A3345, applique en litteral dans les regles :
	   pas de token historique equivalent dans ce moteur (on n'en invente pas). */
}
.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(43,33,24,.04);
	overflow: hidden;
}
.mf-card.mf-rank-1 { border-color: var(--mf-accent); box-shadow: 0 4px 20px rgba(196,35,72,.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: var(--mf-ink); }
.mf-badge-budget { background: var(--mf-gold); color: #3E2E10; }
.mf-badge-naturel { background: var(--mf-green); }

.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, #EFEAF8);
	border: 1px solid var(--mf-line);
	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: var(--mf-accent); font-size: .875rem; }
.mf-auteur-bio { margin: 0 0 .4rem; font-size: .875rem; line-height: 1.5; color: #3A3345; }
.mf-auteur-maj { margin: 0; font-size: .875rem; color: var(--mf-muted); }

/* --- 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 var(--mf-line);
	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: var(--mf-accent); 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: #3A3345; 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 var(--mf-line); }
.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: var(--mf-accent-dark); }
.site-description { color: var(--mf-muted); }

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

/* --- Homepage : hero + derniers comparatifs + confiance ------------------ */
.mf-hero { text-align: center; padding: 2.6rem 1.2rem 2.2rem; background: linear-gradient(160deg, var(--mf-bg-soft), var(--mf-line)); border-radius: 18px; margin: 1.5rem 0 2rem; }
.mf-hero h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 .6rem; color: var(--mf-ink); }
.mf-hero p { max-width: 620px; margin: 0 auto 1.2rem; color: #3A3345; 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 var(--mf-line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.mf-post-thumb { display: block; aspect-ratio: 16 / 9; background: var(--mf-bg-soft); }
.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, var(--mf-line), var(--mf-bg-soft)); }
.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: var(--mf-ink); text-decoration: none; }
.mf-post-title a:hover { color: var(--mf-accent); }
.mf-post-meta { margin: 0; font-size: .875rem; color: var(--mf-muted); }
.mf-post-excerpt { margin: .1rem 0 .3rem; font-size: .875rem; line-height: 1.5; color: #3A3345; }
.mf-post-link { margin-top: auto; font-weight: 700; color: var(--mf-accent-dark); 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: var(--mf-accent-dark); 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: var(--mf-bg-soft); border-radius: 14px; margin: 1rem 0 2rem; }
.mf-trust a { color: var(--mf-accent-dark); 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é ('Bricolage Grotesque' + header sombre + coral)
   ======================================================================== */

/* Typographie globale : 'Source Sans 3' (corps) + 'Bricolage Grotesque' (titres) */
body, button, input, select, textarea,
.entry-content, .mf-post-meta, .mf-auteur-bio {
	font-family: ''Source Sans 3'', -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: ''Bricolage Grotesque'', Georgia, 'Times New Roman', serif !important;
	font-weight: 600;
	letter-spacing: -.01em;
}
body { color: var(--mf-ink); }

/* 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: var(--mf-ink) !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: #E4DEEF !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: var(--mf-bg-page) !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: var(--mf-ink); margin-bottom: .7rem; }
.mf-hero p { font-size: 1.125rem; color: #3A3345; }

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

/* Cartes article : titre serif présent */
.mf-post-title { font-size: 1.25rem; line-height: 1.18; }
.mf-post-title a { color: var(--mf-ink); }
.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: var(--mf-accent) !important; }
.mf-cta:hover { background: var(--mf-accent-dark) !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: var(--mf-bg-soft); border: 0.5px solid var(--mf-line); border-radius: 14px; padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.mf-essentiel-titre { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 600; font-size: 1.25rem; margin: 0 0 .6rem; color: var(--mf-ink); }
.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: var(--mf-accent); }

/* 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: var(--mf-ink); }
.mf-by-role { color: #6E6878; margin-left: .35rem; }
.mf-by-line2 { font-size: .875rem; color: #6E6878; 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: #6E6878; }
.mf-toc-title::-webkit-details-marker { display: none; }
.mf-toc-title::after { content: "+"; font-size: 1.05rem; line-height: 1; color: var(--mf-accent-dark); }
.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: var(--mf-accent-dark); 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: var(--mf-accent-dark); 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: 'Bricolage Grotesque', sans-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: #3A3345; 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: #6E6878; margin: 0 0 .6rem; }
.mf-aside-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mf-aside-related a { color: var(--mf-ink); 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: 'Source Sans 3', 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: #6E6878; 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: 'Source Sans 3', 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: #9FC9B6; border-radius: 999px 0 0 999px; }
.mf-jauge-seg.s2 { background: #E0F56B; }
.mf-jauge-seg.s3 { background: #E6A18B; 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: #EFEAF8; }
.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: var(--mf-accent-dark); }
.mf-pq-no ul { color: var(--mf-muted); }

/* Echelle multi-marques (desktop = jauge SVG ; mobile = liste classee) */
.mf-echelle { margin: 1.8rem 0; }
.mf-ech-titre { font-family: 'Source Sans 3', 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: var(--mf-accent-dark); }
.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, #E7A7B6, var(--mf-accent)); border-radius: 999px; }
	.mf-ech-mobile li.is-win { background: #EFEAF8; 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: 'Source Sans 3', 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: var(--mf-ink); }
.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: var(--mf-accent-dark); }

/* Bannière "Notre sélection" — 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(43,33,24,.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: var(--mf-accent); 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: 'Bricolage Grotesque', sans-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: #3A3345; 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: #FAFDEA; 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(196,35,72,.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, var(--mf-line), var(--mf-bg-soft)); }
.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: 'Bricolage Grotesque', sans-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: var(--mf-accent-dark); 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 sélection" 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: var(--mf-accent); 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: 'Bricolage Grotesque', sans-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(196,35,72,.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: 'Bricolage Grotesque', sans-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: #3A3345; }
.mf-faq-a > :first-child { margin-top: 0; }
.mf-faq-a > :last-child { margin-bottom: 0; }
.mf-faq-a a { color: var(--mf-accent-dark); }
.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: var(--mf-bg-soft); border-bottom: 1px solid var(--mf-line); }
.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: var(--mf-ink); 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: var(--mf-accent-dark); }
@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 historique) recolorée
   Titres sans-serif bold ('Source Sans 3') + pills hard-shadow + cartes bordées.
   Validé rompr 2026-06-16. cf design-reference.md / ADR-012.
   ======================================================================== */

/* 1) Typo : titres en sans-serif bold ('Source Sans 3') au lieu du serif 'Bricolage Grotesque' */
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: ''Source Sans 3'', 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: #EEF8B5; padding: 0 .14em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mf-kicker { display: block; font-family: 'Source Sans 3', 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 var(--mf-ink);
	box-shadow: 4px 4px 0 var(--mf-ink);
	transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.mf-cta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--mf-ink); }
.mf-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mf-ink); }
.mf-cta-mini { box-shadow: 3px 3px 0 var(--mf-ink); }

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

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

/* 6) Bloc "Notre sélection" = reco premium (carte crème bordée), version média sans prix */
.mf-gagnant {
	background: var(--mf-bg-soft) !important;
	border: 1.5px solid var(--mf-ink) !important;
	border-radius: 20px !important;
	box-shadow: 6px 6px 0 var(--mf-ink);
	padding: 1.3rem 1.4rem;
}
.mf-gagnant-kicker { border: 2px solid var(--mf-ink); border-radius: 999px; }
.mf-gagnant-media img { border: 1.5px solid var(--mf-ink); 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 var(--mf-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--mf-ink); }

/* ========================================================================
   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; }
/* neutralise pour On merite : .site-header { border-bottom: 2px solid var(--mf-ink) !important; } */
.site-header .main-title a, .site-header .site-title a, .site-header .main-title, .site-header .site-title { color: var(--mf-ink) !important; }
.site-description { color: var(--mf-muted) !important; }
.menu-toggle, .menu-toggle:hover { color: var(--mf-ink) !important; }
.main-navigation .main-nav ul li a { color: var(--mf-ink) !important; font-family: 'Source Sans 3', 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: var(--mf-accent) !important; }
.main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--mf-accent); }

/* Déroulants (sous-menus) = carte bordée + hard shadow (DA v2) */
.main-navigation .main-nav ul ul {
	background: #ffffff;
	border: 1.5px solid var(--mf-ink);
	box-shadow: 5px 5px 0 var(--mf-ink);
	border-radius: 12px;
	padding: 6px;
}
.main-navigation .main-nav ul ul li a { color: var(--mf-ink) !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: var(--mf-bg-soft); color: var(--mf-ink) !important; box-shadow: none; }

/* Section "Notre équipe de rédaction" (home) + cartes équipe alignées DA v2 */
.mf-equipe-card { border: 1.5px solid var(--mf-ink) !important; border-radius: 16px; box-shadow: 5px 5px 0 var(--mf-ink); }
.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 var(--mf-ink); }
	/* 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: var(--mf-ink) !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 var(--mf-line); }
	/* 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 On mérite, La voix franche : magazine cadeaux "chaleur éditoriale"
   Encre #211A2C + framboise #5432A8 + ambre #E0F56B, 'Source Sans 3' (corps).
   Display 'Bricolage Grotesque' via la couche OAO en fin de fichier. Premium chaleureux.
   ======================================================================== */

/* 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; }
/* neutralise pour On merite : .main-title { display: none !important; } */

/* Texte courant gris ardoise ; titres en marine */
body, .entry-content { color: #3A3345; }
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: var(--mf-ink) !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 var(--mf-line) !important;
	border-radius: 14px !important;
}
.mf-faq-item[open] { border-color: var(--mf-accent) !important; box-shadow: none !important; }
.mf-essentiel { background: var(--mf-bg-soft) !important; }
.mf-gagnant, .mf-reco { border: 1px solid var(--mf-line) !important; box-shadow: 0 8px 24px rgba(43,33,24,.08) !important; border-radius: 16px !important; }
.mf-gagnant { background: var(--mf-bg-soft) !important; }

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

/* Tampon "Notre sélection" = jaune enquête ; toggle FAQ ouvert turquoise */
.mf-gagnant-kicker { background: var(--mf-jaune) !important; color: var(--mf-ink) !important; border: 0 !important; }
.mf-faq-item[open] .mf-faq-q::after { background: var(--mf-accent) !important; color: #fff !important; }

/* Catbar gris clair (topbar reste turquoise) */
.mf-catbar { background: var(--mf-bg-soft); border-bottom: 1px solid var(--mf-line); }

/* Hero : tampon "enquête" + bandeau de chiffres ('Source Sans 3' Black) */
.mf-hero-stamp { display: inline-block; font-family: 'Source Sans 3', sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; background: var(--mf-jaune); color: var(--mf-ink); 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: var(--mf-ink); border-radius: 14px; padding: 1.1rem 1.2rem; margin: 0 0 2rem; text-align: center; }
.mf-stats b { display: block; font-family: 'Source Sans 3', sans-serif; font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--mf-jaune); }
.mf-stats > div:nth-child(2) b { color: var(--mf-accent); }
.mf-stats > div:nth-child(3) b { color: #fff; }
.mf-stats span { font-size: .875rem; color: #E4DEEF; }

/* Banniere quiz (home) : bloc conversion vers /quel-cadeau-offrir/ */
.mf-quizbanner { background: var(--mf-accent); color: #FFFFFF; border-radius: 16px; padding: 1.5rem 1.2rem; margin: 0 0 2rem; text-align: center; }
.mf-quizbanner b { display: block; font-family: ''Bricolage Grotesque'', Georgia, serif; font-weight: 900; font-size: 1.45rem; line-height: 1.2; margin-bottom: .4rem; }
.mf-quizbanner p { margin: 0 0 1rem; font-size: .95rem; opacity: .92; }
.mf-quizbanner-cta { display: inline-block; background: #FFFFFF; color: var(--mf-accent); font-weight: 800; font-size: 1rem; padding: .8rem 1.6rem; border-radius: 12px; text-decoration: none; }
.mf-quizbanner-cta:hover { background: var(--mf-jaune); color: var(--mf-ink); }
@media (min-width: 600px) { .mf-quizbanner { padding: 2rem 2.4rem; } .mf-quizbanner b { font-size: 1.7rem; } }

/* ===== 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 var(--mf-line); }
	.main-navigation .main-nav ul li a {
		font-family: 'Source Sans 3', sans-serif !important; font-weight: 800; font-size: 1.125rem;
		color: var(--mf-ink) !important; padding: 16px 18px;
	}
	.main-navigation .main-nav ul ul { background: transparent !important; }
	.main-navigation .main-nav ul ul li a { font-family: 'Source Sans 3', sans-serif !important; font-weight: 600; font-size: .875rem; color: var(--mf-ink) !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: var(--mf-ink);
	}
	.main-navigation .menu-item-has-children.sfHover > a .dropdown-menu-toggle { background: transparent !important; color: var(--mf-accent); }
}

/* ===== 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: #3A3345; font-family: 'Source Sans 3', sans-serif; }
.mf-reassure span { display: inline-flex; align-items: center; gap: .35rem; }
.mf-reassure span::before { content: "✓"; color: var(--mf-accent); 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: 'Source Sans 3', sans-serif; border: 1px solid var(--mf-line); border-radius: 12px; overflow: hidden; }
.mf-bref th { background: var(--mf-ink); color: #fff; font-family: 'Source Sans 3', 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 var(--mf-line); 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: var(--mf-bg-soft); color: var(--mf-ink); font-family: 'Source Sans 3', sans-serif; font-weight: 900; font-size: .72rem; margin-right: .45rem; vertical-align: middle; }
.mf-bref-marque { font-family: 'Source Sans 3', sans-serif; font-weight: 800; color: var(--mf-ink); white-space: nowrap; }
.mf-bref-note { font-family: 'Source Sans 3', sans-serif; font-weight: 900; color: var(--mf-accent); white-space: nowrap; }
.mf-bref-note small { color: #9C97A5; font-weight: 700; font-size: .68em; }
.mf-bref-badge { background: var(--mf-jaune); color: var(--mf-ink); font-family: 'Source Sans 3', sans-serif; font-weight: 800; font-size: .75rem; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }
.mf-bref-plus { color: #3A3345; }
.mf-bref-win td { background: #EFEAF8; box-shadow: inset 3px 0 0 var(--mf-accent); }
.mf-bref-win .mf-bref-rang { background: var(--mf-accent); 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 var(--mf-line); box-shadow: 0 -4px 18px rgba(43,33,24,.12); padding: 9px 14px; }
	.mf-sticky-txt { font-size: .875rem; color: #3A3345; line-height: 1.25; }
	.mf-sticky-txt strong { font-family: 'Source Sans 3', sans-serif; font-weight: 800; color: var(--mf-ink); }
	.mf-sticky-cta { flex: 0 0 auto; background: var(--mf-accent); color: #fff !important; font-family: 'Source Sans 3', 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: 'Source Sans 3', sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mf-accent); margin-bottom: .7rem; }
.mf-clp-title { font-family: 'Source Sans 3', sans-serif !important; font-weight: 900; font-size: 2.25rem; line-height: 1.06; color: var(--mf-ink) !important; margin: 0 0 .7rem; }
.mf-clp-sub { font-size: 1.125rem; color: #3A3345; 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: #3A3345; }
.mf-clp-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.mf-clp-trust span::before { content: "✓"; color: var(--mf-accent); 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; }
	/* neutralise pour On merite : .menu-toggle { font-size: 26px !important; line-height: 1 !important; padding: 6px !important; } */
	/* neutralise pour On merite : .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: 'Source Sans 3', sans-serif; font-weight: 700; font-size: .78rem; color: #9C97A5; 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) {
	/* neutralise pour On merite : .grid-container { padding-left: 12px !important; padding-right: 12px !important; } */
	/* neutralise pour On merite : .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 var(--mf-line); }
/* 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: 'Source Sans 3', sans-serif; font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-accent); 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: var(--mf-jaune-soft); border: 1px solid #EEF8B5; border-left: 4px solid var(--mf-jaune); border-radius: 10px; padding: 1rem 1.2rem; margin: 1.6rem 0; }
.mf-alerte-titre { font-family: 'Source Sans 3', sans-serif; font-weight: 800; color: var(--mf-ink); margin: 0 0 .4rem; font-size: 1rem; }
.mf-alerte p { margin: 0; color: #3A3345; }
/* .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 var(--mf-line); }
.mf-pourqui-list li:last-child { border-bottom: 0; }
.mf-pq-need { color: #3A3345; }
.mf-pq-ans { font-family: 'Source Sans 3', sans-serif; font-weight: 800; color: var(--mf-accent); text-align: right; }
.mf-pq-ans small { display: block; font-family: 'Source Sans 3', sans-serif; font-weight: 400; font-size: .8rem; color: #9C97A5; }
.mf-prix-cadre { background: var(--mf-ink); 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: var(--mf-jaune); }
.mf-temoignages { margin: 1.2rem 0; display: grid; gap: 1rem; }
.mf-temoignages blockquote { margin: 0; background: #fff; border: 1px solid var(--mf-line); border-left: 4px solid var(--mf-accent); border-radius: 10px; padding: 1rem 1.2rem; font-style: italic; color: #3A3345; }
.mf-temoignages cite { display: block; margin-top: .5rem; font-style: normal; font-weight: 700; font-size: .8rem; color: #9C97A5; }
.mf-temoignages-note { font-size: .85rem; color: #3A3345; 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: 'Source Sans 3', 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: #3A3345; }
.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: var(--mf-accent); font-weight: 800; text-decoration: none; border-bottom: 2px solid rgba(196,35,72,.35); }
.mf-bref-link:hover { border-bottom-color: var(--mf-accent); }

/* 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: var(--mf-jaune); color: var(--mf-ink); font-family: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: #F7F4FC; }
.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: 'Source Sans 3', 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, var(--mf-accent), var(--mf-accent-dark)); border-radius: 16px; padding: 1.15rem 1.3rem; margin: 1.8rem 0; box-shadow: 0 10px 26px rgba(196,35,72,.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: 'Source Sans 3', 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: var(--mf-jaune); color: var(--mf-ink) !important; font-family: 'Source Sans 3', sans-serif; font-weight: 800; font-size: 1rem; padding: .85rem 1.5rem; border-radius: 12px; text-decoration: none; box-shadow: 0 5px 16px rgba(43,33,24,.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(43,33,24,.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: 'Source Sans 3', sans-serif; font-weight: 800; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-accent-dark); }
.mf-lire-titre { font-family: 'Bricolage Grotesque', 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: 'Source Sans 3', 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 OAO, 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: 'Source Sans 3', system-ui, sans-serif; min-height: 56vh; min-height: 56svh; 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: var(--mf-jaune); color: #5D4418; font-family: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: var(--mf-line); 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 var(--mf-line); border-radius: 12px; padding: .85rem .9rem; margin: .55rem 0; cursor: pointer; font-family: 'Source Sans 3', 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: #FCFBFE; }
.mf-quiz .mfq-opt:active { transform: scale(.99); }
.mf-quiz .mfq-opt.is-sel { border-color: var(--mf-accent); background: #F2EEFA; }
.mf-quiz .mfq-oic { flex: 0 0 40px; height: 40px; border-radius: 10px; background: #F2EEFA; 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: 'Source Sans 3', 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: #F2EEFA; 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 var(--mf-line); border-radius: 12px; font-family: 'Source Sans 3', 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 var(--mf-line); 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: 'Source Sans 3', 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: 'Source Sans 3', sans-serif; font-weight: 900; font-size: 1.35rem; color: var(--mf-ink); background: #F2EEFA; 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: #3A3345; }
.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] (page avis annonceur), plus de pave sombre */
.mf-quiz .mfq-offer { background: #F7F4FC; 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(196,35,72,.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: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: var(--mf-jaune); color: var(--mf-ink); 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: 52vh; 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
   Charte OAO v1 (encre #211A2C / framboise #5432A8 / ambre #E0F56B,
   'Bricolage Grotesque' + 'Source Sans 3') avec hiérarchie extrême : l'utilisateur comprend
   l'important en < 3 s. Orange brûlé #A33724 = 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: #A33724;        /* orange brule : urgence/attention */
	--mf-alert-soft: #F6E7E3;
	--mf-jaune: #E0F56B;        /* ambre dore */
	--mf-jaune-soft: #F7FCD9;
	--mf-line-2: #E4DEEF;
	--mf-shadow-1: 0 1px 3px rgba(43,33,24,.06), 0 10px 26px rgba(43,33,24,.08);
	--mf-shadow-2: 0 4px 12px rgba(43,33,24,.09), 0 20px 46px rgba(43,33,24,.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: var(--mf-accent-dark); font-weight: 700; }
.entry-content > p strong, .entry-content > ul li strong, .entry-content > ol li strong { color: var(--mf-ink); }
.entry-content { color: #3A3345; } /* 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(196,35,72,.16), 0 22px 48px rgba(43,33,24,.16) !important;
	background: linear-gradient(180deg, #F7F4FC 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: 'Source Sans 3', 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(43,33,24,.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: #EFEAF8; box-shadow: inset 4px 0 0 var(--mf-accent); }
.mf-bref-win .mf-bref-note { font-size: 1.15rem; color: var(--mf-accent-dark); }

/* --- 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: 'Source Sans 3', 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: #3A3345; line-height: 1.35; }
.mf-statbloc.is-turquoise b { color: var(--mf-accent-dark); }
.mf-statbloc.is-rouge b { color: var(--mf-alert); }
.mf-statbloc.is-jaune { background: var(--mf-jaune-soft); border-color: #EEF8B5; }
.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: #E4DEEF; }

/* --- Bibliothèque de badges ([mf_badge] -> .mf-tag) ----------------------- */
.mf-tag { display: inline-block; font-family: 'Source Sans 3', 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: #EFEAF8; color: var(--mf-accent-dark); border: 1px solid var(--mf-accent); }
.mf-tag--valide  { background: #EFEAF8; color: var(--mf-accent-dark); }
.mf-tag--qp      { background: var(--mf-jaune-soft); color: #805D21; border: 1px solid #EEF8B5; }
.mf-tag--nouveau { background: var(--mf-alert); color: #fff; }
.mf-tag--alerte  { background: var(--mf-alert-soft); color: var(--mf-alert); border: 1px solid #E4DAF2; }
.mf-tag--maj     { background: var(--mf-bg-soft); color: #3A3345; 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: 'Source Sans 3', 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: #EFEAF8; border-color: #EDBDC8; }
.mf-enc--retenir .mf-enc-ico { background: var(--mf-accent); }
.mf-enc--alerte { background: var(--mf-alert-soft); border-color: #E4DAF2; }
.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: #EFEAF8; }
.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: #DE869A; }
.mf-enc--verdict strong { color: var(--mf-jaune); }
.mf-enc--avis { background: var(--mf-jaune-soft); border-color: #EEF8B5; }
.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(196,35,72,.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(196,35,72,.45) !important; }
.mf-cta:active { transform: translateY(0) !important; box-shadow: 0 3px 10px rgba(196,35,72,.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(196,35,72,.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: #7A7486; 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: #F7F4FC; }
	.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 OAO : 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(43,33,24,.10), 0 24px 54px rgba(43,33,24,.14); margin: 1.8rem 0 2.4rem; }
.mf5-card.is-top { border: 2px solid var(--mf-accent); box-shadow: 0 8px 22px rgba(196,35,72,.18), 0 28px 60px rgba(43,33,24,.18); }
.mf5-bandeau { display: flex; align-items: center; gap: .65rem; background: var(--mf-ink); color: #fff; font-family: 'Source Sans 3', 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, var(--mf-line), var(--mf-bg-soft)); position: relative; }
.mf5-media--photo { background: #fff; display: grid; place-items: center; border-bottom: 1px solid var(--mf-line); }
.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: 'Source Sans 3', 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: #3A3345; 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: #67616F; font-weight: 500; }
.mf5-check li strong { color: var(--mf-ink); }
.mf5-notewrap { margin: 1.1rem 0 .4rem; }
.mf5-note { font-family: 'Source Sans 3', 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: #7A7486; 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 #E9F590; color: #745519; font-family: 'Source Sans 3', 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: 'Source Sans 3', 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: 'Source Sans 3', 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: #67616F; 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: #F7F4FC !important; box-shadow: 0 8px 22px rgba(196,35,72,.14) !important; }
.mf-offre-cta { font-size: 1.15rem; padding: 1.2rem 2.2rem; border-radius: 14px !important; box-shadow: 0 6px 20px rgba(196,35,72,.45) !important; }
.mf-offre-cta:hover { box-shadow: 0 10px 26px rgba(196,35,72,.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(43,33,24,.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(196,35,72,.16), 0 20px 44px rgba(43,33,24,.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(43,33,24,.07); }
.mf-quiz .mfq-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(43,33,24,.12); }
.mf-quiz .mfq-opt:active { transform: scale(.99); }
.mf-quiz .mfq-opt:nth-of-type(4n+2) .mfq-oic { background: #F6FBD6; color: var(--mf-ink); }
.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: #E4EDE9; color: var(--mf-ink); }
.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: 'Source Sans 3', 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: var(--mf-jaune); color: var(--mf-ink); }
.mf-quiz .mfq-score b { color: var(--mf-ink); }
.mf-quiz .mfq-echo { color: var(--mf-alert); }
.mf-quiz .mfq-hint { background: #F6FBD6; color: var(--mf-ink); }
.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(196,35,72,.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(196,35,72,.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: 'Source Sans 3', sans-serif; font-weight: 900; font-size: 1.3rem; line-height: 1.15; color: var(--mf-ink); margin: 0; }
.mf-sci-intro { color: #3A3345; 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: 'Source Sans 3', 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: 'Source Sans 3', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--mf-ink); margin: 0 0 .25rem; }
.mf-sci-find { color: #3A3345; 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; }
}

/* ========================================================================
   OAO v1, display 'Bricolage Grotesque' (charte "Chaleur éditoriale", 2026-08-27)
   Les titres et éléments display passent en 'Bricolage Grotesque' (serif éditoriale
   chaleureuse), signature de la marque On mérite. Le corps et l'UI
   restent en 'Source Sans 3'. Les poids existants sont conservés (cette couche
   ne touche que la font-family). Fallback : Georgia, serif.
   ======================================================================== */
h1, h2, h3,
.entry-title, .site-title, .main-title,
.mf-hero h1, .mf-clp-title, .mf5-titre {
	font-family: ''Bricolage Grotesque'', Georgia, serif !important;
}

/* Fond de page crème chaud OAO (les cartes restent blanches #FFFFFF).
   À aligner aussi dans le customizer GeneratePress au provisioning. */
body { background-color: var(--mf-bg-page); }

/* Recherche dans la barre de thèmes (23/09) : même item que les thèmes, champ déplié sous la barre */
.mf-catbar-search { background: none; border: 0; cursor: pointer; font-family: inherit; }
.mf-search-panel { max-width: 1340px; margin: 0 auto; padding: .2rem 1.2rem .8rem; display: flex; gap: .5rem; }
.mf-search-panel[hidden] { display: none; }
.mf-search-panel input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .7rem .9rem; border: 1.5px solid var(--mf-line); border-radius: 10px; background: #fff; color: var(--mf-ink); }
.mf-search-panel input[type="search"]:focus { outline: none; border-color: var(--mf-accent); }
.mf-search-panel button[type="submit"] { font: inherit; font-weight: 700; padding: .7rem 1.1rem; border: 0; border-radius: 10px; background: var(--mf-accent); color: #FFFFFF; cursor: pointer; }

/* =========================================================================
   On merite : direction « La voix franche » (validee par rompr le 23/09/2026).
   Reference au pixel pres : https://claude.ai/artifact/65VhhyWCPGqhHERswCtKTn
   Ajoute en fin de media-factory.css par sites/onmerite/setup/02-port-da.py.
   Mobile d'abord : tout se juge a 390 px, les min-width enrichissent ensuite.
   Ordre des sources : la maquette fait foi pour ce qu'elle montre (accueil, quiz, resultat) ;
   pour ce qu'elle ne montre pas (corps d'article), la spec de GPT du 23/09 (corps 18/29).
   ========================================================================= */
:root{
	--om-blanc:#FFFFFF; --om-encre:#211A2C; --om-gris:#5C5663; --om-violet:#5432A8;
	--om-violet-fonce:#432886; --om-citron:#E0F56B; --om-lilas:#EFEAF8; --om-brique:#A33724;
	--om-filet:#E4DEEF;
	--om-titre:'Bricolage Grotesque', ui-rounded, system-ui, sans-serif;
	--om-texte:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Socle typographique : corps 18/29, titres Bricolage, casse naturelle ---- */
body.om{background:var(--om-blanc);color:var(--om-encre);font-family:var(--om-texte);font-size:18px;line-height:1.61}
body.om h1,body.om h2,body.om h3,body.om h4,body.om .entry-title,body.om .page-title{font-family:var(--om-titre);color:var(--om-encre);text-wrap:balance;letter-spacing:-.01em;text-transform:none}
body.om h1,body.om .entry-title{font-weight:800;font-size:33px;line-height:1.12}
body.om h2,body.om .entry-content h2{font-weight:700;font-size:24px;line-height:1.18}
body.om h3,body.om .entry-content h3{font-weight:700;font-size:20px;line-height:1.22}
body.om .entry-content{font-size:18px;line-height:1.61}
body.om .entry-content a:not(.mf-cta):not(.om-cta):not(.om-card):not([class*="btn"]){color:var(--om-violet);text-decoration:underline;text-underline-offset:2px}
body.om .entry-content a:not(.mf-cta):not(.om-cta):not(.om-card):not([class*="btn"]):hover{color:var(--om-violet-fonce)}
body.om :focus-visible{outline:2px solid var(--om-violet);outline-offset:3px}

/* ---- En-tete : 56 px, logo en mots, loupe et menu a droite ---- */
body.om .site-header{background:var(--om-blanc);border-bottom:1px solid var(--om-filet)}
body.om .site-header .inside-header{min-height:55px;padding-top:0;padding-bottom:0;align-items:center;row-gap:0;align-content:center}
body.om .site-logo{display:none}
body.om .main-title{margin:0;font-family:var(--om-titre);font-weight:800;font-size:22px;line-height:1;letter-spacing:-.02em}
body.om .main-title a,body.om .main-title a:hover{color:var(--om-encre);text-decoration:none}
body.om .om-u{background:linear-gradient(transparent 62%,var(--om-citron) 62%,var(--om-citron) 92%,transparent 92%)}
/* Zones tactiles de 44 px, icones de 22 px : le burger chevauche la loupe de 6 px pour que les deux
   dessins restent a 16 px l'un de l'autre, et deborde de 11 px a droite pour finir a 18 px du bord. */
body.om .om-search-btn{appearance:none;background:none;border:0;cursor:pointer;color:var(--om-encre);display:grid;place-items:center;width:44px;height:44px;padding:0}
body.om .om-search-btn svg{width:22px;height:22px}
body.om .mobile-menu-control-wrapper{margin:0 -11px 0 0!important}
body.om .mobile-menu-control-wrapper .menu-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0!important;margin-left:-6px;font-size:22px;line-height:1}
body.om .menu-toggle .gp-icon svg{top:0;fill:none}
body.om .site-description{display:none}

/* ---- Barre des rubriques : texte seul, 14 px semi-gras ---- */
body.om .mf-catbar{background:var(--om-blanc);border-bottom:1px solid var(--om-filet)}
body.om .mf-catbar-inner{gap:18px;padding:10px 18px}
body.om .mf-catbar-link{font-family:var(--om-texte);font-size:14px;font-weight:600;color:var(--om-encre);padding:0}
body.om .mf-catbar-ico{display:none}
body.om .mf-catbar-link:hover{color:var(--om-violet)}
body.om .mf-search-panel button[type="submit"]{background:var(--om-violet);color:var(--om-blanc);border-radius:8px}
/* Sur bureau, le menu de l'en-tete montre deja les trois rubriques : la barre les doublerait.
   Elle reste en place pour le panneau de recherche, qui s'ouvre toujours sous l'en-tete. */
@media (min-width:769px){
	body.om .mf-catbar{border-bottom:0}
	body.om .mf-catbar-inner{display:none}
}
body.om .mf-search-panel input[type="search"]:focus{border-color:var(--om-violet)}

/* ---- Boutons : violet plein, 52 px, angles de 8 px ---- */
body.om .mf-cta,body.om .om-cta,body.om .mfq-btn,body.om .mfq-cta{background:var(--om-violet)!important;color:var(--om-blanc)!important;border-radius:8px!important;min-height:52px;font-family:var(--om-texte);font-weight:700;font-size:17px;box-shadow:none!important;text-transform:none;letter-spacing:0}
body.om .mf-cta:hover,body.om .om-cta:hover,body.om .mfq-btn:hover,body.om .mfq-cta:hover{background:var(--om-violet-fonce)!important}

/* ---- Pastilles de rubrique ---- */
body.om .om-pill{display:inline-block;font:700 12px/1 var(--om-texte);letter-spacing:.04em;padding:6px 9px;border-radius:4px;border:1.5px solid transparent;text-decoration:none}
body.om .om-pill--tests{background:var(--om-citron);color:var(--om-encre)}
body.om .om-pill--societe{background:var(--om-blanc);color:var(--om-violet);border-color:var(--om-violet)}
body.om .om-pill--culture{background:var(--om-lilas);color:var(--om-violet)}

/* ---- Page d'accueil : hero puis trois rubriques ---- */
body.om .om-home{display:grid;font-size:17px;line-height:1.6}
body.om .om-hero{padding:22px 0;display:grid;gap:14px}
body.om .om-kick{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--om-violet)}
body.om .om-hero h1{margin:0}
body.om .om-lede{font-size:17px;color:var(--om-gris);margin:0}
body.om .om-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:0 18px;line-height:1.2;text-decoration:none!important}
body.om .om-meta{font-size:14px;color:var(--om-gris)}
body.om .om-sec{padding:22px 0 6px;display:grid;gap:12px}
body.om .om-sec-t{display:inline-block;justify-self:start;background:var(--om-encre);color:var(--om-blanc);font:700 12px/1 var(--om-texte);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:4px}
body.om .om-card{display:grid;gap:10px;padding-bottom:18px;color:inherit;text-decoration:none!important}
body.om .om-card img{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
body.om .om-card h3{margin:0;font-size:20px;line-height:1.22}
body.om .om-card:hover h3{color:var(--om-violet)!important}
body.om .om-vide{font-size:15px;color:var(--om-gris);border:1.5px dashed var(--om-filet);border-radius:10px;padding:16px;margin:0}
@media (min-width:769px){
	body.om .om-hero{padding:40px 0 36px;max-width:680px}
	body.om h1,body.om .entry-title{font-size:48px;line-height:1.06}
	body.om .om-cta{width:auto;justify-self:start;min-width:260px}
	body.om .om-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
}

/* ---- Quiz : reponses blanches bordees, selection lilas + contour violet ---- */
body.om .mfq-opt{background:var(--om-blanc);border:1.5px solid var(--om-filet);border-radius:12px}
body.om .mfq-opt.is-sel,body.om .mfq-opt[aria-pressed="true"]{background:var(--om-lilas);border-color:var(--om-violet)}
body.om .mf-quiz{background:var(--om-lilas);border-color:var(--om-filet)}

/* ---- Conteneurs : un seul fond blanc ; sur mobile, contenu a 20 px des bords et hero a 22 px
   sous la barre des rubriques, comme la maquette (l'en-tete garde ses 18 px) ---- */
body.om .site-content,body.om .inside-article{background:var(--om-blanc)}
@media (max-width:768px){
	body.om .grid-container{padding-left:20px;padding-right:20px}
	body.om .site-header .inside-header{padding-left:18px;padding-right:18px}
	body.om .site-content{padding:0}
	body.om .site-main{margin:0}
	body.om .inside-article{padding:0 0 24px}
}

/* ---- Pages de comparatif (mf-clp), absentes de la maquette : ses règles s'y appliquent. Titres en
   Bricolage comme partout, pastille citron droite et plate comme les rubriques (pas le tampon penché
   d'OAO), cartes à filet fin sans ombre portée ---- */
body.om .mf-clp-kicker{transform:none;border-radius:4px;font:700 12px/1 var(--om-texte);letter-spacing:.04em;text-transform:none;padding:6px 9px;background:var(--om-citron);color:var(--om-encre)}
/* barre collante : bouton violet comme tous les boutons (le citron reste un fond de repère) */
body.om .mf-sticky-cta{background:var(--om-violet)!important;color:var(--om-blanc)!important;border-radius:8px;box-shadow:none;font-family:var(--om-texte);font-weight:700}
body.om .mf-clp-title{font-family:var(--om-titre)!important;font-weight:800;font-size:33px;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
body.om .mf-clp-sub{font-size:17px;line-height:1.55;color:var(--om-gris)}
body.om .mf-clp-trust{font-size:14px;color:var(--om-gris)}
body.om .mf-clp-trust span::before{color:var(--om-violet)}
body.om .mf5-card{box-shadow:none;border:1.5px solid var(--om-filet);border-radius:12px}
body.om .mf5-titre{font-family:var(--om-titre)!important;font-weight:700!important;font-size:21px;line-height:1.2}
body.om .mf5-check li{font-size:16px;font-weight:500;color:var(--om-encre)}
body.om .mf5-check li.ko{color:var(--om-gris)}
body.om .mf-table{font-size:15px;line-height:1.45}
body.om .mf-table th{background:var(--om-encre);font-weight:700;white-space:nowrap}
body.om .mf-table td{vertical-align:top;min-width:9.5em}
body.om .mf-table td:first-child{min-width:8em}
@media (min-width:769px){
	body.om .mf-clp-title{font-size:44px;line-height:1.08}
}

/* ---- Couverture de dossier sans image (question Q4) : fond lilas et titre encre, plutôt qu'un
   dégradé sombre posé sur du vide (le moteur n'écrit l'attribut style que s'il a une image) ---- */
body.om .mf-cover:not([style]){background:var(--om-lilas);min-height:0}
body.om .mf-cover:not([style])::after{content:none}
body.om .mf-cover:not([style]) .mf-cover-title{color:var(--om-encre)!important;text-shadow:none}

/* ---- Cartes de comparatif sans visuel : pas de cadre vide tant qu'aucune photo n'est posée
   (question Q4) ; sur bureau la carte passe sur une colonne au lieu de garder la place de l'image ---- */
body.om .mf5-media:empty{display:none}
@media (min-width:769px){
	body.om .mf5-card:has(> .mf5-media:empty){grid-template-columns:minmax(0,1fr)}
}

/* ---- Statut de preuve en tête des contenus produits (ADR-034) : discret, jamais caché ---- */
body.om .om-statut{font-size:14px;line-height:1.5;color:var(--om-gris);border-left:3px solid var(--om-citron);padding:2px 0 2px 10px;margin:0 0 18px}
body.om .om-statut strong{color:var(--om-encre)}

/* ---- Photos produit des avis (rompr, 05/10/2026 : « on veut voir le produit quand on en parle ») : visuels officiels
   de la marque, plus grands dans la carte d'offre, et photo dans le texte avec sa légende « Visuel : marque ».
   Proportions du visuel gardées (un rognage couperait le produit), centré et borné en hauteur ; seuls les éléments
   image sont touchés, pas le reste de l'article ---- */
body.om .mf-offre-media{flex:0 0 112px}
body.om .mf-offre-media img{width:112px;height:112px;max-height:none;object-fit:cover;border-radius:12px;background:var(--om-lilas)}
@media (min-width:600px){
	body.om .mf-offre-media{flex-basis:140px}
	body.om .mf-offre-media img{width:140px;height:140px}
}
body.om .om-photo{margin:26px auto;max-width:460px}
body.om .om-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:520px;margin:0 auto;border-radius:14px;background:var(--om-lilas)}
body.om .om-photo figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:var(--om-gris);text-align:center}