/**
 * assets/css/home.css — the home page (front-page.php, template-parts/home/).
 * ===========================================================================
 * The approved mockup (maquettes/accueil/, owner 2026-10-20). Tokens and the
 * shared pieces (.mh-btn, .mh-h2, .mh-tabs, the paper document card) live in
 * components.css. Loaded on the home page only (inc/home.php).
 *
 * Motion: one orchestrated load sequence in the hero, then scroll-driven
 * entrances (animation-timeline: view()) where the browser has them; elsewhere
 * everything is simply there. Under prefers-reduced-motion nothing moves.
 * Never write the two characters that close a comment inside a comment.
 * ===========================================================================
 */

.mh { background: var(--mh-bg); color: var(--mh-ink); font-family: var(--mh-body); overflow-x: clip; }
.mh :where(h1, h2, h3) { font-family: var(--mh-display); font-optical-sizing: auto; letter-spacing: -.02em; text-wrap: balance; }
.mh :where(p) { margin: 0; }
.mh-sec { padding-block: clamp(80px, 11vw, 150px); }
.mh .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- hero */
.mh-hero { position: relative; isolation: isolate; padding-top: clamp(16px, 3vw, 40px); }
.mh-hero-bg { position: absolute; inset: -160px 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mh-seyes { position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, transparent 0 7px, var(--mh-seyes) 7px 8px), repeating-linear-gradient(to bottom, transparent 0 31px, var(--mh-seyes-strong) 31px 32px), repeating-linear-gradient(to right, transparent 0 31px, var(--mh-seyes) 31px 32px); -webkit-mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000 10%, transparent 72%); opacity: .75; }
.mh-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.mh-glow-a { width: 46vw; max-width: 620px; aspect-ratio: 1; background: #FFD3CC; top: 4%; inset-inline-end: -6%; animation: mh-drift 18s ease-in-out infinite alternate; }
.mh-glow-b { width: 38vw; max-width: 520px; aspect-ratio: 1; background: #DDD3FB; top: 32%; inset-inline-start: -12%; animation: mh-drift 22s ease-in-out infinite alternate-reverse; }
@keyframes mh-drift { to { transform: translate(4%, 6%) scale(1.08); } }

.mh-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 1024px) { .mh-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 24px; } }
.mh-hero-copy { position: relative; min-width: 0; }
.mh-hero-tag { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--mh-line); box-shadow: 0 8px 22px -16px rgba(14, 26, 79, .5); font: 600 .86rem/1.25 var(--mh-body); color: var(--mh-ink-2); animation: mh-up .8s var(--mh-ease) .05s both; }
.mh-hero-tag b { display: inline-flex; align-items: center; gap: 6px; background: var(--mh-navy); color: #fff; border-radius: 999px; padding: 7px 11px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.mh-hero-tag b .mh-i { width: 12px; height: 12px; color: var(--mh-sun); }
.mh-h1 { margin: 24px 0 0; font: 800 clamp(2.35rem, 1rem + 6vw, 6rem)/.97 var(--mh-display); letter-spacing: -.045em; color: var(--mh-ink); }
.mh-ln { display: block; }
.mh-ln > span { display: inline-block; animation: mh-line 1.05s var(--mh-ease) both; }
.mh-ln:nth-child(2) > span { animation-delay: .13s; }
.mh-soft { color: var(--mh-navy-2); }
@keyframes mh-line { from { opacity: 0; transform: translateY(42%) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes mh-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mh-circled { position: relative; display: inline-block; }
.mh-circled svg { position: absolute; left: -13%; top: -12%; width: 126%; height: 126%; overflow: visible; pointer-events: none; }
[dir="rtl"] .mh-circled svg { left: -8%; width: 116%; top: -26%; height: 152%; } /* the Arabic word is long and its letters tall: a wider, taller loop */
.mh-circled path { fill: none; stroke: var(--mh-coral-bright); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mh-draw 1.1s cubic-bezier(.65, 0, .35, 1) 1s forwards; }
@keyframes mh-draw { to { stroke-dashoffset: 0; } }
.mh-hero-lead { margin: 26px 0 34px; max-width: 54ch; font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); line-height: 1.6; color: var(--mh-ink-2); animation: mh-up .9s var(--mh-ease) .35s both; }

.mh-search { position: relative; max-width: 640px; z-index: 30; animation: mh-up .9s var(--mh-ease) .45s both; }
.mh-search-box { display: flex; align-items: center; gap: 10px; height: 70px; padding: 8px; padding-inline-start: 22px; background: #fff; border: 1px solid var(--mh-line); border-radius: 22px; box-shadow: 0 26px 50px -30px rgba(14, 26, 79, .5), 0 2px 6px rgba(14, 26, 79, .04); transition: border-color .25s, box-shadow .3s; }
.mh-search-box:focus-within { border-color: rgba(212, 47, 34, .45); box-shadow: 0 26px 50px -30px rgba(14, 26, 79, .5), 0 0 0 5px rgba(240, 71, 58, .13); }
.mh-search-box > .mh-i { width: 22px; height: 22px; color: var(--mh-ink-3); }
.mh-search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 1.06rem var(--mh-body); color: var(--mh-ink); box-shadow: none; padding: 0; }
.mh-search-box input::placeholder { color: var(--mh-ink-3); opacity: 1; }
.mh-search-box input::-webkit-search-cancel-button { display: none; }
.mh-search-box .mh-btn { height: 54px; min-height: 0; border-radius: 16px; }
@media (max-width: 540px) {
    .mh-search-box { height: 62px; padding-inline-start: 16px; }
    .mh-search-box .mh-btn { width: 48px; height: 48px; padding: 0; }
    .mh-search-box .mh-lbl { display: none; }
}
.mh-results { position: absolute; inset-inline: 0; top: calc(100% + 10px); background: #fff; border: 1px solid var(--mh-line); border-radius: 20px; box-shadow: var(--mh-shadow-lg); padding: 8px; max-height: min(68vh, 480px); overflow: auto; transform-origin: 50% 0; animation: mh-pop-in .35s var(--mh-ease); }
.mh-results[hidden] { display: none; }
@keyframes mh-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.mh-res-group + .mh-res-group { border-top: 1px solid var(--mh-line); }
.mh-res-group h4 { margin: 0; font: 700 .7rem/1 var(--mh-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mh-ink-3); padding: 14px 12px 6px; }
.mh-res-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--mh-ink); }
.mh-res-item:hover, .mh-res-item.is-active { background: var(--mh-bg); color: var(--mh-ink); }
.mh-res-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.mh-res-ico.is-interactive { background: var(--mh-coral-soft); color: var(--mh-coral-text); }
.mh-res-ico.is-lesson { background: var(--mh-mint-soft); color: var(--mh-mint); }
.mh-res-ico.is-document { background: var(--mh-sky-soft); color: var(--mh-sky); }
.mh-res-ico.is-exam { background: var(--mh-sun-soft); color: #9A5B00; }
.mh-res-ico.is-course { background: var(--mh-violet-soft); color: var(--mh-violet); }
.mh-res-item > span:last-child { min-width: 0; }
.mh-res-item b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.mh-res-item small { display: block; color: var(--mh-ink-3); font-size: .82rem; }
.mh-res-item mark { background: var(--mh-sun-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.mh-res-empty { padding: 22px 14px; color: var(--mh-ink-3); text-align: center; }
.mh-res-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; margin-top: 4px; border-top: 1px solid var(--mh-line); font-weight: 600; color: var(--mh-coral-text); text-decoration: none; }
.mh-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: .88rem; color: var(--mh-ink-3); animation: mh-up .9s var(--mh-ease) .55s both; }
.mh-try button { border: 1px solid var(--mh-line); background: rgba(255, 255, 255, .78); border-radius: 999px; padding: 8px 14px; min-height: 36px; font: 500 .86rem/1 var(--mh-body); color: var(--mh-ink-2); cursor: pointer; transition: translate .25s var(--mh-ease), border-color .2s, color .2s; }
.mh-try button:hover { translate: 0 -2px; border-color: var(--mh-ink); color: var(--mh-ink); }
.mh-hero-note { position: absolute; display: none; inset-inline-end: -6px; top: -58px; transform: rotate(-5deg); font-size: 1.15rem; animation: mh-up .8s var(--mh-ease) 1.4s both; }
.mh-hero-note svg { position: absolute; inset-inline-start: -46px; top: 20px; width: 52px; height: 46px; fill: none; stroke: var(--mh-coral-bright); stroke-width: 2.2; stroke-linecap: round; }
[dir="rtl"] .mh-hero-note svg { transform: scaleX(-1); }
@media (min-width: 1180px) { .mh-hero-note { display: block; } }
.mh-down { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; min-height: 40px; font-weight: 600; color: var(--mh-ink-2); text-decoration: none; animation: mh-up .9s var(--mh-ease) .65s both; }
.mh-down .mh-i { transition: transform .3s var(--mh-ease); }
.mh-down:hover { color: var(--mh-ink); }
.mh-down:hover .mh-i { transform: translateY(3px); }
/* On a phone the hero goes straight from the title to the search (owner,
   2026-10-22): the lead, the « Essayez » words and « ou choisissez votre
   niveau » leave the screen to what matters. The words stay in the page,
   hidden: home.js types them as the search field's placeholder. */
.mh-hero-lead-short { display: none; }
@media (max-width: 640px) {
    .mh-hero-lead, .mh-try, .mh-down { display: none; }
    /* One light line in its place: what the site holds, in a breath. */
    .mh-hero-lead-short { display: block; margin: 14px 0 0; font-size: 1rem; line-height: 1.5; color: var(--mh-ink-3); animation: mh-up .9s var(--mh-ease) .35s both; }
    .mh-search { margin-top: 22px; }
}

/* The three cards around the girl crowd a phone (owner, 2026-10-22): there
   the teacher's red-pen notes take their places instead — a formula of the
   programme each, on a scrap of white, nothing to read twice. */
.mh-note { display: none; }
@media (max-width: 640px) {
    .mh-visual .mh-float { display: none; }
    .mh-note { position: absolute; z-index: 3; display: block; padding: 3px 10px 5px; border-radius: 10px; background: rgba(255, 255, 255, .78); box-shadow: 0 8px 18px -14px rgba(14, 26, 79, .55); font-size: 1rem; white-space: nowrap; text-decoration: underline wavy rgba(240, 71, 58, .4); text-underline-offset: 5px; animation: mh-pop .9s var(--mh-ease) var(--d, 1s) both; }
    /* The picture closer to the search and to the numbers under it (owner,
       2026-10-22): less air above the girl, a shorter gap after her. */
    .mh-hero-grid { gap: 14px; }
    .mh-hero .mh-visual { aspect-ratio: 560 / 560; }
    .mh-hero .mh-proof { margin-top: 26px; }
    .mh-note-a { inset-inline-end: 1%; top: 4%; rotate: 5deg; --d: 1.1s; }
    .mh-note-b { inset-inline-start: 0; top: 40%; rotate: -7deg; --d: 1.3s; }
    .mh-note-c { inset-inline-start: 3%; bottom: 13%; rotate: -3deg; --d: 1.5s; }
}

/* the visual: the arch, the student, the floating cards */
.mh-visual { position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 560 / 610; --mx: 0; --my: 0; }
.mh-arch { position: absolute; inset-inline: 7%; bottom: 0; width: 86%; height: 80%; overflow: visible; animation: mh-arch-in 1.2s var(--mh-ease) .15s both; }
@keyframes mh-arch-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-20% -20% 0 -20%); } }
.mh-orbit { transform-origin: 200px 250px; animation: mh-spin 26s linear infinite; }
.mh-twinkle { transform-box: fill-box; transform-origin: center; animation: mh-twinkle 3.2s ease-in-out infinite; }
.mh-twinkle:nth-of-type(2n) { animation-delay: 1.1s; }
@keyframes mh-spin { to { transform: rotate(360deg); } }
@keyframes mh-twinkle { 50% { opacity: .25; transform: scale(.7); } }
.mh-girl { position: absolute; left: -5%; right: -5%; bottom: 0; aspect-ratio: 960 / 818; overflow: hidden; translate: calc(var(--mx) * -6px) calc(var(--my) * -4px); animation: mh-girl-in 1.2s var(--mh-ease) .35s both; }
.mh-girl img { position: absolute; top: 0; left: -69.8%; width: 200.2%; max-width: none; height: auto; }
[dir="rtl"] .mh-girl img { transform: scaleX(-1); left: auto; right: -69.8%; }
@keyframes mh-girl-in { from { opacity: 0; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: none; } }
.mh-floor { position: absolute; left: 12%; right: 12%; bottom: -14px; height: 28px; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 26, 79, .22), transparent); filter: blur(4px); }
.mh-float { position: absolute; z-index: 3; translate: calc(var(--mx) * var(--px, 10px)) calc(var(--my) * var(--px, 10px)); animation: mh-pop .9s var(--mh-ease) var(--d, 1s) both; }
.mh-float-in { animation: mh-bob var(--bob, 6s) ease-in-out var(--d, 1s) infinite; }
@keyframes mh-pop { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes mh-bob { 50% { transform: translateY(-9px); } }
.mh-mini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 22px 44px -22px rgba(14, 26, 79, .55), 0 2px 6px rgba(14, 26, 79, .06); }
.mh-mini-text { display: grid; gap: 3px; min-width: 0; }
.mh-mini-k { font: 700 .66rem/1 var(--mh-body); letter-spacing: .09em; text-transform: uppercase; color: var(--mh-coral-text); }
.mh-mini-t { font: 700 .95rem/1.2 var(--mh-display); color: var(--mh-ink); }
.mh-mini-s { font-size: .76rem; color: var(--mh-ink-3); }
.mh-f1 { inset-inline-start: -10%; top: 37%; --d: 1s; --px: 14px; width: 256px; }
.mh-f2 { inset-inline-start: -2%; bottom: 7%; --d: 1.2s; --px: 9px; width: 248px; }
.mh-f2 .mh-float-in { --bob: 7.5s; }
.mh-f3 { inset-inline-end: -5%; top: 5%; --d: 1.4s; --px: 12px; --bob: 7s; }
.mh-orbit-mini { position: relative; width: 54px; height: 54px; flex: none; border-radius: 14px; background: radial-gradient(circle at 30% 30%, #22327f, #0A1340); overflow: hidden; }
.mh-orbit-mini::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 50%; }
.mh-earth { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7cc4ff, #2F7ED8 55%, #0E9A7D); }
.mh-moon-arm { position: absolute; inset: 9px; animation: mh-spin 5s linear infinite; }
.mh-moon { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #E8E6F2; box-shadow: 0 0 8px rgba(255, 255, 255, .6); }
.mh-dots { display: flex; gap: 4px; margin: 4px 0 1px; }
.mh-dots i { width: 18px; height: 5px; border-radius: 3px; background: var(--mh-line); animation: mh-dot 5s linear infinite; }
.mh-dots i:nth-child(2) { animation-delay: .9s; } .mh-dots i:nth-child(3) { animation-delay: 1.8s; } .mh-dots i:nth-child(4) { animation-delay: 2.7s; } .mh-dots i:nth-child(5) { animation-delay: 3.6s; } .mh-dots i:nth-child(6) { animation-delay: 4.5s; } .mh-dots i:nth-child(7) { animation-delay: 5.4s; }
@keyframes mh-dot { 0%, 10% { background: var(--mh-line); } 20%, 85% { background: var(--mh-coral-bright); } 100% { background: var(--mh-line); } }
.mh-mini-doc img { width: 44px; height: 58px; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 4px 10px -4px rgba(14, 26, 79, .4); flex: none; }
.mh-tick { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mh-mint); color: #fff; flex: none; }
@media (max-width: 1023px) { .mh-visual { width: min(100%, 460px); } }
@media (max-width: 520px) {
    .mh-f1 { inset-inline-start: -2%; top: 34%; transform-origin: 0 50%; scale: .74; }
    .mh-f2 { inset-inline-start: -1%; bottom: 3%; transform-origin: 0 100%; scale: .74; }
    .mh-f3 { inset-inline-end: -2%; top: 2%; transform-origin: 100% 0; scale: .74; }
}

.mh-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--mh-line); animation: mh-up .9s var(--mh-ease) .7s both; }
.mh-proof > div { display: grid; gap: 6px; padding-top: 24px; min-width: 0; }
.mh-proof > div + div { padding-inline-start: clamp(14px, 3vw, 44px); border-inline-start: 1px solid var(--mh-line); }
.mh-proof b { font: 800 clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem)/1 var(--mh-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mh-ink); }
.mh-proof span { color: var(--mh-ink-3); font-size: clamp(.82rem, .78rem + .2vw, .98rem); line-height: 1.35; }

