/* ==========================================================================
   Mashi Facile Studio — composants et jeux
   Palette tirée du Bushi : lac Kivu, collines vertes, soleil, hibiscus.
   ========================================================================== */

:where(: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);
}

/* ---------- 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); } }

/* ---------- Accueil : héros ---------- */
.mf-hero {
	position: relative;
	background: linear-gradient(180deg, #CFEAF7 0%, var(--sky) 70%);
	padding: clamp(40px, 7vw, 88px) 0 0;
	overflow: hidden;
}
.mf-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; position: relative; z-index: 2; }
.mf-hero__title { font-size: var(--step-5); color: var(--lake-deep); max-width: 13ch; margin-bottom: .35em; }
.mf-hero__lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 34ch; margin-bottom: 1.4em; line-height: 1.5; }
.mf-hero__card { justify-self: end; width: 100%; max-width: 470px; }
.mf-hero__land { position: relative; height: clamp(120px, 16vw, 200px); margin-top: clamp(-40px, -2vw, -10px); }
.mf-hero__land .mf-hills { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.mf-hero__mascot { position: absolute; z-index: 1; left: 51%; bottom: 57%; width: clamp(76px, 8vw, 112px); height: auto; transform: translateX(-50%) rotate(-6deg); }

.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; }

/* Mot du jour */
.mf-wotd {
	position: relative;
	background: var(--card); border-radius: var(--r-tile);
	padding: 26px 28px 24px;
	box-shadow: 0 10px 0 rgba(19, 68, 102, .16);
	transform: rotate(1.5deg);
}
.mf-wotd::before {
	content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; margin-left: -46px;
	background: rgba(255, 182, 39, .75); border-radius: 6px; transform: rotate(-3deg);
}
.mf-wotd__label { font-family: var(--font-display); font-weight: 700; color: var(--hibiscus); font-size: 1.1rem; margin-bottom: 14px; }
.mf-wotd__body { display: flex; gap: 20px; align-items: center; }
.mf-wotd__visual { flex: none; width: 96px; height: 96px; border-radius: var(--r-card); background: var(--mist); display: grid; place-items: center; overflow: hidden; font-size: 54px; line-height: 1; }
.mf-wotd__visual img { width: 100%; height: 100%; object-fit: cover; }
.mf-wotd__visual--letter { font-family: var(--font-display); font-weight: 800; color: var(--lake); }
.mf-wotd__words { min-width: 0; }
.mf-wotd__mashi { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.05; color: var(--lake-deep); margin: 0 0 .15em; overflow-wrap: break-word; }
.mf-wotd__mashi--empty { font-size: var(--step-2); }
.mf-wotd__pron { color: var(--ink-soft); font-style: italic; margin: 0 0 .3em; }
.mf-wotd__tr { font-size: var(--step-1); font-weight: 700; margin: 0; }
.mf-wotd__tr2 { color: var(--ink-soft); margin: 0; }
.mf-wotd__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 3px dashed var(--mist); }

@media (max-width: 860px) {
	.mf-hero__grid { grid-template-columns: 1fr; }
	.mf-hero__card { justify-self: start; }
	.mf-hero__mascot { left: auto; right: 6%; bottom: 52%; transform: rotate(-6deg); }
}
@media (max-width: 480px) {
	.mf-wotd { padding: 22px 18px 20px; transform: none; }
	.mf-wotd__visual { width: 72px; height: 72px; font-size: 42px; }
}

