/* ==========================================================================
   Mashi Facile — système visuel
   Palette tirée du Bushi : lac Kivu, collines vertes, soleil, hibiscus.
   ========================================================================== */

:root {
	--sky: #F2FAFD;
	--mist: #DCEFF8;
	--lake: #1F5F8B;
	--lake-deep: #134466;
	--leaf: #2E9E5B;
	--hill: #7CC47F;
	--sun: #FFB627;
	--sun-deep: #E89A00;
	--hibiscus: #E0457B;
	--violet: #6C4AB6;
	--ink: #17324A;
	--ink-soft: #4A6278;
	--card: #FFFFFF;
	--good: #2E9E5B;
	--bad: #D6455D;

	--font-display: "Grandstander", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
	--font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

	--step--1: 0.889rem;
	--step-0: 1.125rem;
	--step-1: 1.375rem;
	--step-2: 1.75rem;
	--step-3: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem);
	--step-4: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem);
	--step-5: clamp(2.6rem, 1.4rem + 5vw, 4.6rem);

	--r-tile: 28px;
	--r-card: 22px;
	--r-small: 14px;
	--lift: 0 6px 0 rgba(23, 50, 74, .14);
	--lift-sm: 0 4px 0 rgba(23, 50, 74, .14);
	--wrap: 1180px;
	--gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--sky);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--lake); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { color: var(--lake-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--sun); color: var(--ink); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mf-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.mf-skip:focus { top: 12px; }

.mf-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mf-wrap--text { max-width: calc(720px + 2 * var(--gutter)); }

/* ---------- Boutons ---------- */
.mf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 52px; padding: .6em 1.4em;
	border: 0; border-radius: 999px;
	background: var(--lake); color: #fff;
	font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
	text-decoration: none; line-height: 1.1; cursor: pointer;
	box-shadow: 0 5px 0 var(--lake-deep);
	transition: transform .12s ease, box-shadow .12s ease;
}
.mf-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 0 var(--lake-deep); }
.mf-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lake-deep); }
.mf-btn--sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-deep); }
.mf-btn--sun:hover { color: var(--ink); box-shadow: 0 6px 0 var(--sun-deep); }
.mf-btn--sun:active { box-shadow: 0 1px 0 var(--sun-deep); }
.mf-btn--ghost { background: var(--card); color: var(--lake); box-shadow: 0 5px 0 var(--mist); }
.mf-btn--ghost:hover { color: var(--lake-deep); box-shadow: 0 6px 0 var(--mist); }
.mf-btn--ghost:active { box-shadow: 0 1px 0 var(--mist); }
.mf-btn--small { min-height: 44px; padding: .5em 1.1em; font-size: var(--step--1); }
.mf-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.mf-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mf-link { font-family: var(--font-display); font-weight: 700; }

