/* Hero LED : le canvas remplace la grille de points du hero. Comme dans la
   référence, seules les diodes allumées se voient (pas de grille de fond). */
.mc-home-hero .mi-led-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.mc-home-hero.mi-led-actif::before { opacity: 0; }

/* L'intro LED remplace l'intro Lottie plein écran (une seule intro). */
html.mi-led .mc-app-intro { display: none !important; }
html.mi-led body.mc-intro-active { overflow: auto; }

/* Texte caché jusqu'à l'explosion, puis il sort du flou. Secours : si le
   module ne démarre pas, tout réapparaît seul après 3 s. */
html.mi-led-intro .mc-hero-copy > * { opacity: 0; animation: mi-led-secours 1ms calc(3s * var(--mi-led-lent, 1)) forwards; }
html.mi-led-intro .mc-hero-copy::before { opacity: 0; }
.mc-hero-copy::before { transition: opacity calc(900ms * var(--mi-led-lent, 1)) ease; }
@keyframes mi-led-secours { to { opacity: 1; } }

html.mi-led-intro.mi-led-boom .mc-hero-copy::before { opacity: 1; }
html.mi-led-intro.mi-led-boom .mc-hero-copy > * {
  opacity: 1;
  animation: mi-led-net calc(720ms * var(--mi-led-lent, 1)) cubic-bezier(.2, .8, .2, 1) both;
}
html.mi-led-boom .mc-hero-copy > h1 { animation-delay: calc(40ms * var(--mi-led-lent, 1)) !important; }
html.mi-led-boom .mc-hero-copy > .mc-hero-badge { animation-delay: calc(140ms * var(--mi-led-lent, 1)) !important; }
html.mi-led-boom .mc-hero-copy > .mc-hero-kicker { animation-delay: calc(100ms * var(--mi-led-lent, 1)) !important; }
html.mi-led-boom .mc-hero-copy > p:not(.mc-hero-kicker) { animation-delay: calc(200ms * var(--mi-led-lent, 1)) !important; }
html.mi-led-intro.mi-led-boom .mc-hero-copy > .mc-lime-button {
  animation: mi-led-bouton calc(900ms * var(--mi-led-lent, 1)) var(--mi-elastique, cubic-bezier(.34, 1.56, .64, 1)) calc(300ms * var(--mi-led-lent, 1)) both;
}
@keyframes mi-led-net { from { opacity: 0; filter: blur(18px); transform: scale(.955); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes mi-led-bouton { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }

/* Atelier du prototype : rejouer, ralentir, parcourir l'intro image par image. */
.mi-led-atelier { position: fixed; z-index: 2147483000; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center; padding: 8px 10px; border-radius: 14px; background: rgba(6, 12, 40, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .14); color: #eaf1ff; font: 600 12px/1 Inter, system-ui, sans-serif; box-shadow: 0 12px 40px #0006; }
.mi-led-atelier button { padding: 7px 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .08); color: inherit; font: inherit; cursor: pointer; }
.mi-led-atelier button:hover { background: rgba(255, 255, 255, .16); }
.mi-led-atelier button.on { background: #edff22; color: #07122d; }
.mi-led-atelier .grp { display: inline-flex; gap: 2px; padding: 2px; border-radius: 11px; background: rgba(255, 255, 255, .05); }
.mi-led-atelier input[type=range] { width: 180px; accent-color: #edff22; }
.mi-led-atelier output { min-width: 52px; font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; color: #c8dcff; }

/* ===== Objets 3D autour du titre (hero-objets.js) : remplacent les écrans LED =====
   Réf. Mobbin (Pitch) : objets flottants nets, sans ombre au sol, qui se chevauchent un peu, posés
   au-dessus du dégradé blanc. Ordinateur (≥ 1000 px) : un groupe de chaque côté du titre. Tablette et
   mobile : une bande au-dessus du texte (PS5, Switch) et une manette de chaque côté du bouton. Chaque objet est un lien
   vers sa fiche. Les diodes LED restent en fond (anneau, scintillement). */
@media (max-width: 999px) {
  html.mi-objets .mc-home-hero .mc-hero-copy { margin-top: clamp(76px, 22vw, 130px); }
}
.mc-home-hero .mi-objets-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mc-home-hero .mc-hero-copy { z-index: 3; }
html.mi-objets .mc-home-hero .mc-hero-copy { pointer-events: none; }
html.mi-objets .mc-home-hero .mc-hero-copy > * { pointer-events: auto; }
.mi-objet { position: absolute; left: var(--x); top: var(--y); z-index: var(--plan); translate: -50% -50%; opacity: 0;
  pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.mi-objet-suivi { position: relative; display: block;
  transform: translate3d(calc(var(--px, 0) * var(--d) * 1px), calc(var(--py, 0) * var(--d) * 1px), 0);
  transition: scale 420ms cubic-bezier(.2, .9, .3, 1.25); }
.mi-objet img { display: block; width: auto; height: auto; max-width: var(--t); max-height: var(--t); user-select: none; -webkit-user-drag: none;
  transform: rotate(var(--r)); animation: mi-objet-flotte var(--flotte) ease-in-out calc(var(--i) * -1.1s) infinite alternate; }
/* survol : l'objet avance un peu et son nom apparaît dessous (pastille du site) */
.mi-objet-nom { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 4px; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #0b1440;
  font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(6, 12, 50, .18);
  opacity: 0; transition: opacity 200ms ease, translate 260ms cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.mi-objet-nom::after { content: " →"; }
@media (hover: hover) and (pointer: fine) {
  .mi-objet:hover { z-index: 9; }
  .mi-objet:hover .mi-objet-suivi { scale: 1.07; }
  .mi-objet:hover .mi-objet-nom { opacity: 1; translate: -50% 0; }
}
.mi-objet:active .mi-objet-suivi { scale: .96; transition-duration: 120ms; }
.mi-objets-la .mi-objet { animation: mi-objet-jaillit 1000ms cubic-bezier(.16, 1.18, .3, 1) calc(120ms + var(--i) * 55ms) both; }
.mi-objets-fixe .mi-objet { animation: none; opacity: 1; }
@keyframes mi-objet-jaillit {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes mi-objet-flotte {
  from { transform: translateY(-3px) rotate(var(--r)); }
  to { transform: translateY(4px) rotate(calc(var(--r) + .8deg)); }
}
@media (prefers-reduced-motion: reduce) { .mi-objet img { animation: none; } .mi-objet-suivi { transition: none; } }

/* ===== Cascade après l'explosion (hero-cascade.js) : le reste de la page monte ligne par ligne =====
   Pendant l'explosion, l'en-tête et les sections visibles sont cachés (secours : réapparition seule
   après 3 s). Lignes de texte : chacune sort de son propre masque. Blocs : montée + fondu. */
html.mi-led-intro:not(.mi-led-boom) :is(header.hdr, .mc-home-hero ~ section) { opacity: 0; animation: mi-led-secours 1ms calc(3s * var(--mi-led-lent, 1)) forwards; }
html.mi-cascade-pret .mc-hero-copy > :not(.mi-cascade) { opacity: 1 !important; animation: none !important; filter: none !important; }
.mi-ligne { display: block; overflow: hidden; padding: .14em .06em .2em; margin: -.14em -.06em -.2em; }
.mi-ligne-in { display: block; }
html.mi-cascade-pret .mi-cascade-l { translate: 0 112% !important; }
html.mi-cascade-pret .mi-cascade { opacity: 0 !important; translate: 0 22px !important; animation: none !important; filter: none !important; }
html.mi-cascade-pret.mi-cascade-go .mi-cascade-l { translate: 0 0 !important; transition: translate 750ms cubic-bezier(.2, .85, .25, 1) var(--mi-d, 0ms); }
html.mi-cascade-pret.mi-cascade-go .mi-cascade { opacity: 1 !important; translate: 0 0 !important;
  transition: opacity 500ms ease var(--mi-d, 0ms), translate 750ms cubic-bezier(.2, .85, .25, 1) var(--mi-d, 0ms); }