/* AviX 3D — présentation au scroll du setup (model-viewer) */
.avx3d {
  --avx-acc: #C1C107;
  --avx-bg: #1b1d22;
  --avx-txt: #f0f0f0;
  --avx-muted: #b9bcc4;
  position: relative;
  height: calc(var(--avx-len, 10) * 100vh);
  height: calc(var(--avx-len, 10) * 100svh);
  background: var(--avx-bg);
  color: var(--avx-txt);
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.avx-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--avx-bg);
}
.avx-mv {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: var(--avx-bg);
  --poster-color: transparent;
  --progress-bar-height: 0;
  pointer-events: none;                 /* scroll libre pendant la présentation */
}
.avx-stage.explore .avx-mv { pointer-events: auto; }
.avx-stage.explore .avx-mv.over { cursor: pointer; }
.avx-led { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.avx-seq { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .7s ease; }
.avx-seq.off { opacity: 0; }
.avx-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: transparent; }
.avx-loop.on { opacity: 1; }
.avx-stage.explore .avx-loop { display: none; }

/* ---------- Carte produit ---------- */
.avx-zone { position: absolute; inset: 40px 64px 40px 40px; pointer-events: none; }
.avx-wrap { position: absolute; width: max-content; max-width: min(24em, 100%); font-size: 16px; }
.avx-card {
  padding: 1.4em 1.6em; border-radius: 1em;
  background: rgba(12, 13, 16, .88);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(1.2em);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.avx-card.on { opacity: 1; transform: none; pointer-events: auto; }
.avx-card h2 {
  margin: 0 0 .45em; font-family: 'Orbitron', 'DM Sans', sans-serif; font-weight: 700;
  font-size: 1.55em; letter-spacing: .01em; line-height: 1.15; color: #fff;
}
.avx-card h2::before {
  content: ''; display: block; width: 2.2em; height: 3px; border-radius: 3px;
  background: var(--avx-acc); box-shadow: 0 0 12px var(--avx-acc); margin-bottom: .7em;
}
.avx-card p { margin: 0 0 1.1em; color: var(--avx-muted); line-height: 1.55; white-space: pre-line; }
.avx-card p:empty { display: none; }
.avx-card p:last-child { margin-bottom: 0; }
.avx-btn {
  display: inline-block; background: var(--avx-acc); color: #000; text-decoration: none;
  font-weight: 700; padding: .7em 1.3em; border-radius: 999px;
  transition: filter .2s, transform .2s;
}
.avx-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.avx-btn[hidden] { display: none; }

/* ---------- Pastilles de navigation ---------- */
.avx-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 1; transition: opacity .26s ease-in; }
.avx-black.on { opacity: 1; pointer-events: auto; }
.avx-black.out { transition: opacity .14s ease-out; }
.avx-dots { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.avx-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .25); transition: transform .3s, background .3s, box-shadow .3s;
  position: relative;
}
.avx-dots button.on { background: var(--avx-acc); transform: scale(1.35); box-shadow: 0 0 10px var(--avx-acc); }
.avx-dots button.cube { border-radius: 2px; transform: rotate(45deg) scale(.9); }
.avx-dots button.cube.on { transform: rotate(45deg) scale(1.25); }
.avx-dots button span {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 12px; color: var(--avx-txt); background: rgba(12, 13, 16, .8); padding: 3px 8px; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.avx-dots button.cube span { transform: translateY(-50%) rotate(-45deg); transform-origin: right center; right: 18px; top: 0; }
.avx-dots button:hover span, .avx-dots button:focus-visible span { opacity: 1; }

.avx-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: var(--avx-muted); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .4s; pointer-events: none; text-align: center;
}
.avx-hint::after { content: ''; display: block; width: 2px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--avx-acc), transparent); animation: avx-drop 1.6s ease-in-out infinite; }
@keyframes avx-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Mode exploration ---------- */
.avx-tools {
  position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; z-index: 3;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s, transform .4s;
}
.avx-stage.explore .avx-tools { opacity: 1; transform: none; pointer-events: auto; }
.avx-tools button {
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: rgba(12, 13, 16, .88); color: var(--avx-txt); border: 1px solid rgba(255, 255, 255, .14);
  font: 600 14px/1 'DM Sans', system-ui, sans-serif;
}
.avx-tools button:hover { border-color: var(--avx-acc); color: var(--avx-acc); }

.avx-hs {
  --s: 18px;
  position: relative; display: block; width: var(--s); height: var(--s); text-decoration: none;
  opacity: 0; pointer-events: none; transition: opacity .35s;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.avx-stage.explore .avx-hs { opacity: 1; pointer-events: auto; }
.avx-stage.explore .avx-hs:not([data-visible]) { opacity: .35; }
.avx-hs-dot {
  position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  background: var(--avx-acc); border: 3px solid rgba(12, 13, 16, .85);
  box-shadow: 0 0 0 1px var(--avx-acc), 0 0 14px var(--avx-acc);
}
.avx-hs-dot::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--avx-acc);
  animation: avx-ping 1.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes avx-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.avx-hs-lbl {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: rgba(12, 13, 16, .92); color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; opacity: 0; border-width: 0;
  transition: max-width .35s ease, opacity .25s, padding .35s;
}
.avx-hs-lbl b { color: var(--avx-acc); font-weight: 700; margin-left: 6px; }
.avx-hs:hover .avx-hs-lbl, .avx-hs:focus-visible .avx-hs-lbl, .avx-hs.open .avx-hs-lbl {
  max-width: 260px; opacity: 1; padding-left: 12px; padding-right: 12px; border-width: 1px;
}
.avx-hs:hover, .avx-hs.open { z-index: 5; }

/* ---------- Chargement ---------- */
.avx-loader {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--avx-bg); z-index: 10; transition: opacity .6s ease, visibility .6s;
  font-family: 'Orbitron', 'DM Sans', sans-serif; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--avx-muted);
}
.avx-loader.done { opacity: 0; visibility: hidden; }
.avx-bar { width: min(240px, 60vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.avx-bar i { display: block; height: 100%; width: 0; background: var(--avx-acc); box-shadow: 0 0 10px var(--avx-acc); transition: width .2s; }

@media (max-width: 760px) {
  /* téléphone : le modèle occupe le haut, la carte le bas → le produit n'est jamais caché */
  .avx-mv, .avx-led, .avx-seq, .avx-loop { height: 62%; bottom: auto; }
  .avx-zone { inset: 16px 16px 20px; }
  .avx-wrap { max-width: 100%; }
  .avx-card { padding: 1.1em 1.2em; }
  .avx-card h2 { font-size: 1.25em; }
  .avx-dots { right: 10px; gap: 10px; }
  .avx-dots button { width: 8px; height: 8px; }
  .avx-tools { right: 12px; bottom: auto; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .avx-hint::after, .avx-hs-dot::after { animation: none; }
}