/* ---------- Sections ---------- */
.mf-section { padding: clamp(48px, 7vw, 88px) 0; }
.mf-section--tight { padding: clamp(28px, 4vw, 48px) 0; }
.mf-section--lake { background: var(--lake); color: #fff; }
.mf-section--lake h2 { color: #fff; }
.mf-section--lake .mf-link { color: #FFE09A; }
.mf-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.mf-section__head h2 { margin: 0; }
.mf-empty { color: var(--ink-soft); font-size: var(--step-1); }

/* ---------- Thèmes (tuiles) ---------- */
.mf-themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.mf-theme__link {
	position: relative; display: flex; flex-direction: column; height: 100%;
	padding: 22px 22px 20px; border-radius: var(--r-tile);
	background: var(--tile); color: var(--tile-ink);
	text-decoration: none; overflow: hidden;
	box-shadow: 0 7px 0 color-mix(in srgb, var(--tile) 70%, #000);
	transition: transform .14s ease, box-shadow .14s ease;
}
.mf-theme__link::after {
	content: ""; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border-radius: 50%;
	background: rgba(255, 255, 255, .16);
}
.mf-theme__link:hover { color: var(--tile-ink); transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 10px 0 color-mix(in srgb, var(--tile) 70%, #000); }
.mf-theme__link:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--tile) 70%, #000); }
.mf-theme__emoji { font-size: 52px; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); }
.mf-theme__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.05; }
.mf-theme__intro { margin-top: 6px; font-size: 1rem; line-height: 1.4; opacity: .92; }
@media (max-width: 600px) {
	.mf-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mf-theme__link { padding: 16px 14px 14px; border-radius: 22px; }
	.mf-theme__emoji { font-size: 40px; margin-bottom: 10px; }
	.mf-theme__name { font-size: 1.3rem; }
	.mf-theme__intro { display: none; }
}
.mf-theme__count { margin-top: auto; padding-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; opacity: .9; }

/* ---------- Jeux (sélecteur) ---------- */
.mf-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.mf-games__item { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: var(--r-tile); background: var(--card); box-shadow: var(--lift); }
.mf-games__art { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-card); margin-bottom: 18px; }
.mf-games__art svg { width: 62%; }
.mf-games__art { background: var(--tile, var(--lake)); }
.mf-games__name { margin-bottom: .3em; }
.mf-games__desc { color: var(--ink-soft); flex: 1; }
@media (max-width: 600px) { .mf-games { grid-template-columns: 1fr; } .mf-games__item { display: grid; grid-template-columns: 120px 1fr; column-gap: 18px; align-items: center; } .mf-games__art { grid-row: span 3; margin: 0; aspect-ratio: 1; } .mf-games__desc { margin-bottom: .6em; } .mf-games__item .mf-btn { justify-self: start; } }
@media (max-width: 420px) { .mf-games__item { grid-template-columns: 84px 1fr; padding: 18px; } }

/* ---------- Articles ---------- */
.mf-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.mf-post-card__link { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--r-card); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--lift-sm); }
.mf-post-card__link:hover { color: var(--ink); }
.mf-post-card__link:hover .mf-post-card__title { color: var(--lake); text-decoration: underline; }
.mf-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--mist); overflow: hidden; }
.mf-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-post-card__placeholder { display: block; width: 100%; height: 100%; }
.mf-post-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.mf-post-card__date { color: var(--ink-soft); font-size: .95rem; }
.mf-post-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.2; }
.mf-post-card__excerpt { color: var(--ink-soft); font-size: 1rem; }

/* ---------- Bandeau parents ---------- */
.mf-parents { background: var(--violet); color: #fff; padding: clamp(44px, 6vw, 72px) 0; }
.mf-parents__inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 28px 48px; align-items: center; }
.mf-parents h2 { color: #fff; }
.mf-parents p { margin: 0; max-width: 46ch; font-size: var(--step-1); line-height: 1.5; }
.mf-parents__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf-parents__facts li { position: relative; padding-left: 34px; font-weight: 700; }
.mf-parents__facts li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2317324A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
@media (max-width: 960px) { .mf-parents__inner { grid-template-columns: 1fr; } .mf-parents .mf-btn { justify-self: start; } }

/* Retour */
.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; }
.mf-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.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; }

/* Leçon (thème) */
.mf-lesson-head { position: relative; background: var(--tile); color: var(--tile-ink); padding: clamp(28px, 4vw, 48px) 0 clamp(36px, 5vw, 56px); overflow: hidden; }
.mf-lesson-head::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.mf-lesson-head__inner { position: relative; z-index: 1; }
.mf-lesson-head__emoji { display: block; font-size: clamp(56px, 8vw, 88px); line-height: 1; margin-bottom: 10px; }
.mf-lesson-head__title { color: inherit; margin-bottom: .2em; }
.mf-lesson-head__intro { font-size: var(--step-1); margin: 0; max-width: 40ch; }
.mf-lesson-head__desc { margin-top: 1em; max-width: 60ch; }
.mf-step { display: flex; align-items: center; gap: 14px; font-size: var(--step-2); }
.mf-step__n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: var(--ink); font-size: 1.3rem; }

