/* Maneep 3D : bloc d'animation, transparent, aux proportions de la scène */
.m3d{position:relative;width:100%;aspect-ratio:var(--m3d-ratio,1/1);margin:0 auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@supports not (aspect-ratio:1/1){.m3d{height:0;padding-top:var(--m3d-pad,100%)}}
.m3d-stage{position:absolute;top:0;left:0;right:0;bottom:0;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.m3d-stage .m3d-img{position:absolute;max-width:none;object-fit:contain;transition:opacity .5s;pointer-events:none}
.m3d-stage canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .5s}
.m3d-stage.is-3d{cursor:pointer}
.m3d-stage.is-3d .m3d-img{opacity:0}
.m3d-stage.is-3d canvas{opacity:1}

/* pastille et compteur (scènes qui en ont) */
.m3d-hud{position:absolute;left:0;right:0;bottom:1%;display:flex;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s .6s}
.m3d-stage.is-3d .m3d-hud{opacity:1}
.m3d-hud [hidden]{display:none!important}
.m3d-hud span{font-size:13px;font-weight:600;line-height:1.2;padding:8px 16px;border-radius:999px;white-space:nowrap}
.m3d-hud [data-o2="hint"]{color:#FAF7F1;background:rgba(11,27,43,.6);border:1px solid rgba(0,255,202,.45);animation:m3d-breathe 2.2s ease-in-out infinite}
.m3d-hud [data-o2="count"]{color:#0B1B2B;background:#1EFDCA;box-shadow:0 0 24px rgba(0,255,202,.45);font-variant-numeric:tabular-nums}
.m3d-hud [data-o2="count"].pop{animation:m3d-pop .35s ease-out}
.m3d--podium .m3d-hud [data-o2="hint"]{background:#1C3350;color:#fff;border-color:transparent}
.m3d-pause{position:absolute;right:8px;bottom:8px;z-index:2;font:500 13px/1 inherit;color:#E2E2E2;background:rgba(11,27,43,.35);
  border:1px solid rgba(226,226,226,.25);border-radius:999px;padding:8px 14px;cursor:pointer}
.m3d-pause[hidden]{display:none}
.m3d-pause:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes m3d-breathe{50%{box-shadow:0 0 18px rgba(0,255,202,.45)}}
@keyframes m3d-pop{0%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.m3d-hud [data-o2="hint"],.m3d-hud [data-o2="count"].pop{animation:none}}

/* zoom : le bloc grandit et déborde ; ses marges négatives gardent la même emprise dans la page */
.m3d--zoom{--m3d-zc:var(--m3d-z,1);width:calc(var(--m3d-zc) * 100%);max-width:none;
  margin-top:calc((1 - var(--m3d-zc)) * var(--m3d-hw,1) * 50%);margin-bottom:calc((1 - var(--m3d-zc)) * var(--m3d-hw,1) * 50%);
  margin-left:calc((1 - var(--m3d-zc)) * var(--m3d-ax,.5) * 100%);margin-right:calc((1 - var(--m3d-zc)) * (1 - var(--m3d-ax,.5)) * 100%)}
@media (max-width:959px){.m3d--zoom{--m3d-zc:var(--m3d-zm,1)}}
@supports not (aspect-ratio:1/1){.m3d--zoom{padding-top:calc(var(--m3d-pad,100%) * var(--m3d-zc))}}

/* débordement : la zone de dessin dépasse du bloc, les clics restent sur le bloc */
.m3d--bleed .m3d-stage canvas{top:calc(var(--m3d-b,0) * -100%);left:calc(var(--m3d-b,0) * -100%);
  width:calc((1 + 2 * var(--m3d-b,0)) * 100%)!important;height:calc((1 + 2 * var(--m3d-b,0)) * 100%)!important;pointer-events:none}
.m3d--bleed{z-index:2}