/* ribbons */
.mh-ribbons { position: relative; height: clamp(160px, 17vw, 230px); margin-top: clamp(40px, 6vw, 80px); overflow: hidden; display: grid; place-items: center; }
.mh-ribbon { position: absolute; left: -6%; right: -6%; padding-block: 17px; overflow: hidden; }
.mh-r1 { background: var(--mh-navy); color: #fff; rotate: -3deg; z-index: 2; box-shadow: 0 20px 40px -24px rgba(14, 26, 79, .7); }
.mh-r2 { background: var(--mh-coral); color: #fff; rotate: 2.6deg; }
.mh-track { display: flex; width: max-content; animation: mh-marquee 52s linear infinite; }
.mh-r2 .mh-track { animation-direction: reverse; animation-duration: 60s; }
.mh-ribbons:hover .mh-track { animation-play-state: paused; }
.mh-track span { display: inline-flex; align-items: center; gap: 26px; padding-inline-end: 26px; font: 700 clamp(1.05rem, .9rem + .8vw, 1.65rem)/1 var(--mh-display); letter-spacing: -.01em; white-space: nowrap; }
.mh-track .mh-i { width: 18px; height: 18px; }
.mh-r1 .mh-i { color: var(--mh-coral-bright); }
.mh-r2 .mh-i { color: var(--mh-sun); }
@keyframes mh-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .mh-track { animation-name: mh-marquee-rtl; }
@keyframes mh-marquee-rtl { to { transform: translateX(50%); } }

/* ---------------------------------------------------------------- levels */
.mh-levels { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .mh-levels { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.mh-level { --accent: var(--mh-sky); --soft: var(--mh-sky-soft); position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 30px; background: #fff; border: 1px solid var(--mh-line); overflow: hidden; transition: translate .5s var(--mh-ease), box-shadow .5s var(--mh-ease), border-color .3s; }
.mh-level:hover { translate: 0 -6px; box-shadow: var(--mh-shadow-lg); border-color: transparent; }
.mh-lv-1bac { --accent: var(--mh-violet); --soft: var(--mh-violet-soft); }
.mh-lv-2bac { --accent: var(--mh-coral-bright); --soft: var(--mh-coral-soft); }
.mh-level-top { position: relative; height: 150px; margin: -26px -26px 22px; background: var(--soft); display: flex; align-items: flex-end; padding: 0 26px 16px; overflow: hidden; }
.mh-level-abbr { position: relative; z-index: 1; font: 800 clamp(4rem, 3rem + 3vw, 5.4rem)/.85 var(--mh-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--accent); transition: color .5s var(--mh-ease); }
.mh-level:hover .mh-level-abbr { color: var(--accent); }
.mh-doodle { position: absolute; inset-inline-end: -10px; top: -6px; width: 190px; height: 170px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.mh-doodle .is-solid { fill: currentColor; stroke: none; }
.mh-doodle .mh-spin { transform-box: view-box; transform-origin: 120px 80px; animation: mh-spin 16s linear infinite; }
.mh-doodle .mh-slide { animation: mh-wave 3.5s linear infinite; }
@keyframes mh-wave { to { transform: translateX(-60px); } }
.mh-level h3 { margin: 0; font-size: 1.55rem; font-weight: 740; color: var(--mh-ink); }
.mh-level-sub { color: var(--mh-ink-3); margin-top: 4px; }
.mh-level-links { list-style: none; margin: 20px 0 0; padding: 0; display: grid; border-top: 1px solid var(--mh-line); }
.mh-level-links a { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--mh-line); text-decoration: none; font-weight: 600; color: var(--mh-ink); transition: color .2s; }
.mh-level-links a > * { transition: translate .3s var(--mh-ease); }
.mh-level-links a:hover { color: var(--accent); }
.mh-level-links a:hover > * { translate: 6px 0; }
[dir="rtl"] .mh-level-links a:hover > * { translate: -6px 0; }
.mh-level-links .mh-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--soft); color: var(--accent); flex: none; }
.mh-level-links .mh-lbl { flex: 1; min-width: 0; }
.mh-level-links small { display: block; font-weight: 500; color: var(--mh-ink-3); font-size: .8rem; }
.mh-level-links .mh-go { color: var(--mh-ink-3); transition: transform .3s var(--mh-ease), color .2s; }
.mh-level-links a:hover .mh-go { transform: translateX(4px); color: var(--accent); }
[dir="rtl"] .mh-level-links a:hover .mh-go { transform: scaleX(-1) translateX(4px); }

/* ---------------------------------------------------------------- interactive: the lesson story */
.mh-interactive { background: linear-gradient(180deg, var(--mh-bg) 0, #fff 18%, #fff 82%, var(--mh-bg) 100%); }
.mh-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mh-steps { list-style: none; margin: 0; padding: 0; }
.mh-step-btn { display: inline-flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: start; color: var(--mh-ink); font: inherit; }
.mh-num { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mh-bg); border: 1px solid var(--mh-line); font: 700 .95rem/1 var(--mh-display); transition: background-color .3s, color .3s, border-color .3s; }
.mh-nm { font: 760 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1.1 var(--mh-display); letter-spacing: -.03em; }
.mh-step p { margin-top: 12px; color: var(--mh-ink-2); max-width: 40ch; font-size: 1.06rem; }
.mh-step.is-active .mh-num { background: var(--mh-coral); border-color: var(--mh-coral); color: #fff; }
.mh-story-caption { display: none; }
.mh-story-cta { margin-top: 22px; }
@media (min-width: 960px) {
    .mh-story { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); }
    .mh-step { min-height: clamp(340px, 58vh, 600px); display: flex; flex-direction: column; justify-content: center; }
    .mh-step:first-child { min-height: clamp(240px, 40vh, 420px); justify-content: flex-start; padding-top: 30px; }
    .mh-step:last-child { min-height: clamp(300px, 46vh, 480px); }
    .mh-js .mh-step { opacity: .34; transition: opacity .5s; }
    .mh-js .mh-step.is-active { opacity: 1; }
    .mh-device-wrap { position: sticky; top: 104px; align-self: start; }
}
@media (max-width: 959px) {
    .mh-steps { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .mh-steps::-webkit-scrollbar { display: none; }
    .mh-step { flex: none; }
    .mh-step p { display: none; }
    .mh-step-btn { padding: 8px 14px 8px 8px; min-height: 46px; border-radius: 999px; background: #fff; border: 1px solid var(--mh-line); }
    .mh-step-btn .mh-num { width: 30px; height: 30px; border-radius: 999px; font-size: .85rem; }
    .mh-step-btn .mh-nm { font-size: 1rem; letter-spacing: -.01em; }
    .mh-step.is-active .mh-step-btn { border-color: var(--mh-coral); }
    .mh-story-caption { display: block; color: var(--mh-ink-2); margin-top: 14px; min-height: 3.2em; }
}
.mh-device { background: #fff; border-radius: 30px; border: 1px solid var(--mh-line); box-shadow: var(--mh-shadow-lg); padding: 14px; position: relative; }
.mh-device-head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 14px; }
.mh-device-ttl { flex: 1; min-width: 0; display: grid; }
.mh-device-ttl b { font: 700 1rem/1.2 var(--mh-display); color: var(--mh-ink); }
.mh-device-ttl small { color: var(--mh-ink-3); font-size: .8rem; }
.mh-phases { display: flex; gap: 5px; }
.mh-phases i { width: 26px; height: 6px; border-radius: 4px; background: var(--mh-line); transition: background-color .4s; }
.mh-phases i.is-on { background: var(--mh-coral-bright); }
.mh-screens { position: relative; height: clamp(440px, 40vw, 470px); border-radius: 20px; overflow: hidden; background: var(--mh-bg); }
.mh-screen { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.985); transition: opacity .5s var(--mh-ease), transform .6s var(--mh-ease), visibility 0s .5s; }
.mh-screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--mh-ease), transform .6s var(--mh-ease), visibility 0s; }
.mh-scr-label { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1 var(--mh-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mh-coral-text); }
.mh-scr-q { font: 700 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.3 var(--mh-display); letter-spacing: -.015em; color: var(--mh-ink); }
.mh-s-situation { background: radial-gradient(120% 90% at 70% 10%, #24358a 0, #0A1340 60%); justify-content: flex-end; }
.mh-s-situation .mh-scr-label { color: #FFB4AC; }
.mh-s-situation .mh-scr-q { color: #fff; }
.mh-space { position: absolute; inset: 0; width: 100%; height: 100%; }
.mh-moon-orbit { transform-origin: 200px 150px; animation: mh-spin 9s linear infinite; }
.mh-sit-card { position: relative; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.mh-link-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: #fff; color: var(--mh-navy); border-radius: 999px; padding: 10px 16px; min-height: 40px; font: 600 .9rem/1 var(--mh-body); cursor: pointer; transition: translate .3s var(--mh-ease); }
.mh-link-btn:hover { translate: 3px 0; }
.mh-sim { background: #fff; border: 1px solid var(--mh-line); border-radius: 16px; padding: 10px 10px 4px; }
.mh-sim svg { width: 100%; height: auto; max-height: 150px; display: block; }
.mh-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--mh-ink-3); padding: 4px 6px; }
.mh-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mh-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mh-vec { position: relative; display: inline-block; font-style: italic; }
.mh-vec::before { content: "\2192"; position: absolute; left: 50%; top: -.66em; transform: translateX(-50%); font-size: .72em; font-style: normal; line-height: 1; }
.mh-slider { display: grid; gap: 8px; }
.mh-slider label { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; font-weight: 600; color: var(--mh-ink); }
.mh-slider output { font-variant-numeric: tabular-nums; }
.mh-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; padding: 0; border: 0; }
.mh-slider input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--mh-coral-bright) var(--fill, 40%), var(--mh-line) var(--fill, 40%)); }
.mh-slider input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--mh-line); }
.mh-slider input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--mh-coral-bright); }
.mh-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--mh-coral); box-shadow: 0 4px 10px -2px rgba(212, 47, 34, .5); }
.mh-slider input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--mh-coral); }
.mh-result { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--mh-navy); color: #fff; }
.mh-f { font: 700 1.05rem/1.2 var(--mh-display); }
.mh-v { font: 800 1.45rem/1 var(--mh-display); font-variant-numeric: tabular-nums; color: #FFD08A; }
.mh-data { font-size: .78rem; color: var(--mh-ink-3); }
.mh-mind { position: relative; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 14px; align-content: center; min-height: 300px; }
.mh-mind-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mh-mind-lines path { fill: none; stroke: var(--mh-line-2); stroke-width: 2; opacity: 0; transition: opacity .9s var(--mh-ease) .15s; }
.mh-s-bilan.is-on .mh-mind-lines path { opacity: 1; }
.mh-mind-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: var(--mh-navy); color: #fff; padding: 10px 16px; border-radius: 999px; font: 700 .9rem/1.2 var(--mh-display); text-align: center; box-shadow: 0 12px 24px -12px rgba(14, 26, 79, .7); white-space: nowrap; }
.mh-branch { position: relative; z-index: 1; display: block; background: #fff; border: 1px solid var(--mh-line); border-radius: 14px; padding: 10px 12px; font-size: .82rem; line-height: 1.35; color: var(--mh-ink-2); opacity: 0; transform: scale(.9); transition: opacity .5s, transform .6s var(--mh-ease); }
.mh-branch::before { content: ""; display: block; width: 26px; height: 4px; margin-bottom: 7px; border-radius: 2px; background: var(--c, var(--mh-sky)); }
.mh-branch b { display: block; font: 700 .9rem/1.2 var(--mh-display); color: var(--mh-ink); margin-bottom: 3px; }
.mh-s-bilan.is-on .mh-branch { opacity: 1; transform: none; }
.mh-s-bilan.is-on .mh-branch:nth-of-type(3) { transition-delay: .1s; } .mh-s-bilan.is-on .mh-branch:nth-of-type(4) { transition-delay: .2s; } .mh-s-bilan.is-on .mh-branch:nth-of-type(5) { transition-delay: .3s; } .mh-s-bilan.is-on .mh-branch:nth-of-type(6) { transition-delay: .4s; }
.mh-opts { display: grid; gap: 10px; }
.mh-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; text-align: start; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--mh-line); background: #fff; font: 600 .98rem/1.3 var(--mh-body); color: var(--mh-ink); cursor: pointer; transition: border-color .2s, background-color .2s, translate .25s var(--mh-ease); }
.mh-opt:hover { border-color: var(--mh-ink-3); translate: 3px 0; }
.mh-opt.is-right { border-color: var(--mh-mint); background: var(--mh-mint-soft); }
.mh-opt.is-wrong { border-color: var(--mh-coral-bright); background: var(--mh-coral-soft); animation: mh-shake .4s; }
@keyframes mh-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.mh-feedback { padding: 12px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.45; }
.mh-feedback.is-ok { background: var(--mh-mint-soft); color: #075E4C; }
.mh-feedback.is-ko { background: var(--mh-coral-soft); color: #8F1D12; }
.mh-feedback[hidden] { display: none; }
.mh-answer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mh-field { display: flex; align-items: center; flex: 1; min-width: 150px; height: 50px; border: 1.5px solid var(--mh-line-2); border-radius: 14px; background: #fff; padding: 0 14px; gap: 8px; }
.mh-field:focus-within { border-color: var(--mh-coral); }
.mh-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 1.05rem var(--mh-body); color: var(--mh-ink); box-shadow: none; padding: 0; }
.mh-unit { font-weight: 700; color: var(--mh-ink-3); }
.mh-hint { border: 0; background: transparent; padding: 0; color: var(--mh-coral-text); font: 600 .95rem var(--mh-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.mh-problem { font-size: 1rem; color: var(--mh-ink-2); line-height: 1.55; }

.mh-catalog { margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.mh-catalog > *, .mh-catalog-head > * { min-width: 0; }
.mh-catalog-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; }
.mh-catalog-head h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 760; letter-spacing: -.03em; color: var(--mh-ink); }
.mh-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .mh-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mh-lessons[hidden] { display: none; }
.mh-lesson a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--mh-line); text-decoration: none; color: var(--mh-ink); transition: translate .4s var(--mh-ease), box-shadow .4s, border-color .3s; }
.mh-lesson a:hover { translate: 0 -3px; box-shadow: 0 20px 36px -26px rgba(14, 26, 79, .55); border-color: transparent; color: var(--mh-ink); }
.mh-dom { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.mh-dom.is-ph { background: var(--mh-sky-soft); color: var(--mh-sky); }
.mh-dom.is-ch { background: var(--mh-mint-soft); color: var(--mh-mint); }
.mh-txt { flex: 1; min-width: 0; }
.mh-lesson b { display: block; font: 600 1rem/1.3 var(--mh-body); }
.mh-lesson small { color: var(--mh-ink-3); font-size: .84rem; }
.mh-lesson .mh-go { color: var(--mh-ink-3); transition: transform .3s var(--mh-ease); }
.mh-lesson a:hover .mh-go { transform: translateX(4px); color: var(--mh-coral-text); }
.mh-lessons.is-shown .mh-lesson { animation: mh-up .6s var(--mh-ease) both; }
.mh-lessons.is-shown .mh-lesson:nth-child(2) { animation-delay: .06s; } .mh-lessons.is-shown .mh-lesson:nth-child(3) { animation-delay: .12s; } .mh-lessons.is-shown .mh-lesson:nth-child(4) { animation-delay: .18s; } .mh-lessons.is-shown .mh-lesson:nth-child(5) { animation-delay: .24s; }

/* ---------------------------------------------------------------- documents: a notebook page */
.mh-docs { padding-top: clamp(40px, 6vw, 80px); }
.mh-notebook { --m: clamp(30px, 5vw, 72px); position: relative; border-radius: 34px; background-color: #fff; background-image: repeating-linear-gradient(to bottom, transparent 0 7px, var(--mh-seyes) 7px 8px), repeating-linear-gradient(to bottom, transparent 0 31px, var(--mh-seyes-strong) 31px 32px), repeating-linear-gradient(to right, transparent 0 31px, var(--mh-seyes) 31px 32px); border: 1px solid var(--mh-line); box-shadow: var(--mh-shadow-lg); padding-block: clamp(28px, 4vw, 56px); padding-inline: calc(var(--m) + clamp(18px, 2.5vw, 36px)) clamp(18px, 3.5vw, 52px); overflow: hidden; }
.mh-nb-margin { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--m); width: 2px; background: var(--mh-margin-red); transform-origin: 50% 0; }
.mh-nb-holes { position: absolute; inset-inline-start: calc(var(--m) / 2 - 7px); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; padding-block: 40px; }
.mh-nb-holes i { width: 14px; height: 14px; border-radius: 50%; background: var(--mh-bg); box-shadow: inset 0 2px 3px rgba(14, 26, 79, .18); }
@media (max-width: 640px) { .mh-nb-holes { display: none; } }
.mh-docs-note { position: absolute; inset-inline-end: clamp(18px, 4vw, 60px); top: clamp(22px, 3vw, 40px); font-size: 1.1rem; transform: rotate(4deg); display: none; }
@media (min-width: 1100px) { .mh-docs-note { display: block; } }
.mh-notebook .mh-head { margin-bottom: 30px; }
.mh-docs-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mh-doc-row { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mh-doc-row[hidden] { display: none; }
@media (max-width: 980px) { .mh-doc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mh-doc-row .mh-doc:nth-child(4) { display: none; } }
@media (max-width: 700px) {
    .mh-doc-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -6px; padding: 10px 6px 16px; scrollbar-width: thin; }
    .mh-doc-row .mh-doc { flex: 0 0 min(62%, 240px); scroll-snap-align: start; }
    .mh-doc-row .mh-doc:nth-child(4) { display: block; }
}
.mh-doc-row.is-shown .mh-doc { animation: mh-paper-in .7s var(--mh-ease) both; }
.mh-doc-row.is-shown .mh-doc:nth-child(2) { animation-delay: .07s; } .mh-doc-row.is-shown .mh-doc:nth-child(3) { animation-delay: .14s; } .mh-doc-row.is-shown .mh-doc:nth-child(4) { animation-delay: .21s; }
@keyframes mh-paper-in { from { opacity: 0; transform: translateY(26px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- exams: the dark section */
.mh-exams { padding-block: clamp(20px, 3vw, 40px); }
.mh-exams-shell { position: relative; background: radial-gradient(90% 70% at 85% 10%, #2A2A8C 0, transparent 60%), radial-gradient(70% 60% at 0% 100%, #3A1460 0, transparent 55%), var(--mh-navy-deep); color: var(--mh-on-dark); overflow: hidden; isolation: isolate; }
.mh-exams-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255, 255, 255, .04) 31px 32px), repeating-linear-gradient(to right, transparent 0 31px, rgba(255, 255, 255, .04) 31px 32px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.mh-exams-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 6vw, 80px); align-items: center; padding-block: clamp(84px, 11vw, 150px); }
@media (min-width: 1000px) { .mh-exams-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.mh-exams .mh-head { margin: 0; }
.mh-exams .mh-eyebrow { color: #FF9A8F; }
.mh-exams .mh-lead { color: var(--mh-on-dark-2); }
.mh-exams .mh-h2 { color: #fff; }
.mh-tiles { display: grid; gap: 12px; margin-top: 34px; }
.mh-tile { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid var(--mh-dark-line); text-decoration: none; color: #fff; transition: background-color .3s, translate .4s var(--mh-ease), border-color .3s; }
.mh-tile:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); translate: 6px 0; color: #fff; }
[dir="rtl"] .mh-tile:hover { translate: -6px 0; }
.mh-tile .mh-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; }
.mh-ico.is-coral { background: var(--mh-coral); } .mh-ico.is-violet { background: var(--mh-violet); } .mh-ico.is-sky { background: var(--mh-sky); }
.mh-tile b { display: block; font: 700 1.12rem/1.2 var(--mh-display); }
.mh-tile small { color: var(--mh-on-dark-2); font-size: .88rem; }
.mh-tile .mh-go { color: var(--mh-on-dark-2); }
.mh-announce { margin-top: 28px; padding: 18px 20px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .25); }
.mh-announce-h { font: 700 .78rem/1 var(--mh-body); letter-spacing: .1em; text-transform: uppercase; color: #FFC75A; margin-bottom: 10px; }
.mh-announce ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mh-announce a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: #fff; text-decoration: none; }
.mh-announce a:hover span { text-decoration: underline; }
.mh-announce small { color: var(--mh-on-dark-2); }
.mh-papers { position: relative; width: min(100%, 460px); margin-inline: auto; aspect-ratio: 4 / 4.6; }
.mh-paper { position: absolute; inset: 6% 10% 4% 8%; display: block; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65); transition: transform .8s var(--mh-ease), z-index 0s .25s, filter .6s; }
.mh-paper img { width: 100%; height: 118%; object-fit: cover; object-position: top; display: block; }
.mh-papers[data-show="sujet"] .mh-paper-sujet, .mh-papers[data-show="correction"] .mh-paper-cor { z-index: 2; transform: rotate(-2.5deg); }
.mh-papers[data-show="sujet"] .mh-paper-cor, .mh-papers[data-show="correction"] .mh-paper-sujet { z-index: 1; transform: translate(34px, -26px) rotate(5deg) scale(.95); filter: brightness(.82); }
.mh-paper-switch { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; z-index: 5; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--mh-dark-line); }
.mh-paper-switch button { border: 0; border-radius: 999px; padding: 10px 18px; min-height: 40px; background: transparent; color: #fff; font: 600 .9rem/1 var(--mh-body); cursor: pointer; transition: background-color .25s, color .25s; }
.mh-paper-switch button[aria-pressed="true"] { background: #fff; color: var(--mh-navy); }
.mh-exam-chip { position: absolute; z-index: 4; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--mh-navy); font: 700 .8rem/1 var(--mh-body); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); white-space: nowrap; }
.mh-ec1 { inset-inline-end: -2%; top: 12%; rotate: 4deg; }
.mh-ec2 { inset-inline-start: -4%; top: 46%; rotate: -5deg; background: var(--mh-sun); color: var(--mh-navy-deep); }
.mh-exams-note { position: absolute; inset-inline-end: 2%; bottom: 16%; z-index: 4; color: #FFB4AC; font-size: 1.05rem; rotate: -6deg; display: none; }
@media (min-width: 1000px) { .mh-exams-note { display: block; } }

/* ---------------------------------------------------------------- video */
.mh-video-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 90px); align-items: center; }
@media (min-width: 1000px) { .mh-video-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.mh-player { position: relative; display: block; border-radius: 26px; background: #0F172A; padding: 12px; box-shadow: var(--mh-shadow-lg); text-decoration: none; color: #fff; }
.mh-player:focus-visible { outline: 3px solid var(--mh-coral-bright); outline-offset: 4px; }
.mh-player-screen { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #1C2B78, #0A1340); }
.mh-player-screen img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--mh-ease); display: block; }
.mh-player:hover .mh-player-screen img { transform: scale(1.1); }
.mh-player-blank { position: absolute; inset: 0; }
.mh-player-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .1), rgba(15, 23, 42, .78)); }
.mh-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #fff; color: var(--mh-coral); display: grid; place-items: center; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
.mh-play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: mh-ring 2.2s var(--mh-ease) infinite; }
.mh-play .mh-i { width: 30px; height: 30px; margin-inline-start: 4px; }
@media (max-width: 540px) {
    .mh-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; top: 40%; }
    .mh-play .mh-i { width: 22px; height: 22px; }
    .mh-player-title { inset-inline: 12px; bottom: 10px; }
}
@keyframes mh-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.mh-player-title { position: absolute; inset-inline: 18px; bottom: 16px; display: grid; gap: 8px; justify-items: start; }
.mh-chip { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 600 .74rem/1.2 var(--mh-body); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mh-player-h { font: 800 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.1 var(--mh-display); letter-spacing: -.02em; }
.mh-player-bar { display: block; padding: 14px 6px 4px; color: #CBD5E1; font-size: .82rem; }
.mh-pb-track { display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.mh-pb-track span { display: block; height: 100%; width: 38%; background: linear-gradient(90deg, var(--mh-coral-bright), var(--mh-sun)); border-radius: 5px; }
.mh-pb-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.mh-features { list-style: none; margin: 30px 0 30px; padding: 0; display: grid; gap: 16px; }
.mh-features li { display: flex; gap: 14px; align-items: flex-start; }
.mh-features .mh-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--mh-violet-soft); color: var(--mh-violet); }
.mh-features b { display: block; font: 700 1.02rem/1.3 var(--mh-display); color: var(--mh-ink); }
.mh-features li > span > span { color: var(--mh-ink-3); font-size: .94rem; }
.mh-more-courses { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.mh-more-courses a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--mh-line); text-decoration: none; color: var(--mh-ink); }
.mh-more-courses a span { flex: 1; font-weight: 600; }
.mh-more-courses small { color: var(--mh-ink-3); }
.mh-more-courses .mh-i { color: var(--mh-coral); }