/* Grille de mots */
.mf-word-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
@media (max-width: 600px) { .mf-word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mf-word-card { padding: 16px 10px 14px; } .mf-word-card__visual { width: 76px; height: 76px; font-size: 42px; } .mf-word-card__mashi { font-size: 1.35rem; } }
.mf-word-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 18px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--lift-sm); }
.mf-word-card__visual { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); font-size: 54px; line-height: 1; overflow: hidden; margin-bottom: 12px; }
.mf-word-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.mf-word-card__visual--letter { font-family: var(--font-display); font-weight: 800; color: var(--lake); }
.mf-word-card__mashi { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.05; color: var(--lake-deep); text-decoration: none; word-break: break-word; }
.mf-word-card__mashi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mf-word-card__mashi:hover { text-decoration: underline; }
.mf-word-card__tr { margin-top: 6px; font-weight: 700; }
.mf-word-card__tr2 { color: var(--ink-soft); font-size: .95rem; }
.mf-word-card .mf-play { position: relative; z-index: 1; margin-top: 12px; --size: 46px; }

/* Dictionnaire */
.mf-search { display: flex; gap: 10px; max-width: 640px; margin: 20px 0; }
.mf-search input[type="search"] { flex: 1; min-width: 0; min-height: 56px; padding: 0 22px; border: 3px solid var(--mist); border-radius: 999px; background: #fff; font: inherit; font-size: var(--step-1); color: var(--ink); }
.mf-search input[type="search"]:focus { outline: none; border-color: var(--sun); }
.mf-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-letters a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; background: #fff; color: var(--lake); font-family: var(--font-display); font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 var(--mist); }
.mf-letters a:hover { background: var(--mist); }
.mf-letters a[aria-current="page"] { background: var(--lake); color: #fff; box-shadow: 0 3px 0 var(--lake-deep); }
.mf-count { color: var(--ink-soft); font-weight: 700; }
.mf-dict { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--r-card); box-shadow: var(--lift-sm); overflow: hidden; }
.mf-dict__row { display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 16px; align-items: center; padding: 12px 18px; }
.mf-dict__row + .mf-dict__row { border-top: 2px solid var(--sky); }
.mf-dict__visual { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--mist); font-size: 30px; line-height: 1; overflow: hidden; }
.mf-dict__visual img { width: 100%; height: 100%; object-fit: cover; }
.mf-dict__visual--letter { font-family: var(--font-display); font-weight: 800; color: var(--lake); }
.mf-dict__mashi { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); color: var(--lake-deep); text-decoration: none; }
.mf-dict__mashi:hover { text-decoration: underline; }
.mf-dict__tr { font-weight: 700; }
.mf-dict__tr2 { color: var(--ink-soft); }
.mf-dict__audio .mf-play { --size: 46px; }
@media (max-width: 720px) {
	.mf-dict__row { grid-template-columns: 52px 1fr 46px; grid-template-areas: "v m a" "v t a" "v t2 a"; row-gap: 0; }
	.mf-dict__visual { grid-area: v; }
	.mf-dict__mashi { grid-area: m; }
	.mf-dict__tr { grid-area: t; }
	.mf-dict__tr2 { grid-area: t2; font-size: .95rem; }
	.mf-dict__audio { grid-area: a; }
	.mf-search { flex-direction: column; }
}