/* Bouton lecture audio */
.mf-play {
	--size: 52px;
	flex: none; display: inline-grid; place-items: center;
	width: var(--size); height: var(--size);
	border: 0; border-radius: 50%;
	background: var(--sun); color: var(--ink);
	box-shadow: 0 4px 0 var(--sun-deep);
	cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.mf-play svg { width: 46%; height: 46%; fill: currentColor; margin-left: 6%; }
.mf-play:hover { transform: scale(1.06); }
.mf-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-deep); }
.mf-play.is-playing { background: var(--hibiscus); color: #fff; box-shadow: 0 4px 0 #B42F5D; animation: mf-pulse 1s ease-in-out infinite; }
.mf-play--xl { --size: 76px; }
@keyframes mf-pulse { 50% { transform: scale(1.08); } }

/* ---------- En-tête ---------- */
.mf-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 3px solid var(--mist); }
.admin-bar .mf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mf-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .mf-header { top: 0; } }
.mf-header__inner { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.mf-brand { flex: none; margin-right: auto; }
.mf-brand .custom-logo { max-height: 56px; width: auto; display: block; }
.mf-wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mf-wordmark__mascot { width: 52px; height: 52px; }
.mf-wordmark__text { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; color: var(--lake); }
.mf-wordmark:hover .mf-wordmark__text { color: var(--lake-deep); }

.mf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.mf-nav__list a {
	display: block; padding: .55em 1em; border-radius: 999px;
	font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
	color: var(--ink); text-decoration: none;
}
.mf-nav__list a:hover { background: var(--mist); color: var(--lake-deep); }
.mf-nav__list .current-menu-item > a,
.mf-nav__list .current_page_item > a,
.mf-nav__list .current-menu-ancestor > a,
.mf-nav__list a[aria-current="page"] { background: var(--lake); color: #fff; }
.mf-nav__list .sub-menu { display: none; }

.mf-stars {
	flex: none; display: inline-flex; align-items: center; gap: 6px;
	padding: .35em .9em .35em .6em; border-radius: 999px;
	background: #FFF4D6; color: var(--ink); text-decoration: none;
	font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
	box-shadow: inset 0 0 0 2px #FFE09A;
}
.mf-stars svg { width: 26px; height: 26px; fill: var(--sun); stroke: var(--sun-deep); stroke-width: 1.2; }
.mf-stars.is-bumped svg { animation: mf-spin .7s ease; }
@keyframes mf-spin { 40% { transform: scale(1.5) rotate(25deg); } }

.mf-menu-toggle { display: none; }

@media (max-width: 900px) {
	.mf-header__inner { flex-wrap: wrap; min-height: 68px; gap: 10px; }
	.mf-menu-toggle {
		display: inline-flex; align-items: center; gap: 8px; order: 3;
		min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
		background: var(--mist); color: var(--ink); font: 700 1rem var(--font-display); cursor: pointer;
	}
	.mf-menu-toggle__bars, .mf-menu-toggle__bars::before, .mf-menu-toggle__bars::after { display: block; width: 18px; height: 3px; border-radius: 2px; background: currentColor; position: relative; }
	.mf-menu-toggle__bars::before, .mf-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.mf-menu-toggle__bars::before { top: -6px; }
	.mf-menu-toggle__bars::after { top: 6px; }
	.mf-stars { order: 2; }
	.mf-nav { order: 4; flex-basis: 100%; display: none; padding-bottom: 14px; }
	.mf-nav.is-open { display: block; }
	.mf-nav__list { flex-direction: column; }
	.mf-nav__list a { padding: .8em 1em; font-size: 1.2rem; }
	.mf-wordmark__mascot { width: 44px; height: 44px; }
	.mf-wordmark__text { font-size: 1.35rem; }
}
@media (max-width: 440px) {
	.mf-header__inner { flex-wrap: wrap; }
	.mf-menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mf-menu-toggle { width: 48px; justify-content: center; padding: 0; }
	.mf-wordmark__mascot { width: 38px; height: 38px; }
	.mf-wordmark__text { font-size: 1.2rem; }
}

/* ---------- En-têtes de page ---------- */
.mf-page-head { padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); background: linear-gradient(180deg, #CFEAF7, var(--sky)); }
.mf-page-head__title { color: var(--lake-deep); margin-bottom: .3em; }
.mf-page-head__lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }
.mf-page-head__lead p:last-child { margin-bottom: 0; }
.mf-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--font-display); font-weight: 700; text-decoration: none; color: inherit; opacity: .9; }
.mf-back::before { content: ""; width: 10px; height: 10px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }
.mf-back:hover { color: inherit; opacity: 1; text-decoration: underline; }

