/* 4R Digital — maquettes animées. Tout est en « em » : la maquette s'adapte à la largeur de son bloc. */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }

.mock { container-type: inline-size; position: relative; width: 100%; }
.mk-in { position: relative; font-size: clamp(9px, 3.35cqw, 15.5px); line-height: 1.35; font-family: var(--font-sans); color: var(--ink);
  background: #fff; border-radius: 1.3em; box-shadow: 0 0 0 1px #17110B14, 0 1.4em 3em #17110B26, 0 .3em .7em #17110B14; overflow: hidden; }
.mock-web .mk-in, .mock-repeat .mk-in { background: none; box-shadow: none; overflow: visible; }
.mk-body { position: relative; padding: 1.3em; }
.mk-ic { width: 1.25em; height: 1.25em; flex: none; }
.mk-in small { font-size: .78em; color: var(--ink-muted); display: block; }
.mk-in b { font-family: var(--font-display); font-weight: 600; }
.mk-line { display: block; height: .55em; border-radius: 1em; background: #ECE6DD; margin: .45em 0; width: calc(92% - var(--i, 0) * 9%); }
.mk-line.w { width: auto; }

/* Barre de navigateur */
.mk-bar { display: flex; align-items: center; gap: .4em; padding: .75em 1em; background: var(--surface-alt); border-bottom: 1px solid #17110B10; }
.mk-bar i { width: .65em; height: .65em; border-radius: 50%; background: #DDD5CA; }
.mk-bar i:nth-child(1) { background: #F0902A; } .mk-bar i:nth-child(2) { background: #A8C545; } .mk-bar i:nth-child(3) { background: #2ECC9C; }
.mk-url { margin-left: .8em; flex: 1; font-size: .8em; color: var(--ink-muted); background: #fff; border-radius: 1em; padding: .25em .9em; }

/* Hexagones miniatures */
.mk-hex { --c: var(--sun); display: grid; place-items: center; width: 2.6em; aspect-ratio: .866; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c), #fff 25%), var(--c) 55%, color-mix(in srgb, var(--c), #000 15%)); color: var(--ink); font-size: 1em; }
.mk-hex-mint { --c: var(--mint); } .mk-hex-orange { --c: var(--orange); } .mk-hex-night { --c: var(--night-2); color: var(--paper); }

/* ---------- SEO ---------- */
.mk-search { display: flex; align-items: center; gap: .6em; border-radius: 2em; padding: .6em 1em; box-shadow: inset 0 0 0 1.5px #DDD5CA; margin-bottom: 1em; }
.mk-type { white-space: nowrap; overflow: hidden; font-weight: 500; }
.mk-results { position: relative; height: 19.5em; }
.mk-res { position: absolute; left: 0; right: 0; top: 0; height: 3.5em; display: flex; align-items: center; gap: .8em; padding: 0 .8em; border-radius: .8em; transform: translateY(calc(var(--to) * 3.9em)); }
.mk-res > div { flex: 1; } .mk-res .mk-line:first-child { width: 70%; background: #E2DBD0; } .mk-res .mk-line:last-child { width: 45%; }
.mk-fav { width: 1.8em; height: 1.8em; border-radius: 50%; background: #ECE6DD; flex: none; display: grid; place-items: center; }
.mk-me { background: var(--mint-soft); box-shadow: inset 0 0 0 1.5px var(--mint); z-index: 1; }
.mk-me b { display: block; font-size: .95em; } .mk-me small { color: var(--mint-deep); }
.mk-fav-me { background: var(--orange); font: 700 .7em var(--font-display); width: 2.6em; height: 2.6em; }
.mk-rank { font: 700 1.5em var(--font-display); color: var(--mint-deep); }
.mk-rank sup { font-size: .5em; }

/* ---------- Réseaux sociaux ---------- */
.mk-post-head { display: flex; align-items: center; gap: .7em; margin-bottom: .9em; }
.mk-post-head > div { flex: 1; }
.mk-dots { color: var(--ink-muted); letter-spacing: .1em; }
.mk-post-img { position: relative; height: 12em; border-radius: .9em; background: var(--night); overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .3em; }
.mk-post-img .mk-hex { width: 4.2em; }
.mk-post-img .mk-hex:nth-child(2) { margin-top: 3em; }
.mk-post-hand { position: absolute; left: 1em; bottom: .7em; font: 600 1.7em var(--font-hand); color: var(--sun); transform: rotate(-3deg); }
.mk-actions { display: flex; gap: 1.6em; padding-top: .9em; }
.mk-actions > span { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; }
.mk-like { color: #D9468A; }
.mk-heart { position: absolute; left: 2.2em; bottom: 2.4em; color: #D9468A; opacity: 0; }
.mk-heart .mk-ic { width: 1.4em; height: 1.4em; fill: currentColor; }
.mk-count { --n: var(--to); counter-reset: n var(--n); }
.mk-count::after { content: counter(n); }

/* ---------- Google Ads ---------- */
.mk-ad { border-radius: .9em; padding: .9em 1em; background: #F4F8E8; box-shadow: inset 0 0 0 1.5px var(--sun); }
.mk-ad small b { color: var(--ink); }
.mk-ad-t { display: block; margin: .2em 0; color: var(--orange-deep); }
.mk-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin: 1em 0; }
.mk-kpi { position: relative; background: var(--surface); border-radius: .8em; padding: .7em .9em; }
.mk-kpi b { font-size: 1.5em; }
.mk-trend { position: absolute; right: .8em; top: .7em; font-size: .9em; }
.mk-trend.up { color: var(--mint-deep); } .mk-trend.down { color: var(--mint-deep); }
.mk-cpc { display: inline-block; }
.mk-bars { display: flex; align-items: flex-end; gap: .45em; height: 6.5em; }
.mk-bars span { flex: 1; height: calc(var(--h) * 1%); border-radius: .35em .35em .1em .1em; background: linear-gradient(180deg, var(--orange), color-mix(in srgb, var(--orange), #000 12%)); transform-origin: bottom; }

/* ---------- Pub Facebook & LinkedIn ---------- */
.mk-radar { position: relative; width: 70%; aspect-ratio: 1; margin: 0 auto 1em; border-radius: 50%; background: radial-gradient(circle, #2A211A 0 60%, #17110B 61%); overflow: hidden; }
.mk-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff26; }
.mk-ring.r1 { width: 33%; height: 33%; } .mk-ring.r2 { width: 66%; height: 66%; } .mk-ring.r3 { width: 99%; height: 99%; }
.mk-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #2ECC9C00 0 70%, #2ECC9C55 100%); }
.mk-pt { position: absolute; width: 5%; aspect-ratio: 1; border-radius: 50%; background: #ffffff55; translate: -50% -50%; }
.mk-pt.tg { background: var(--orange); box-shadow: 0 0 0 .3em #F0902A33; }
.mk-tags { display: flex; flex-wrap: wrap; gap: .45em; justify-content: center; }
.mk-tags span { display: inline-flex; align-items: center; gap: .35em; padding: .35em .8em; border-radius: 2em; background: var(--surface-alt); font-weight: 500; font-size: .9em; }
.mk-switch { position: absolute; top: 1.3em; right: 1.3em; display: flex; flex-direction: column; gap: .3em; font-size: .75em; font-weight: 700; }
.mk-switch span { padding: .3em .7em; border-radius: 2em; background: var(--surface-alt); color: var(--ink-muted); }
.mk-switch .on { background: var(--mint); color: var(--ink); }

/* ---------- E-mail ---------- */
.mk-inbox-h { display: flex; align-items: center; gap: .5em; margin-bottom: .8em; }
.mk-inbox { display: flex; flex-direction: column; gap: .45em; }
.mk-mail { display: flex; align-items: center; gap: .7em; padding: .65em .8em; border-radius: .8em; background: var(--surface); }
.mk-mail > span:first-child { width: .6em; height: .6em; border-radius: 50%; flex: none; }
.mk-mail > div { flex: 1; min-width: 0; }
.mk-mail .mk-line:last-child { width: 60%; }
.mk-new { background: #fff; box-shadow: 0 0 0 1.5px var(--orange), 0 .6em 1.2em #17110B1a; }
.mk-new small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-unread { background: var(--orange); }
.mk-open { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--ink); }
.mk-open .mk-ic { width: 1em; height: 1em; }
.mk-gauge-row { display: flex; align-items: center; gap: .9em; margin-top: 1em; }
.mk-gauge-row b { font-size: 1.5em; }
.mk-gauge, .mk-score-ring svg { width: 3.6em; transform: rotate(-90deg); flex: none; }
.mk-gauge circle, .mk-score-ring circle { fill: none; stroke: #ECE6DD; stroke-width: 5; }
.mk-gauge .mk-gauge-v, .mk-score-ring .mk-gauge-v { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: var(--v) 100; }

/* ---------- Contenu ---------- */
.mk-toolbar { display: flex; gap: .4em; margin-bottom: 1em; }
.mk-toolbar > * { display: grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .4em; border-radius: .5em; background: var(--surface-alt); font-size: .85em; font-style: normal; }
.mk-toolbar .mk-ic { width: 1.2em; height: 1.2em; }
.mk-doc { font-size: .95em; }
.mk-h { display: block; font: 600 1.25em/1.2 var(--font-display); margin-bottom: .6em; }
.mk-doc p { margin: 0 0 .6em; display: flex; flex-wrap: wrap; align-items: center; column-gap: .4em; }
.mk-doc p .mk-line { flex: 1 1 40%; margin: .3em 0; }
.mk-doc p:first-of-type .mk-line, .mk-doc p:last-of-type .mk-line { flex-basis: 100%; }
.mk-doc p:first-of-type .mk-line:last-child { flex-basis: 64%; flex-grow: 0; }
.mk-doc mark { background: #2ECC9C40; border-radius: .3em; padding: 0 .2em; color: inherit; }
.mk-kw { font-weight: 600; font-size: .9em; }
.mk-score { display: flex; align-items: center; gap: .8em; margin-top: 1em; padding: .7em .9em; border-radius: .8em; background: var(--surface); }
.mk-meter { flex: 1; height: .6em; border-radius: 1em; background: #ECE6DD; overflow: hidden; }
.mk-meter i { display: block; height: 100%; width: 88%; border-radius: inherit; background: linear-gradient(90deg, var(--sun), var(--mint)); }

/* ---------- Site web ---------- */
.mk-duo { position: relative; padding: 0 12% 6% 0; }
.mk-browser { background: #fff; border-radius: 1.3em; overflow: hidden; box-shadow: 0 0 0 1px #17110B14, 0 1.4em 3em #17110B26; }
.mk-site { display: flex; flex-direction: column; gap: 1em; }
.mk-nav { display: flex; align-items: center; gap: .6em; }
.mk-nav .mk-line { width: 2.6em; margin: 0; }
.mk-nav .mk-line:first-of-type { margin-left: auto; }
.mk-logo { width: 2.4em; height: 1em; border-radius: .3em; background: var(--orange); }
.mk-hero { display: flex; align-items: center; gap: 1em; background: var(--surface-alt); border-radius: .9em; padding: 1.1em; }
.mk-hero > div { flex: 1; }
.mk-hero .mk-hex { width: 4.5em; }
.mk-line.t { height: .9em; background: #2A211A; width: 90%; }
.mk-line.t.s { width: 60%; background: #CFC6BA; height: .6em; }
.mk-pill { display: block; width: 6em; height: 1.6em; border-radius: 1em; background: var(--orange); margin-top: .7em; }
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mk-cards span { height: 4.4em; border-radius: .7em; background: var(--surface); box-shadow: inset 0 0 0 1px #17110B10; }
.mk-phone { position: absolute; right: 0; bottom: 0; width: 30%; aspect-ratio: .5; background: #fff; border-radius: 1.4em; padding: 1.6em .8em .8em; box-shadow: 0 0 0 .35em var(--night), 0 1.4em 3em #17110B40; display: flex; flex-direction: column; gap: .2em; }
.mk-notch { position: absolute; top: .5em; left: 50%; width: 30%; height: .5em; border-radius: 1em; background: var(--night); translate: -50% 0; }
.mk-phone .mk-pill { width: 70%; height: 1.2em; margin: .4em 0; }
.mk-pblock { display: block; height: 3em; border-radius: .6em; background: var(--surface-alt); margin-top: .4em; }

/* ---------- Audit ---------- */
.mk-audit { display: grid; grid-template-columns: auto 1fr; gap: 1em 1.2em; align-items: center; }
.mk-score-ring { position: relative; display: grid; place-items: center; }
.mk-score-ring svg { width: 6.4em; }
.mk-score-ring b { position: absolute; top: 50%; left: 50%; translate: -50% -62%; font-size: 1.8em; }
.mk-score-ring small { position: absolute; top: 62%; left: 50%; translate: -50% 0; }
.mk-chart { width: 100%; height: 6.4em; }
.mk-area { fill: #2ECC9C26; }
.mk-path { fill: none; stroke: var(--mint-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.mk-checks { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45em; }
.mk-checks li { display: flex; align-items: center; gap: .7em; padding: .55em .8em; border-radius: .7em; background: var(--surface); font-weight: 500; }
.mk-checks span { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; }
.mk-checks .ok { background: var(--mint); } .mk-checks .warn { background: var(--sun); }
.mk-checks .mk-ic { width: .95em; height: .95em; }

/* ---------- Realize ---------- */
.mk-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.mk-tasks li { display: flex; align-items: center; gap: .8em; padding: .6em .8em; border-radius: .8em; background: var(--surface); font-weight: 500; }
.mk-tasks li > span:nth-child(2) { flex: 1; }
.mk-tasks .tile-xs { width: 2.1em; height: 2.1em; border-radius: .6em; }
.mk-tasks .tile-xs .ic { width: 1.25em; height: 1.25em; }
.mk-prog { display: block; height: .4em; border-radius: 1em; background: #ECE6DD; margin-top: .35em; overflow: hidden; }
.mk-prog i { display: block; height: 100%; width: 100%; background: var(--mint); border-radius: inherit; transform-origin: left; }
.mk-done { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--mint); }
.mk-done .mk-ic { width: 1em; height: 1em; }

/* ---------- Review ---------- */
.mk-report { display: flex; justify-content: space-around; align-items: flex-end; height: 11em; padding: 0 .5em; border-bottom: 1.5px solid #ECE6DD; }
.mk-grp { display: flex; flex-direction: column; align-items: center; gap: .4em; height: 100%; justify-content: flex-end; }
.mk-grp small { position: relative; top: 1.8em; }
.mk-pair { display: flex; gap: .3em; align-items: flex-end; height: 100%; }
.mk-pair span { width: 1.7em; height: calc(var(--h) * 1%); border-radius: .35em .35em 0 0; transform-origin: bottom; }
.mk-pair .a { background: #DDD5CA; }
.mk-pair .b { background: linear-gradient(180deg, var(--mint), var(--mint-deep)); }
.mk-legend { display: flex; gap: 1.2em; justify-content: center; margin-top: 2.6em; font-size: .8em; color: var(--ink-muted); }
.mk-legend i { display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .4em; vertical-align: -.05em; }
.mk-legend .a { background: #DDD5CA; } .mk-legend .b { background: var(--mint); }

/* ---------- Repeat ---------- */
.mk-quarters { padding: 2.6em 1.6em; }
.mk-qring { position: relative; width: 78%; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 .5em #fff, inset 0 0 0 .55em #17110B14; }
.mk-q { position: absolute; translate: -50% -50%; }
.mk-q .mk-hex { width: 5em; filter: drop-shadow(0 .3em .4em #00000026); }
.mk-q b { font-size: 1.3em; }
.q1 { left: 50%; top: 0; } .q2 { left: 100%; top: 50%; } .q3 { left: 50%; top: 100%; } .q4 { left: 0; top: 50%; }
.mk-qorbit { position: absolute; inset: 0; rotate: 45deg; }
.mk-qorbit i { position: absolute; left: 50%; top: -.45em; width: .9em; height: .9em; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 .2em var(--night); translate: -50% 0; }
.mk-qcenter { position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 .6em 1.4em #17110B1f; color: var(--orange-deep); }
.mk-qcenter .mk-ic { width: 45%; height: 45%; }
.mk-toast { position: absolute; right: 0; bottom: 6%; display: inline-flex; align-items: center; gap: .5em; padding: .6em 1em; border-radius: 2em; background: #fff; font-weight: 600; box-shadow: 0 .8em 1.8em #17110B26; }
.mk-toast .mk-ic { color: var(--mint-deep); }

/* =========================================================
   Animations : uniquement quand la maquette est à l'écran (.in)
   ========================================================= */
@keyframes mk-typing { 0% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mk-rank { 0%, 28% { transform: translateY(calc(var(--from) * 3.9em)); } 46%, 92% { transform: translateY(calc(var(--to) * 3.9em)); } 100% { transform: translateY(calc(var(--from) * 3.9em)); } }
@keyframes mk-rankpop { 0%, 44% { scale: 0; } 54% { scale: 1.25; } 60%, 92% { scale: 1; } 100% { scale: 0; } }
@keyframes mk-count { 0% { --n: 0; } 55%, 100% { --n: var(--to); } }
@keyframes mk-float-up { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -6em) scale(1.1); } }
@keyframes mk-grow-y { 0% { transform: scaleY(0); } 40%, 100% { transform: scaleY(1); } }
@keyframes mk-grow-x { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes mk-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes mk-orbit { from { rotate: 45deg; } to { rotate: 405deg; } }
@keyframes mk-pulse { 0%, 100% { box-shadow: 0 0 0 .2em #F0902A44; } 50% { box-shadow: 0 0 0 .7em #F0902A00; } }
@keyframes mk-pop { 0% { opacity: 0; scale: .6; } 60% { scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes mk-slide-in { 0%, 8% { opacity: 0; transform: translateY(-120%); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes mk-open { 0%, 40% { scale: 0; } 50% { scale: 1.2; } 56%, 100% { scale: 1; } }
@keyframes mk-gauge { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--v) 100; } }
@keyframes mk-write { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes mk-mark { 0%, 60% { background-color: #2ECC9C00; } 80%, 100% { background-color: #2ECC9C40; } }
@keyframes mk-meter { 0% { width: 18%; } 100% { width: 88%; } }
@keyframes mk-drop { 0% { opacity: 0; transform: translateY(-.8em); } 100% { opacity: 1; transform: none; } }
@keyframes mk-phone-in { 0% { opacity: 0; transform: translate(30%, 10%) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes mk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-task { 0%, 100% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } }
@keyframes mk-done { 0%, 28% { scale: 0; } 36% { scale: 1.25; } 42%, 92% { scale: 1; } 100% { scale: 0; } }
@keyframes mk-toast { 0%, 55% { opacity: 0; transform: translateY(.8em) scale(.9); } 65%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.mock.in .mk-type { animation: mk-typing 8s steps(26) infinite; }
.mock.in .mk-res { animation: mk-rank 8s var(--ease) infinite; }
.mock.in .mk-rank { animation: mk-rankpop 8s var(--ease) infinite; }

.mock.in .mk-count { animation: mk-count 2.4s var(--ease) both; }
.mock.in.mock-social .mk-count { animation: mk-count 6s ease-out infinite; }
.mock.in .mk-heart { animation: mk-float-up 2.4s ease-out infinite; }
.mock.in .mk-heart.h2 { --dx: 1.2em; animation-delay: .8s; }
.mock.in .mk-heart.h3 { --dx: -.8em; animation-delay: 1.6s; }
.mock.in .mk-post-img .mk-hex { animation: float 5s ease-in-out infinite; }
.mock.in .mk-post-img .mk-hex:nth-child(2) { animation-delay: -1.7s; }
.mock.in .mk-post-img .mk-hex:nth-child(3) { animation-delay: -3.4s; }

.mock.in .mk-bars span { animation: mk-grow-y 1s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.mock.in .mk-ad { animation: mk-pop .6s var(--ease) both; }

.mock.in .mk-sweep { animation: mk-spin 4s linear infinite; }
.mock.in .mk-pt { animation: mk-fade .4s both; animation-delay: calc(var(--i) * 60ms); }
.mock.in .mk-pt.tg { animation: mk-fade .4s both calc(var(--i) * 60ms), mk-pulse 2s ease-out infinite calc(1s + var(--i) * 200ms); }
.mock.in .mk-tags span { animation: mk-pop .5s var(--ease) both; animation-delay: calc(.9s + var(--i) * 180ms); }

.mock.in .mk-new { animation: mk-slide-in 6s var(--ease) infinite; }
.mock.in .mk-open { animation: mk-open 6s var(--ease) infinite; }
.mock.in .mk-gauge-v { animation: mk-gauge 1.6s var(--ease) both .3s; }

.mock.in .mk-doc .mk-line { animation: mk-write .9s ease-out both; animation-delay: calc(.2s + var(--i) * .35s); }
.mock.in .mk-doc mark { animation: mk-mark 3s ease both; }
.mock.in .mk-kw { animation: mk-write .6s ease-out both calc(.2s + var(--i) * .35s), mk-mark 3s ease both; }
.mock.in .mk-meter i { animation: mk-meter 2.6s var(--ease) both .4s; }

.mock.in .mk-site > * { animation: mk-drop .6s var(--ease) both; }
.mock.in .mk-site > :nth-child(2) { animation-delay: .25s; }
.mock.in .mk-site > :nth-child(3) { animation-delay: .5s; }
.mock.in .mk-phone { animation: mk-phone-in .9s var(--ease) both .8s; }

.mock.in .mk-path { animation: mk-draw 1.8s var(--ease) both .2s; }
.mock.in .mk-area { animation: mk-fade 1s ease both 1.2s; }
.mock.in .mk-checks li { animation: mk-drop .5s var(--ease) both; animation-delay: calc(1s + var(--i) * .25s); }

.mock.in .mk-prog i { animation: mk-task 6s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .5s); }
.mock.in .mk-tasks li:nth-child(1) .mk-prog i, .mock.in .mk-tasks li:nth-child(1) .mk-done { --i: 0; }
.mock.in .mk-tasks li:nth-child(2) .mk-prog i, .mock.in .mk-tasks li:nth-child(2) .mk-done { --i: 1; }
.mock.in .mk-tasks li:nth-child(3) .mk-prog i, .mock.in .mk-tasks li:nth-child(3) .mk-done { --i: 2; }
.mock.in .mk-tasks li:nth-child(4) .mk-prog i, .mock.in .mk-tasks li:nth-child(4) .mk-done { --i: 3; }
.mock.in .mk-done { animation: mk-done 6s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .5s); }

.mock.in .mk-pair span { animation: mk-grow-y 1.4s var(--ease) both; animation-delay: calc(var(--i, 0) * .15s); }
.mock.in .mk-grp:nth-child(2) .mk-pair span { --i: 1; } .mock.in .mk-grp:nth-child(3) .mk-pair span { --i: 2; }
.mock.in .mk-pair .b { animation-delay: calc(.5s + var(--i, 0) * .15s); }

.mock.in .mk-qorbit { animation: mk-orbit 6s linear infinite; }
.mock.in .mk-q .mk-hex { animation: float 6s ease-in-out infinite; }
.mock.in .q2 .mk-hex { animation-delay: -1.5s; } .mock.in .q3 .mk-hex { animation-delay: -3s; } .mock.in .q4 .mk-hex { animation-delay: -4.5s; }
.mock.in .mk-toast { animation: mk-toast 6s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .mock .mk-count { --n: var(--to); }
}

/* =====================================================================
   Mouvement « calme » : chaque maquette joue son histoire une fois quand elle
   entre à l'écran (et la rejoue si on y revient), puis reste immobile.
   ===================================================================== */
@keyframes mk-rank-once { 0%, 30% { transform: translateY(calc(var(--from) * 3.9em)); } 100% { transform: translateY(calc(var(--to) * 3.9em)); } }
@keyframes mk-rankpop-once { 0%, 70% { scale: 0; } 88% { scale: 1.15; } 100% { scale: 1; } }
@keyframes mk-task-once { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mk-done-once { 0%, 60% { scale: 0; } 85% { scale: 1.15; } 100% { scale: 1; } }
@keyframes mk-toast-once { 0%, 50% { opacity: 0; transform: translateY(.8em) scale(.95); } 100% { opacity: 1; transform: none; } }
@keyframes mk-heart-once { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -6em) scale(1.1); } }
@keyframes mk-orbit-once { from { rotate: 45deg; } to { rotate: 405deg; } }
.mock.in .mk-type { animation: mk-typing 3.2s steps(26) both; }
.mock.in .mk-res { animation: mk-rank-once 2.6s var(--out) both .6s; }
.mock.in .mk-rank { animation: mk-rankpop-once 2.6s var(--out) both .6s; }
.mock.in.mock-social .mk-count { animation: mk-count 2.4s var(--out) both .3s; }
.mock.in .mk-heart { animation: mk-heart-once 2s ease-out both; animation-delay: .6s; }
.mock.in .mk-heart.h2 { animation-delay: 1s; } .mock.in .mk-heart.h3 { animation-delay: 1.4s; }
.mock.in .mk-post-img .mk-hex, .mock.in .mk-q .mk-hex { animation: none; }
.mock.in .mk-sweep { animation: mk-spin 3s var(--out) 1 both; }
.mock.in .mk-pt.tg { animation: mk-fade .4s both calc(var(--i) * 60ms), mk-pulse 1.6s ease-out 2 calc(1s + var(--i) * 150ms); }
.mock.in .mk-new { animation: mk-slide-in 2.4s var(--out) both .2s; }
.mock.in .mk-open { animation: mk-open 2.4s var(--out) both .2s; }
.mock.in .mk-prog i { animation: mk-task-once 1.2s var(--out) both; animation-delay: calc(.3s + var(--i, 0) * .45s); }
.mock.in .mk-done { animation: mk-done-once 1.4s var(--out) both; animation-delay: calc(.3s + var(--i, 0) * .45s); }
.mock.in .mk-qorbit { animation: mk-orbit-once 3s var(--out) both .3s; }
.mock.in .mk-toast { animation: mk-toast-once 3s var(--out) both .3s; }