/* Fiche mot */
.mf-word { background: linear-gradient(180deg, var(--tile) 0, var(--tile) 220px, var(--sky) 220px); padding: 28px 0 64px; }
.mf-word .mf-back { color: var(--tile-ink); }
.mf-word__inner { max-width: calc(820px + 2 * var(--gutter)); }
.mf-word__card { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: clamp(22px, 4vw, 40px); background: var(--card); border-radius: var(--r-tile); box-shadow: 0 10px 0 rgba(19, 68, 102, .14); }
.mf-word__visual { width: clamp(110px, 18vw, 170px); height: clamp(110px, 18vw, 170px); display: grid; place-items: center; border-radius: var(--r-card); background: var(--mist); font-size: clamp(64px, 10vw, 100px); line-height: 1; overflow: hidden; }
.mf-word__visual img { width: 100%; height: 100%; object-fit: cover; }
.mf-word__visual--letter { font-family: var(--font-display); font-weight: 800; color: var(--lake); }
.mf-word__mashi { font-size: var(--step-5); color: var(--lake-deep); margin: 0 0 .1em; word-break: break-word; }
.mf-word__pron { color: var(--ink-soft); font-style: italic; margin: 0 0 .4em; }
.mf-word__tr { font-size: var(--step-2); font-weight: 700; margin: 0; }
.mf-word__tr2 { color: var(--ink-soft); font-size: var(--step-1); margin: 0; }
@media (max-width: 640px) { .mf-word__card { grid-template-columns: 1fr; justify-items: start; } }
.mf-example { margin: 28px 0 0; padding: 24px 28px; background: #FFF4D6; border-radius: var(--r-card); border-left: 8px solid var(--sun); }
.mf-example blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.25; color: var(--ink); }
.mf-example blockquote p { margin: 0 0 .4em; }
.mf-example figcaption { display: grid; gap: 2px; font-size: var(--step-0); }
.mf-example__second { color: var(--ink-soft); }
.mf-word__notes { margin-top: 28px; }
.mf-word__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; }

/* Puces */
.mf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.mf-chips a { display: inline-block; padding: .4em .95em; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 var(--mist); }
.mf-chips a:hover { background: var(--mist); }
.mf-chips a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
.mf-chips--nav { margin-top: 16px; }

/* États vides */
.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); }

/* ==========================================================================
   Jeux
   ========================================================================== */
.mf-game { position: relative; min-height: 200px; }
.mf-game__status { text-align: center; color: var(--ink-soft); font-size: var(--step-1); padding: 40px 0; }
.mf-game__empty { text-align: center; padding: 32px 20px; background: var(--card); border-radius: var(--r-tile); box-shadow: var(--lift-sm); }
.mf-game__empty .mf-mascot { width: 110px; height: 110px; display: block; margin: 0 auto 8px; }
.mf-game__empty p { font-size: var(--step-1); color: var(--ink-soft); max-width: 40ch; margin: 0 auto 16px; }
.mf-game__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); font-size: 1.1rem; }
.mf-progress { flex: 1; min-width: 140px; max-width: 360px; height: 14px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.mf-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--leaf); transition: width .3s ease; }