/* ---------------------------------------------------------------- tutors */
.mh-tutors { background: linear-gradient(180deg, var(--mh-bg), #fff); }
.mh-tutors-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 6vw, 90px); align-items: center; }
@media (min-width: 1000px) { .mh-tutors-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.mh-how { list-style: none; margin: 32px 0 36px; padding: 0; display: grid; counter-reset: mh-how; }
.mh-how li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.mh-how li::before { counter-increment: mh-how; content: counter(mh-how); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--mh-line-2); font: 700 1rem/1 var(--mh-display); color: var(--mh-ink); z-index: 1; }
.mh-how li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 21px; top: 44px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--mh-line-2) 0 6px, transparent 6px 12px); }
.mh-how b { display: block; font: 700 1.1rem/1.3 var(--mh-display); padding-top: 10px; color: var(--mh-ink); }
.mh-how li > span > span { color: var(--mh-ink-3); }
.mh-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.mh-tutor-stage { position: relative; padding: 30px 0 40px; }
.mh-cal { position: absolute; inset-inline-end: 0; top: 0; width: min(250px, 60%); padding: 18px; border-radius: 22px; background: var(--mh-navy); color: #fff; rotate: 5deg; box-shadow: var(--mh-shadow-lg); }
.mh-cal-m { font: 700 .78rem/1 var(--mh-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mh-on-dark-2); }
.mh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; font-size: .78rem; text-align: center; color: var(--mh-on-dark-2); }
.mh-cal-grid span { padding: 6px 0; border-radius: 8px; }
.mh-cal-grid .is-hl { background: var(--mh-coral-bright); color: #fff; font-weight: 700; animation: mh-cell 2.4s ease-in-out infinite; }
@keyframes mh-cell { 50% { box-shadow: 0 0 0 6px rgba(240, 71, 58, .25); } }
.mh-tutor { position: relative; z-index: 2; width: min(100%, 470px); margin-top: 70px; padding: 24px; border-radius: 28px; background: #fff; border: 1px solid var(--mh-line); box-shadow: var(--mh-shadow-lg); display: grid; gap: 16px; }
.mh-tutor-top { display: flex; align-items: center; gap: 14px; }
.mh-avatar { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; object-fit: cover; background: linear-gradient(135deg, var(--mh-violet), var(--mh-sky)); color: #fff; font: 800 1.3rem/1 var(--mh-display); flex: none; }
.mh-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mh-tutor-name { display: flex; align-items: center; gap: 6px; font: 750 1.25rem/1.2 var(--mh-display); color: var(--mh-ink); }
.mh-tutor-name .mh-i { color: var(--mh-sky); width: 20px; height: 20px; }
.mh-tutor-place { color: var(--mh-ink-3); font-size: .9rem; }
.mh-price { text-align: end; display: grid; }
.mh-price b { font: 800 1.3rem/1 var(--mh-display); color: var(--mh-ink); }
.mh-price span { color: var(--mh-ink-3); font-size: .8rem; }
.mh-tutor-headline { color: var(--mh-ink-2); }
.mh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-chips span { padding: 7px 12px; border-radius: 999px; background: var(--mh-bg); border: 1px solid var(--mh-line); font-size: .82rem; font-weight: 600; color: var(--mh-ink-2); }
.mh-chips .is-on { background: var(--mh-mint-soft); border-color: transparent; color: #075E4C; }
.mh-tutor-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--mh-line); font-size: .88rem; }
.mh-rating { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mh-ink); }
.mh-rating .mh-i { color: var(--mh-sun); }
.mh-rating small { font-weight: 500; color: var(--mh-ink-3); }
.mh-next { display: inline-flex; align-items: center; gap: 8px; color: var(--mh-ink-2); }
.mh-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--mh-mint); box-shadow: 0 0 0 0 rgba(14, 154, 125, .5); animation: mh-pulse 2s infinite; }
@keyframes mh-pulse { 70% { box-shadow: 0 0 0 9px rgba(14, 154, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 154, 125, 0); } }
@media (max-width: 480px) {
    .mh-tutor { padding: 18px; }
    .mh-tutor-top { flex-wrap: wrap; }
    .mh-who { flex: 1 1 140px; }
    .mh-price { flex: 1 0 100%; display: flex; align-items: baseline; gap: 6px; text-align: start; }
}
.mh-verified { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 10px; border-radius: 999px; background: var(--mh-sky-soft); color: #174F94; font: 700 .76rem/1 var(--mh-body); }

/* ---------------------------------------------------------------- parents & teachers */
.mh-people { padding-top: clamp(40px, 6vw, 80px); }
.mh-persona-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .mh-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mh-persona { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3.5vw, 44px); border-radius: 32px; overflow: hidden; }
.mh-persona.is-parent { background: var(--mh-sky-soft); }
.mh-persona.is-teacher { background: var(--mh-coral-soft); }
.mh-persona h3 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 770; letter-spacing: -.035em; line-height: 1.08; color: var(--mh-ink); }
.mh-persona p { color: var(--mh-ink-2); }
.mh-ui { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 26px 50px -32px rgba(14, 26, 79, .5); display: grid; gap: 12px; }
.mh-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mh-ui-head b { font: 700 .95rem/1.2 var(--mh-display); color: var(--mh-ink); }
.mh-ex { padding: 4px 8px; border-radius: 999px; background: var(--mh-bg); color: var(--mh-ink-3); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mh-prog { display: grid; gap: 6px; font-size: .88rem; color: var(--mh-ink); }
.mh-prog-top { display: flex; justify-content: space-between; gap: 10px; }
.mh-prog-top span:last-child { flex: none; white-space: nowrap; color: var(--mh-ink-3); font-variant-numeric: tabular-nums; }
.mh-prog-bar { height: 7px; border-radius: 5px; background: var(--mh-bg); overflow: hidden; }
.mh-prog-bar i { display: block; height: 100%; border-radius: 5px; background: var(--c, var(--mh-sky)); width: var(--w); transform-origin: 0 50%; }
.mh-status { position: relative; height: 34px; }
.mh-status span { position: absolute; inset-block: 0; inset-inline-start: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.mh-st-wait { background: var(--mh-sun-soft); color: #7A4A00; animation: mh-st-a 6s infinite; }
.mh-st-pub { background: var(--mh-mint-soft); color: #075E4C; animation: mh-st-b 6s infinite; }
@keyframes mh-st-a { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes mh-st-b { 0%, 42% { opacity: 0; transform: translateY(8px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
.mh-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: auto; }
.mh-text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--mh-ink); text-decoration: none; }
.mh-text-link .mh-i { transition: transform .3s var(--mh-ease); }
.mh-text-link:hover .mh-i { transform: translateX(3px); }

/* ---------------------------------------------------------------- news */
.mh-news { padding-top: clamp(40px, 6vw, 80px); }
.mh-news-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mh-news-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--mh-line); text-decoration: none; color: var(--mh-ink); transition: translate .4s var(--mh-ease), box-shadow .4s; }
.mh-news-card:hover { translate: 0 -4px; box-shadow: var(--mh-shadow-lg); color: var(--mh-ink); }
.mh-news-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mh-news-body { display: grid; gap: 8px; padding: 20px; }
.mh-news-body small { color: var(--mh-ink-3); }
.mh-news-body b { font: 700 1.15rem/1.25 var(--mh-display); }
.mh-news-body span { color: var(--mh-ink-2); font-size: .94rem; }

/* ---------------------------------------------------------------- the closing call */
.mh-cta-final { padding-block: clamp(40px, 6vw, 80px) clamp(80px, 10vw, 130px); }
.mh-cta-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; padding: clamp(48px, 7vw, 100px) clamp(22px, 5vw, 80px); background: radial-gradient(70% 90% at 100% 0%, #3B2AA6 0, transparent 60%), radial-gradient(60% 80% at 0% 100%, #7A1E2E 0, transparent 55%), var(--mh-navy-deep); color: #fff; text-align: center; }
.mh-cta-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.mh-orbit-slow { transform-origin: 600px 330px; animation: mh-spin 60s linear infinite; }
.mh-cta-panel h2 { margin: 0; font-size: clamp(2.3rem, 1.3rem + 4vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: #fff; }
.mh-cta-panel .mh-lead { color: var(--mh-on-dark-2); margin: 20px auto 34px; }
.mh-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mh-login { margin-top: 22px; color: var(--mh-on-dark-2); font-size: .95rem; }
.mh-login a { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- scroll-driven entrances
   Where the browser has view timelines, sections rise as they enter. Elsewhere
   the JS fallback moves them from a visible, slightly offset resting state —
   nothing is ever hidden while waiting for a script. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .mh-reveal { animation: mh-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; }
        .mh-reveal.mh-d1 { animation-range: entry 12% cover 32%; }
        .mh-reveal.mh-d2 { animation-range: entry 19% cover 38%; }
        @keyframes mh-rise { from { opacity: 0; transform: translateY(56px) scale(.98); } to { opacity: 1; transform: none; } }
        .mh-exams-shell { animation: mh-open-up linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
        @keyframes mh-open-up { from { clip-path: inset(0 max(8px, calc(var(--mh-gutter) - 10px)) round 44px); } to { clip-path: inset(0 0 round 0); } }
        .mh-r1 { animation: mh-tilt-a linear both; animation-timeline: view(); }
        .mh-r2 { animation: mh-tilt-b linear both; animation-timeline: view(); }
        @keyframes mh-tilt-a { from { rotate: -6deg; } to { rotate: -1deg; } }
        @keyframes mh-tilt-b { from { rotate: 5deg; } to { rotate: 1deg; } }
        .mh-nb-margin { animation: mh-draw-y linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
        @keyframes mh-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        .mh-doodle [pathLength] { stroke-dasharray: 1; animation: mh-stroke-in linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
        @keyframes mh-stroke-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
        .mh-prog-bar i { animation: mh-bar-in linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
        @keyframes mh-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .mh-player { animation: mh-zoom-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
        @keyframes mh-zoom-in { from { transform: scale(.9) rotate(-1.5deg); } to { transform: none; } }
    }
}
.mh-no-sda .mh-reveal { transform: translateY(28px); transition: transform 1s var(--mh-ease); }
.mh-no-sda .mh-reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .mh *, .mh *::before, .mh *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
    .mh-float, .mh-girl { translate: none !important; }
}