/* ==========================================================================
   COM'X — Page Audit & stratégie : Brainstormix descend en 3D de section en section
   Principe : un seul héros (.aud-fly), fixe à l'écran. Chaque section contient un
   emplacement invisible (.aud-slot). Le JavaScript déplace, fait tourner et
   redimensionne le héros pour qu'il rejoigne l'emplacement de la section suivante.
   ========================================================================== */

/* le héros passe derrière les textes et les cartes, devant les fonds de section */
body.aud-3d main .container{position:relative;z-index:6}

.aud-fly{
  position:fixed;left:0;top:0;width:520px;height:520px;z-index:5;pointer-events:none;
  opacity:0;transform-style:preserve-3d;will-change:transform;
  --spin:0;--mv:0;
}
.aud-fly.is-on{opacity:1;transition:opacity .5s}
.aud-fly img{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.4));
  -webkit-mask-image:linear-gradient(#000 82%, transparent 99%);
          mask-image:linear-gradient(#000 82%, transparent 99%);
  animation:audFloat 6s ease-in-out infinite;
}
@keyframes audFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}

.aud-fly-star{
  position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;translate:-50% -50%;
  background:linear-gradient(150deg,#ff4d5a,#b41f2b);
  clip-path:polygon(50.0% 0.0%,55.1% 11.3%,62.9% 1.7%,64.9% 14.0%,75.0% 6.7%,73.7% 19.1%,85.4% 14.6%,80.9% 26.3%,93.3% 25.0%,86.0% 35.1%,98.3% 37.1%,88.7% 44.9%,100.0% 50.0%,88.7% 55.1%,98.3% 62.9%,86.0% 64.9%,93.3% 75.0%,80.9% 73.7%,85.4% 85.4%,73.7% 80.9%,75.0% 93.3%,64.9% 86.0%,62.9% 98.3%,55.1% 88.7%,50.0% 100.0%,44.9% 88.7%,37.1% 98.3%,35.1% 86.0%,25.0% 93.3%,26.3% 80.9%,14.6% 85.4%,19.1% 73.7%,6.7% 75.0%,14.0% 64.9%,1.7% 62.9%,11.3% 55.1%,0.0% 50.0%,11.3% 44.9%,1.7% 37.1%,14.0% 35.1%,6.7% 25.0%,19.1% 26.3%,14.6% 14.6%,26.3% 19.1%,25.0% 6.7%,35.1% 14.0%,37.1% 1.7%,44.9% 11.3%);
  transform:translateZ(-80px) rotate(calc(var(--spin) * 1deg));
}
.aud-fly-star--ink{
  width:112%;background:#0a0a12;
  transform:translateZ(-90px) rotate(calc(var(--spin) * -.6deg));
}
/* traits de vitesse pendant le déplacement */
.aud-fly-trail{
  position:absolute;left:14%;right:14%;top:-34%;height:70%;
  background:repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,.75) 13px 16px, transparent 16px 31px);
  -webkit-mask-image:linear-gradient(transparent, #000 85%);
          mask-image:linear-gradient(transparent, #000 85%);
  opacity:calc(var(--mv) * .55);
  transform:translateZ(-30px);
}

/* ---------- mises en page : une colonne libre pour le héros ---------- */
.aud-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.aud-split--wide-left{grid-template-columns:1.3fr .7fr}
.aud-split--row{grid-template-columns:.8fr 1.2fr;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.aud-split--row .section-head{margin-bottom:0}
.aud-split--hero{min-height:min(62vh,520px)}

.aud-slot{
  justify-self:center;width:min(100%,58vh,420px);aspect-ratio:1;
  pointer-events:none;
}
.aud-split--wide-left .aud-slot{width:min(100%,56vh,340px)}
.aud-split--row .aud-slot{width:min(100%,46vh,320px)}
.aud-slot--under{margin-top:1.4rem;width:min(100%,44vh,300px);justify-self:start}

/* le héros surgit derrière la carte d'appel à l'action */
.aud-cta{position:relative;margin-top:clamp(11rem,20vw,15rem)}
.aud-slot--cta{
  position:absolute;right:clamp(1rem,8%,6rem);bottom:calc(100% - 52px);
  width:min(300px,52vw);
}

/* le fond de la section d'ouverture laisse respirer le héros */
.legal-hero .aud-text{max-width:60ch}

@media (max-width:899px){
  .aud-split,.aud-split--wide-left,.aud-split--row{grid-template-columns:1fr}
  .aud-slot{width:min(70vw,300px)}
  .aud-split--wide-left .aud-slot,.aud-split--row .aud-slot,.aud-slot--under{width:min(62vw,260px);justify-self:center}
  .aud-split--hero{min-height:0}
  .aud-slot--cta{right:50%;translate:50% 0;width:min(56vw,240px)}
  .aud-cta{margin-top:clamp(9rem,46vw,13rem)}
}
@media (prefers-reduced-motion: reduce){
  .aud-fly img{animation:none}
}