/* Cartes à retourner */
.mf-flash { max-width: 520px; margin: 0 auto; }
.mf-flash__stage { perspective: 1400px; }
.mf-flash__card {
	position: relative; width: 100%; aspect-ratio: 4 / 4.2; max-height: 560px;
	border: 0; padding: 0; background: none; cursor: pointer;
	transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
	font: inherit; color: inherit;
}
.mf-flash__card.is-flipped { transform: rotateY(180deg); }
.mf-flash__face {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	padding: 28px; border-radius: var(--r-tile); backface-visibility: hidden; -webkit-backface-visibility: hidden;
	background: var(--card); box-shadow: 0 10px 0 rgba(19, 68, 102, .14); text-align: center;
}
.mf-flash__face--back { transform: rotateY(180deg); background: var(--violet); color: #fff; box-shadow: 0 10px 0 #4C3185; }
.mf-flash__visual { width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--mist); font-size: clamp(64px, 16vw, 120px); line-height: 1; overflow: hidden; }
.mf-flash__visual img { width: 100%; height: 100%; object-fit: cover; }
.mf-flash__mashi { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem); line-height: 1.05; color: var(--lake-deep); word-break: break-word; }
.mf-flash__hint { color: var(--ink-soft); font-size: 1rem; }
.mf-flash__tr { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 3vw, 3rem); line-height: 1.1; }
.mf-flash__tr2 { font-size: var(--step-1); opacity: .9; }
.mf-flash__ex { margin-top: 10px; font-size: 1rem; opacity: .9; max-width: 32ch; }
.mf-flash__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.mf-flash__controls .mf-btn { min-width: 56px; }
.mf-flash__known { display: flex; justify-content: center; margin-top: 14px; }
.mf-flash__known .mf-btn.is-known { background: var(--leaf); color: #fff; box-shadow: 0 5px 0 #1F7442; }
.mf-arrow { width: 14px; height: 14px; border-left: 4px solid currentColor; border-bottom: 4px solid currentColor; border-radius: 2px; }
.mf-arrow--prev { transform: rotate(45deg); margin-left: 6px; }
.mf-arrow--next { transform: rotate(-135deg); margin-right: 6px; }

/* Mémoire */
.mf-memory__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; }
@media (max-width: 560px) { .mf-memory__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.mf-mem { position: relative; aspect-ratio: 3 / 3.6; border: 0; padding: 0; background: none; cursor: pointer; perspective: 900px; font: inherit; color: inherit; }
.mf-mem__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s ease; }
.mf-mem.is-open .mf-mem__inner, .mf-mem.is-matched .mf-mem__inner { transform: rotateY(180deg); }
.mf-mem__face { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; }
.mf-mem__face--back {
	background-color: var(--leaf);
	background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 18%, transparent 19%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 10px, transparent 10px 20px);
	box-shadow: 0 5px 0 #1F7442;
}
.mf-mem__face--front { transform: rotateY(180deg); background: var(--card); box-shadow: 0 5px 0 var(--mist); }
.mf-mem__word { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, .7rem + 1.6vw, 1.6rem); line-height: 1.05; color: var(--lake-deep); word-break: break-word; }
.mf-mem__pic { display: grid; gap: 4px; justify-items: center; }
.mf-mem__pic .mf-mem__emoji { font-size: clamp(36px, 8vw, 58px); line-height: 1; }
.mf-mem__pic img { width: 70%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.mf-mem__pic small { font-size: .85rem; color: var(--ink-soft); line-height: 1.2; }
.mf-mem.is-matched .mf-mem__face--front { background: #E3F6E9; box-shadow: 0 5px 0 #A8DDB9; }
.mf-mem.is-wrong .mf-mem__inner { animation: mf-shake .4s ease; }

/* Quiz */
.mf-quiz { max-width: 760px; margin: 0 auto; }
.mf-quiz__prompt { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px; margin-bottom: 20px; background: var(--card); border-radius: var(--r-tile); box-shadow: var(--lift); text-align: center; }
.mf-quiz__ask { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); font-size: var(--step-1); margin: 0; }
.mf-quiz__word { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem); color: var(--lake-deep); line-height: 1.05; margin: 0; }
.mf-quiz__word[hidden] { display: none; }
.mf-quiz__options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mf-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 150px; padding: 16px; border: 4px solid transparent; border-radius: var(--r-card); background: var(--card); box-shadow: var(--lift-sm); cursor: pointer; font: inherit; color: var(--ink); transition: transform .12s ease; }
.mf-opt:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--mist); }
.mf-opt__visual { font-size: 56px; line-height: 1; }
.mf-opt__visual img { width: 84px; height: 84px; object-fit: cover; border-radius: 16px; }
.mf-opt__label { font-weight: 700; font-size: var(--step-0); }
.mf-opt.is-right { border-color: var(--good); background: #E3F6E9; }
.mf-opt.is-wrong { border-color: var(--bad); background: #FCE6EA; animation: mf-shake .4s ease; }
.mf-opt[disabled] { cursor: default; }
.mf-quiz__feedback { min-height: 3.2em; margin-top: 18px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.mf-quiz__feedback.is-right { color: var(--good); }
.mf-quiz__feedback.is-wrong { color: var(--bad); }
.mf-quiz__next { display: flex; justify-content: center; }
@media (max-width: 420px) { .mf-opt { min-height: 124px; } .mf-opt__visual { font-size: 44px; } }

/* Fin de partie */
.mf-win { text-align: center; padding: 36px 24px; background: var(--card); border-radius: var(--r-tile); box-shadow: var(--lift); max-width: 560px; margin: 0 auto; }
.mf-win .mf-mascot { width: 130px; height: 130px; display: block; margin: 0 auto 8px; animation: mf-hop .7s ease 2; }
.mf-win__title { font-family: var(--font-display); font-weight: 800; line-height: 1.15; font-size: var(--step-3); color: var(--lake-deep); margin-bottom: .2em; }
.mf-win__stars { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); color: var(--sun-deep); margin-bottom: 1em; }
@keyframes mf-hop { 40% { transform: translateY(-18px) rotate(-6deg); } }
@keyframes mf-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }


/* ==========================================================================
   Jeux créés, page Jeux, nouveaux types (Studio)
   ========================================================================== */
.mf-block { margin-bottom: clamp(32px, 5vw, 56px); }
.mf-block__title { font-size: var(--step-2); color: var(--lake-deep); margin-bottom: 18px; }
.mf-game-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.mf-game-card__link {
	position: relative; display: flex; flex-direction: column; height: 100%; padding: 18px 18px 20px; overflow: hidden;
	border-radius: var(--r-tile); background: var(--tile); color: var(--tile-ink); text-decoration: none;
	box-shadow: 0 7px 0 color-mix(in srgb, var(--tile) 70%, #000); transition: transform .14s ease, box-shadow .14s ease;
}
.mf-game-card__link:hover { color: var(--tile-ink); transform: translateY(-3px) rotate(.5deg); box-shadow: 0 10px 0 color-mix(in srgb, var(--tile) 70%, #000); }
.mf-game-card__link:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--tile) 70%, #000); }
.mf-game-card__art { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 14px; border-radius: var(--r-card); background: rgba(255, 255, 255, .16); overflow: hidden; }
.mf-game-card__art svg { width: 62%; }
.mf-game-card__art img { width: 100%; height: 100%; object-fit: cover; }
.mf-game-card__emoji { font-size: 64px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .14)); }
.mf-game-card__type { font-weight: 700; font-size: .95rem; opacity: .9; }
.mf-game-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.15; margin: 2px 0 14px; }
.mf-game-card__play { margin-top: auto; align-self: flex-start; padding: .45em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: .95rem; }

