/* Tuile VIGYL (558 x 718) : fenêtre de navigateur, menu fixe, page qui défile, curseur qui clique.
   Boucle de 16 s. Les captures sont affichées à 0,634 de leur taille :
   menu 143 px, contenu 415 px, zone visible 678 px de haut.
   Chronologie :  0-6 %  le curseur entre
                  6-36 % la page « Vue d'ensemble » défile
                 42-50 % le curseur va au menu, clic « Reporting COBAC » (50 %)
                 58-80 % la page « Reporting » défile
                 86-92 % le curseur va au menu, clic « Vue d'ensemble » (92 %) */

.vg { background: #f4f5f8; --loop: 16s; --scroll-a: -615px; --scroll-b: -400px; }

.vg__chrome {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: #1a1b20;
}
.vg__chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.vg__url {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}
.vg__url svg { width: 12px; height: 12px; }

.vg__view { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; overflow: hidden; }

.vg__page { position: absolute; inset: 0; }
.vg__page--a { animation: vg-show-a var(--loop) steps(1, end) infinite; }
.vg__page--b { animation: vg-show-b var(--loop) steps(1, end) infinite; }

.vg__side { position: absolute; left: 0; top: 0; width: 143.3px; height: auto; display: block; }
.vg__clip { position: absolute; left: 143.3px; top: 0; right: 0; bottom: 0; overflow: hidden; }
.vg__strip { display: block; width: 414.7px; height: auto; will-change: transform; }
.vg__page--a .vg__strip { animation: vg-scroll-a var(--loop) infinite; }
.vg__page--b .vg__strip { animation: vg-scroll-b var(--loop) infinite; }

/* ---------- Curseur et clics ---------- */

.vg__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
  animation: vg-cursor var(--loop) ease-in-out infinite;
}

.vg__ripple {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2.5px solid #dc0000;
  opacity: 0;
}
.vg__ripple--reporting { left: 58px; top: 371px; animation: vg-click var(--loop) ease-out calc(var(--loop) * 0.5) infinite; }
.vg__ripple--overview { left: 55px; top: 70px; animation: vg-click var(--loop) ease-out calc(var(--loop) * 0.92) infinite; }

/* ---------- Animations ---------- */

@keyframes vg-show-a { 0% { opacity: 1; } 50% { opacity: 0; } 92% { opacity: 1; } }
@keyframes vg-show-b { 0% { opacity: 0; } 50% { opacity: 1; } 92% { opacity: 0; } }

@keyframes vg-scroll-a {
  0%, 6% { transform: translate3d(0, 0, 0); }
  36%, 50% { transform: translate3d(0, var(--scroll-a), 0); }
  51%, 100% { transform: translate3d(0, 0, 0); }
}
@keyframes vg-scroll-b {
  0%, 58% { transform: translate3d(0, 0, 0); }
  80%, 92% { transform: translate3d(0, var(--scroll-b), 0); }
  93%, 100% { transform: translate3d(0, 0, 0); }
}

/* Le point de pointe de la flèche est en (4,2.5) sur 24 : on décale pour que la pointe tombe sur la cible. */
@keyframes vg-cursor {
  0% { transform: translate3d(500px, 690px, 0); opacity: 0; }
  6% { transform: translate3d(318px, 300px, 0); opacity: 1; }
  36% { transform: translate3d(334px, 360px, 0) scale(1); }
  42% { transform: translate3d(334px, 360px, 0) scale(1); }
  49.4% { transform: translate3d(53px, 366px, 0) scale(1); }
  50% { transform: translate3d(53px, 366px, 0) scale(0.82); }
  50.8% { transform: translate3d(53px, 366px, 0) scale(1); }
  58% { transform: translate3d(318px, 300px, 0); }
  80% { transform: translate3d(334px, 360px, 0); }
  86% { transform: translate3d(334px, 360px, 0); }
  91.4% { transform: translate3d(50px, 66px, 0) scale(1); }
  92% { transform: translate3d(50px, 66px, 0) scale(0.82); }
  92.8% { transform: translate3d(50px, 66px, 0) scale(1); }
  97% { transform: translate3d(180px, 200px, 0); opacity: 1; }
  100% { transform: translate3d(500px, 690px, 0); opacity: 0; }
}

@keyframes vg-click {
  0% { opacity: 0.9; transform: scale(0.3); }
  4% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}