.eed{
  --eed-void:#010409; --eed-verre:rgba(6,23,39,.84); --eed-cadre:rgba(238,248,255,.92);
  --eed-texte:#f2f9ff; --eed-doux:#e3eff9; --eed-equipe:#04ffd8; --eed-warn:#ff9500; --eed-ok:#ffffff;
  --eed-hud:"Saira","Bahnschrift","DIN Alternate","Segoe UI",sans-serif;
  --eed-ui:"Inter","Segoe UI Variable Display","Segoe UI",sans-serif;
  --eed-px:calc(100cqw / 1280);
  color:var(--eed-texte); font-family:var(--eed-ui);
}

.m-default{--m:#39f0c8} .m-mercure{--m:#f5b942} .m-argus{--m:#a77bff}
.m-vulcain{--m:#ff6a2b} .m-iris{--m:#c99bff}   .m-dedale{--m:#3b82ff}
.m-fama{--m:#ff3d8b}    .m-janus{--m:#c1dd88}  .m-lyncee{--m:#f2dc4e}

.qg{position:relative; width:100%; aspect-ratio:16/9; container-type:inline-size; overflow:hidden;
  background:var(--eed-void) url("qg.webp") center/100% 100% no-repeat; border-radius:calc(18 * var(--eed-px))}

.qg-membre{position:absolute; width:calc(160 * var(--eed-px)); aspect-ratio:1;
  translate:calc(-80 * var(--eed-px)) calc(-150 * var(--eed-px));
  background-repeat:no-repeat; background-size:calc(var(--n,8) * 100%) 100%;
  animation:eed-boucle 1s steps(var(--n,8)) infinite; animation-delay:var(--decalage,0s)}
@keyframes eed-boucle{from{background-position-x:0%} to{background-position-x:calc(100% * var(--n,8) / (var(--n,8) - 1))}}
.qg-membre.trajet{transition:left 2.4s linear, top 2.4s linear}
.qg-membre.vers-droite{scale:-1 1}
@media (prefers-reduced-motion:reduce){.qg-membre{animation:none}}

.bulle{position:absolute; translate:-50% -100%;
  display:inline-flex; align-items:center; gap:calc(6 * var(--eed-px)); white-space:nowrap;
  padding:calc(5 * var(--eed-px)) calc(10 * var(--eed-px)); border-radius:calc(11 * var(--eed-px));
  background:var(--eed-verre); border:calc(1.5 * var(--eed-px)) solid color-mix(in srgb,var(--m,var(--eed-equipe)) 70%,var(--eed-cadre));
  box-shadow:0 0 calc(10 * var(--eed-px)) color-mix(in srgb,var(--m,var(--eed-equipe)) 45%,transparent);
  font-family:var(--eed-hud); font-weight:700; font-size:clamp(11px, calc(17 * var(--eed-px)), 17px); line-height:1.2;
  letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--eed-texte);
  backdrop-filter:blur(4px)}
.bulle::after{content:""; position:absolute; left:calc(50% - 5.5 * var(--eed-px)); bottom:calc(-7 * var(--eed-px));
  width:calc(11 * var(--eed-px)); aspect-ratio:1; rotate:45deg; background:inherit;
  border-right:inherit; border-bottom:inherit; border-left:0; border-top:0; box-shadow:none}
.bulle .depuis{font-family:var(--eed-ui); font-weight:600; font-size:.86em; color:var(--eed-doux); letter-spacing:0}
.bulle--attend::before{content:""; width:.5em; aspect-ratio:1; border-radius:50%; background:var(--m,var(--eed-equipe));
  box-shadow:0 0 .5em var(--m,var(--eed-equipe)); animation:eed-pouls 1.6s ease-in-out infinite}
.bulle--bloque{border-color:var(--eed-warn); box-shadow:0 0 calc(10 * var(--eed-px)) color-mix(in srgb,var(--eed-warn) 50%,transparent)}
.bulle--bloque::before{content:"!"; color:var(--eed-warn)}
.bulle--fini::before{content:"✓"; color:var(--eed-ok)}
@keyframes eed-pouls{50%{opacity:.35; scale:.8}}

.bulle--attend.m-janus,.bulle--attend.m-lyncee{translate:calc(-100% + 22 * var(--eed-px)) calc(-100% + 2px)}
.bulle--attend.m-janus::after,.bulle--attend.m-lyncee::after{left:calc(100% - 27.5 * var(--eed-px))}
.bulle--fini.m-janus,.bulle--fini.m-lyncee{translate:calc(-22 * var(--eed-px)) -100%}
.bulle--fini.m-janus::after,.bulle--fini.m-lyncee::after{left:calc(16.5 * var(--eed-px))}

.nom{position:absolute; z-index:2100; translate:-50% calc(10 * var(--eed-px)); white-space:nowrap;
  font-family:var(--eed-hud); font-weight:600; font-size:clamp(10px, calc(14 * var(--eed-px)), 14px); line-height:1.2;
  letter-spacing:.08em; text-transform:uppercase; color:var(--eed-texte);
  padding:calc(1 * var(--eed-px)) calc(7 * var(--eed-px)); border-bottom:calc(2 * var(--eed-px)) solid var(--m,var(--eed-equipe));
  background:rgba(1,4,9,.58); border-radius:calc(5 * var(--eed-px)) calc(5 * var(--eed-px)) 0 0;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.nom.chef::before{content:"◆ "; color:var(--m)}

@media (max-width:760px){
  .qg .bulle{display:none}
  .nom{translate:-50% calc(-100% - 150 * var(--eed-px) - 3px);
    font-size:9px; line-height:1.2; letter-spacing:0; text-transform:none;
    padding:0 3px 1px; border-bottom-width:2px; border-radius:3px 3px 0 0;
    box-shadow:0 0 0 .5px color-mix(in srgb,var(--m,var(--eed-equipe)) 45%,transparent)}
  .nom::after{content:""; position:absolute; left:50%; bottom:-5px; translate:-50% 0;
    border:3px solid transparent; border-top-color:var(--m,var(--eed-equipe)); border-bottom:0}
}