.mf-quick__head { margin-bottom: 22px; }
.mf-quick__title { font-size: var(--step-3); color: var(--lake-deep); margin-bottom: .2em; }
.mf-quick__desc { color: var(--ink-soft); font-size: var(--step-1); margin: 0; }
.mf-game-intro { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink-soft); margin: 0 0 18px; }
.mf-embed { margin: 1.5em 0; }
.mf-embed--narrow { max-width: 480px; }

/* Lis / trouve le mot Mashi */
.mf-quiz__visual { width: 120px; height: 120px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); font-size: 66px; line-height: 1; overflow: hidden; }
.mf-quiz__visual img { width: 100%; height: 100%; object-fit: cover; }
.mf-quiz__clue { font-weight: 700; font-size: var(--step-1); margin: 0; }
.mf-opt--text { min-height: 96px; }
.mf-opt__mashi { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem); color: var(--lake-deep); line-height: 1.1; overflow-wrap: anywhere; }

/* Relie les paires */
.mf-match { max-width: 760px; margin: 0 auto; }
.mf-match__help { text-align: center; color: var(--ink-soft); margin: 0 0 14px; }
.mf-match__board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mf-match__col { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.mf-match__item {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 72px; padding: 10px 14px;
	border: 4px solid transparent; border-radius: var(--r-card); background: var(--card); color: var(--ink);
	box-shadow: var(--lift-sm); cursor: pointer; font: inherit; font-weight: 700; transition: transform .12s ease;
}
.mf-match__item--word span { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); color: var(--lake-deep); overflow-wrap: anywhere; }
.mf-match__item--pic { justify-content: flex-start; }
.mf-match__visual { flex: none; font-size: 36px; line-height: 1; }
.mf-match__visual img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.mf-match__item:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--mist); }
.mf-match__item.is-picked { border-color: var(--sun); background: #FFF4D6; }
.mf-match__item.is-right { border-color: var(--good); background: #E3F6E9; cursor: default; }
.mf-match__item.is-wrong { border-color: var(--bad); background: #FCE6EA; animation: mf-shake .4s ease; }

/* Écris le mot */
.mf-spell { max-width: 720px; margin: 0 auto; }
.mf-spell__slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 18px; }
.mf-spell__slot, .mf-spell__tile {
	display: grid; place-items: center; width: 52px; height: 60px; border-radius: 14px; font: 800 1.7rem var(--font-display); text-transform: lowercase;
}
.mf-spell__slot { border: 3px dashed var(--mist); background: #fff; color: var(--lake-deep); cursor: pointer; }
.mf-spell__slot.is-filled { border-style: solid; border-color: var(--lake); }
.mf-spell__slot.is-hint { border-color: var(--sun); background: #FFF4D6; }
.mf-spell__slot.is-right { border-color: var(--good); background: #E3F6E9; }
.mf-spell__slot.is-wrong { border-color: var(--bad); background: #FCE6EA; animation: mf-shake .4s ease; }
.mf-spell__space { width: 18px; }
.mf-spell__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mf-spell__tile { border: 0; background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-deep); cursor: pointer; transition: transform .1s ease; }
.mf-spell__tile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sun-deep); }
.mf-spell__tile[disabled] { opacity: .25; box-shadow: none; cursor: default; }
.mf-spell__tools { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
@media (max-width: 420px) { .mf-spell__slot, .mf-spell__tile { width: 42px; height: 50px; font-size: 1.4rem; } }

/* Bandeau d'annonce */
.mf-cta { padding: clamp(28px, 5vw, 48px) 0; }
.mf-cta__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 32px; padding: clamp(22px, 4vw, 36px); background: #FFF4D6; border-radius: var(--r-tile); box-shadow: 0 8px 0 #FFE09A; }
.mf-cta__mascot { width: 96px; height: 96px; }
.mf-cta h2 { color: var(--lake-deep); margin-bottom: .2em; font-size: var(--step-2); }
.mf-cta p { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .mf-cta__inner { grid-template-columns: 1fr; justify-items: start; } .mf-cta__mascot { width: 72px; height: 72px; } }

/* Héros sans mot du jour */
.mf-hero--solo .mf-hero__grid { grid-template-columns: 1fr; }

/* Aperçu dans l'éditeur */
.mf-block-preview { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 22px; background: var(--tile, #1F5F8B); color: #fff; font-family: var(--font-display, system-ui), system-ui, sans-serif; }
.mf-block-preview__art { flex: none; width: 110px; }
.mf-block-preview strong { display: block; font-size: 1.3rem; }
.mf-block-preview small { opacity: .9; font-size: 1rem; }

/* 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; }
}

/* ---------- Pastilles de filtre ---------- */
.mf-pill {
	display: inline-flex; align-items: center; gap: .35em;
	min-height: 44px; padding: .45em 1.1em;
	border: 2px solid var(--mist); border-radius: 999px;
	background: var(--card); color: var(--lake-deep);
	font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
	text-decoration: none; cursor: pointer; line-height: 1.1;
}
.mf-pill span { font-weight: 400; color: var(--ink-soft); }
.mf-pill:hover { border-color: var(--lake); color: var(--lake-deep); }
.mf-pill.is-active, .mf-pill[aria-current="page"] { background: var(--lake); border-color: var(--lake); color: #fff; }
.mf-pill.is-active span, .mf-pill[aria-current="page"] span { color: #DCEFF8; }
.mf-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }

/* ---------- Prénoms bashi ---------- */
.mf-names [hidden] { display: none !important; }
.mf-names__tools {
	position: sticky; top: 0; z-index: 2;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
	margin: 0 0 24px; padding: 16px;
	background: var(--sky); border-radius: var(--r-card);
}
.mf-names__search {
	flex: 1 1 260px; min-height: 52px; padding: .5em 1em;
	border: 2px solid var(--mist); border-radius: 999px;
	font: inherit; font-size: var(--step-0); background: #fff; color: var(--ink);
}
.mf-names__search:focus { outline: 3px solid var(--sun); outline-offset: 2px; border-color: var(--lake); }
.mf-names__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-names__count { margin: 0; font-weight: 700; color: var(--lake-deep); }
.mf-names__note { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.mf-names__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--lake-deep); margin: 32px 0 8px; }
.mf-names__intro { color: var(--ink-soft); margin: 0 0 12px; }
.mf-names__sub {
	margin: 22px 0 10px; font-family: var(--font-display); font-size: var(--step-0);
	color: var(--hibiscus); text-transform: none;
}
.mf-names__list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
	margin: 0; padding: 0; list-style: none;
}
.mf-name {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 16px; background: var(--card);
	border: 2px solid var(--mist); border-radius: var(--r-small);
	border-left: 6px solid var(--lake);
}
.mf-name--f { border-left-color: var(--hibiscus); }
.mf-name__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); line-height: 1.15; overflow-wrap: anywhere; }
.mf-name__sense { color: var(--ink); }
.mf-name__feel { color: var(--ink-soft); font-size: var(--step--1); font-style: italic; }
.mf-names__empty { padding: 24px; text-align: center; font-weight: 700; color: var(--ink-soft); }

/* ---------- Phrases et chants (leçons, codes courts) ---------- */
.mf-phrases { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mf-phrase {
	display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start;
	padding: 16px 18px; background: var(--card);
	border-radius: var(--r-small); box-shadow: var(--lift-sm);
	border: 2px solid var(--mist);
}
.mf-phrase .mf-play, .mf-phrase__dot { grid-row: span 2; }
.mf-phrase__mashi, .mf-phrase__tr { grid-column: 2; text-align: left; }
.mf-phrase__mashi { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.mf-phrase__mashi a { color: inherit; text-decoration: none; }
.mf-phrase__mashi a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.mf-phrase__tr { margin: 0; color: var(--ink-soft); }
.mf-phrase__tr span + span::before { content: " · "; }
.mf-phrase__dot { width: 14px; height: 14px; margin-top: .55em; border-radius: 50%; background: var(--tile, var(--lake)); }
.mf-song {
	padding: 20px 22px; background: #FFF8EA; border-radius: var(--r-card);
	border: 2px dashed var(--sun);
}
.mf-song .mf-phrase { box-shadow: none; border: 0; background: transparent; padding: 6px 0; }

/* ---------- Groupes de thèmes (page Apprendre) ---------- */
.mf-themes-group + .mf-themes-group { margin-top: 48px; }
.mf-themes-group__title { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--step-3); color: var(--lake-deep); }
.mf-themes-group__intro { margin: 0 0 20px; color: var(--ink-soft); font-size: var(--step-0); }

/* ---------- Phrases et chants : typographie ---------- */
.mf-word__kind { display: inline-block; margin: 0 0 .5em; padding: .2em .8em; border-radius: 999px; background: var(--tile); color: var(--tile-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.mf-word--phrase .mf-word__mashi, .mf-word--chant .mf-word__mashi { font-size: var(--step-3); line-height: 1.2; word-break: normal; overflow-wrap: anywhere; }
.mf-word--phrase .mf-word__tr, .mf-word--chant .mf-word__tr { font-size: var(--step-1); }
.mf-word--phrase .mf-word__tr2, .mf-word--chant .mf-word__tr2 { font-size: var(--step-0); }
.mf-word--phrase .mf-word__card, .mf-word--chant .mf-word__card { grid-template-columns: auto 1fr auto; }
.mf-dict__row--phrase .mf-dict__mashi, .mf-dict__row--chant .mf-dict__mashi { font-size: var(--step-0); line-height: 1.3; }
.mf-lesson-head__count { margin: .3em 0 0; font-weight: 700; opacity: .9; }
.mf-lesson-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mf-lesson-jump a { padding: .35em 1em; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 700; text-decoration: none; }
.mf-lesson-jump a:hover { background: #fff; text-decoration: underline; }

/* ---------- Dictionnaire : filtres ---------- */
.mf-dict-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 18px 0 14px; }
.mf-dict-filters .mf-pills { margin: 0; }
.mf-dict-filters form { display: flex; align-items: center; gap: 8px; margin: 0; }
.mf-dict-filters select { min-height: 44px; padding: 0 14px; border: 2px solid var(--mist); border-radius: 999px; background: #fff; font: inherit; color: var(--ink); max-width: 100%; }
.mf-dict-filters label { font-weight: 700; color: var(--lake-deep); }
@media (max-width: 600px) { .mf-word-card__mashi { font-size: clamp(1.05rem, 5.2vw, 1.35rem); word-break: normal; overflow-wrap: anywhere; } }