/* =============================================================
   Hero Mark!t : démonstration animée (Word → dialogue → avant/après
   → « Sauvegarder le bloc »). Images propres à chaque langue dans
   /assets/markit/<lang>/ (générées par tools/build-markit-assets.py).
   Toutes les positions sont en % d'une capture 1600 × 900.
   ============================================================= */
.mk-body { padding: 0; background: #fff; }
.mk-stage {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; user-select: none;
  --mk-word: none;
}
@media (max-width: 640px) { .mk-stage { aspect-ratio: 4 / 3; } }

.mk-cam { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; transform-origin: 0 0; container-type: inline-size; }
.mk-cam > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-cam > img.mk-strip { inset: auto; left: 0; top: 0; width: 100%; height: 20%; opacity: 0; }
.mk-cv { position: absolute; background: #fff; top: 29.1%; height: 64.2%; }
.mk-cv-a { left: 46.56%; width: 6.31%; }
.mk-cv-r { left: 52.875%; width: 26.8%; }
.mk-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .08); opacity: 0; }
.mk-dlg { position: absolute; inset: 0; opacity: 0; }
.mk-dlgin { position: absolute; inset: 0; transform: scale(.88); transform-origin: 50% 100%; }
.mk-win { position: absolute; left: 11.4375%; top: 13.222%; width: 78.6875%; height: 81.111%; display: block; box-shadow: 0 1.4cqw 5cqw rgba(0, 0, 0, .42); }
.mk-ax, .mk-bx { position: absolute; left: 30.125%; top: 26.444%; width: 23.1875%; height: 55.111%;
  background-image: var(--mk-word); background-repeat: no-repeat; background-size: 381.87% 160.14%; }
.mk-bx { background-position: 26.67% 79.88%; }
.mk-ax { background-position: 71.72% 79.88%; }
.mk-bar { position: absolute; top: -1%; bottom: -1%; width: 0; left: 0; pointer-events: none; opacity: 0; }
.mk-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.12cqw; width: .24cqw; background: var(--color-accent, #ff6b35); box-shadow: 0 0 .6cqw rgba(0, 0, 0, .4); }
.mk-bar b { position: absolute; top: 50%; left: 0; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw 0 0 -1.3cqw; border-radius: 50%; background: var(--color-accent, #ff6b35); box-shadow: 0 0 .8cqw rgba(0, 0, 0, .4); }
.mk-menu { position: absolute; left: 71.9375%; top: 23.556%; width: 18.125%; height: 60.111%; background: #fbfcfa; overflow: hidden; }
.mk-scroll { position: absolute; left: 0; top: 0; width: 94.14%; }
.mk-scroll img { display: block; width: 100%; height: auto; }
.mk-empty { position: absolute; background: url(/assets/markit/thumb-empty.png) 0 0 / 100% 100%; }
.mk-thumb { position: absolute; right: .25cqw; top: 0; width: .4cqw; background: rgba(0, 0, 0, .35); border-radius: .3cqw; }
.mk-fly { position: absolute; left: 19.6875%; top: 30%; width: 26.1875%; height: 62.444%; opacity: 0;
  background-image: var(--mk-word); background-repeat: no-repeat; background-size: 381.87% 160.14%; background-position: 71.72% 79.88%; }
.mk-rip { position: absolute; width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-radius: 50%; border: .4cqw solid var(--color-accent, #ff6b35); opacity: 0; z-index: 4; }
.mk-cursor { position: absolute; width: 15px; height: 15px; margin: -1.3px 0 0 -1.9px; transform: scale(var(--inv, 1)); transform-origin: 1.9px 1.3px; z-index: 5; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }
.mk-cursor svg { display: block; width: 100%; height: 100%; transform-origin: 1.9px 1.3px; }

/* Étapes cliquables, légende, commandes */
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.mk-chip {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--text-primary);
  transition: background-color .2s, color .2s, border-color .2s;
}
.mk-chip:hover { border-color: var(--color-accent, #ff6b35); }
.mk-chip[aria-pressed="true"] { background: var(--color-accent, #ff6b35); border-color: var(--color-accent, #ff6b35); color: #fff; }
.mk-chip:focus-visible, .mk-ctrl button:focus-visible { outline: 2px solid var(--color-accent, #ff6b35); outline-offset: 2px; }
.mk-caption { min-height: 3em; margin: 10px 4px 0; text-align: center; font-size: 13px; color: var(--text-secondary); }
.mk-caption p[hidden] { display: none; }
.mk-ctrl { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.mk-ctrl button {
  font: inherit; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-border); background: transparent; color: var(--text-secondary);
}
.mk-ctrl button:hover { color: var(--text-primary); border-color: var(--color-accent, #ff6b35); }
.mk-ctrl [hidden] { display: none; }

/* Page Mark!t (bureau) : la démonstration prend plus de place que le texte */
@media (min-width: 993px) {
  .product-hero.product-hero-anim .hero-container { grid-template-columns: 0.8fr 1.2fr; gap: 40px; }
}