/* ---------- Contenu éditorial ---------- */
.mf-prose { font-size: 1.15rem; line-height: 1.7; }
.mf-prose > * + * { margin-top: 1em; }
.mf-prose--app > p:first-child { font-size: var(--step-1); color: var(--ink-soft); }
.mf-prose h2 { margin-top: 1.6em; color: var(--lake-deep); }
.mf-prose h3 { margin-top: 1.4em; }
.mf-prose img { border-radius: var(--r-card); }
.mf-prose blockquote { margin: 1.4em 0; padding: 18px 24px; background: #fff; border-left: 6px solid var(--hibiscus); border-radius: 0 var(--r-small) var(--r-small) 0; font-size: var(--step-1); }
.mf-prose :where(ul, ol):not([class*="mf-"]) { padding-left: 1.3em; }
.mf-prose :where(ul, ol):not([class*="mf-"]) > li + li { margin-top: .4em; }
.mf-prose--app { font-size: var(--step-0); }
.mf-prose--app > * + * { margin-top: 0; }
.mf-prose .alignwide { margin-left: calc(-1 * min(120px, 8vw)); margin-right: calc(-1 * min(120px, 8vw)); max-width: none; }
.mf-prose .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.mf-prose .wp-block-button__link { border-radius: 999px; background: var(--lake); font-family: var(--font-display); font-weight: 700; }
.mf-prose table { width: 100%; border-collapse: collapse; }
.mf-prose th, .mf-prose td { padding: 10px; border-bottom: 2px solid var(--mist); text-align: left; }
.mf-article { padding-bottom: 56px; }
.mf-page-head--article .mf-page-head__title { font-size: var(--step-4); }
.mf-article__meta { color: var(--ink-soft); font-weight: 700; margin-bottom: .4em; }
.mf-article__media { margin-bottom: 32px; }
.mf-article__media img { width: 100%; border-radius: var(--r-tile); display: block; }
.mf-article__foot { margin-top: 40px; }
.mf-article__foot .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.mf-article__foot .nav-links a { display: block; height: 100%; padding: 16px 20px; background: #fff; border-radius: var(--r-small); text-decoration: none; font-family: var(--font-display); font-weight: 700; box-shadow: var(--lift-sm); }
.mf-article__foot .nav-next { text-align: right; }
.mf-article__navlabel { display: block; font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
.mf-comments { margin-top: 48px; }
.mf-comments__list { padding-left: 0; list-style: none; }
.comment-body { background: #fff; padding: 16px 20px; border-radius: var(--r-small); margin-bottom: 14px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 14px; border: 3px solid var(--mist); border-radius: 14px; font: inherit; }
.comment-form .submit { min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--lake); color: #fff; font: 700 1rem var(--font-display); cursor: pointer; }

/* Pagination */
.pagination, .navigation.pagination { margin-top: 32px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 14px; background: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 800; box-shadow: 0 3px 0 var(--mist); }
.page-numbers.current { background: var(--lake); color: #fff; box-shadow: none; }
.page-numbers.dots { background: none; box-shadow: none; }

/* ---------- Publicité ---------- */
.mf-ad { max-width: var(--wrap); margin: 24px auto; padding: 0 var(--gutter); text-align: center; }
.mf-ad__label { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: 4px; }
.mf-prose .mf-ad { padding: 0; margin: 2em 0; }

/* ---------- Pied de page ---------- */
.mf-footer { margin-top: clamp(32px, 6vw, 72px); color: #E8F4FB; }
.mf-hills--footer { display: block; width: 100%; height: clamp(70px, 10vw, 130px); margin-bottom: -2px; }
.mf-footer__body { background: var(--lake); padding: 20px 0 28px; }
.mf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 28px; }
.mf-footer__name { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #fff; margin-bottom: .3em; }
.mf-footer a { color: #fff; }
.mf-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mf-footer__nav a { font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.mf-footer__nav .mf-nav__list a { padding: 2px 0; border-radius: 0; color: #fff; background: none; }
.mf-footer__nav a:hover { text-decoration: underline; }
.mf-footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.mf-footer__social a { display: inline-block; padding: .35em .9em; border-radius: 999px; background: rgba(255, 255, 255, .14); text-decoration: none; font-weight: 700; }
.mf-footer__social a:hover { background: rgba(255, 255, 255, .26); }
.mf-footer__label { font-weight: 700; }
.mf-app-links { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-app-badge { display: inline-block; padding: .6em 1.1em; border-radius: 12px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.mf-widget__title, .mf-footer__extra h2, .mf-footer__extra h3 { font-size: 1.15rem; color: #fff; margin-bottom: .5em; }
.mf-footer__extra ul { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 6px; }
.mf-footer__extra .mf-widget + .mf-widget { margin-top: 18px; }
.mf-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 2px solid rgba(255, 255, 255, .18); font-size: .95rem; }
.mf-footer__legal p { margin: 0; }
@media (max-width: 760px) { .mf-footer__grid { grid-template-columns: 1fr; } }

/* Décor (collines du pied de page) */
.mf-hills .h1 { fill: var(--hill); }
.mf-hills .h2 { fill: var(--leaf); }
.mf-hills .lake { fill: var(--lake); }
.mf-hills .wave { stroke: rgba(255, 255, 255, .45); stroke-width: 4; stroke-linecap: round; fill: none; }
.mf-empty { color: var(--ink-soft); font-size: var(--step-1); }
.mf-empty-state { text-align: center; max-width: 560px; }
.mf-empty-state__mascot { width: 140px; height: 140px; margin: 0 auto 12px; display: block; }
.mf-empty-state h1, .mf-empty-state h2 { font-size: var(--step-3); color: var(--lake-deep); }
.mf-empty-state p { color: var(--ink-soft); font-size: var(--step-1); }
.mf-section { padding: clamp(48px, 7vw, 88px) 0; }
.mf-section--tight { padding: clamp(28px, 4vw, 48px) 0; }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- En-tête des pages Contact et textes légaux (1.3) ---------- */
.mf-page-head--deco { position: relative; overflow: hidden; padding-bottom: clamp(28px, 4vw, 48px); }
.mf-page-head--deco::after { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 182, 39, .35), rgba(255, 182, 39, 0) 70%); pointer-events: none; }
.mf-page-head--deco .mf-wrap { position: relative; }
.mf-page-head__kicker { display: inline-block; margin: 0 0 .6em; padding: .3em .9em; border-radius: 999px; background: #fff; color: var(--hibiscus); font-family: var(--font-display); font-weight: 800; font-size: var(--step--1); letter-spacing: .02em; box-shadow: 0 3px 0 var(--mist); }
.mf-page-head__mascot { position: absolute; right: var(--gutter); bottom: -12px; width: clamp(84px, 11vw, 140px); height: auto; transform: rotate(6deg); z-index: 1; }
@media (max-width: 640px) { .mf-page-head__mascot { width: 72px; bottom: -6px; } .mf-page-head--deco .mf-page-head__title { padding-right: 76px; } }
.mf-prose--legal { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(40px, 6vw, 72px); }
.mf-article--contact .mf-prose--app { padding-bottom: clamp(40px, 6vw, 72px); }

/* Liens légaux du pied de page */
.mf-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.mf-footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.mf-footer__legal-links a { color: inherit; font-weight: 700; text-decoration: none; opacity: .92; }
.mf-footer__legal-links a:hover { text-decoration: underline; opacity: 1; }
.mf-footer__legal-links .mf-footer__mail a { display: inline-flex; gap: .4em; align-items: center; }