/* =====================================================================
   ADUX · Images équipe : fond de héro + bandes parallax
   Image aléatoire injectée par js/parallax.js à chaque chargement
   ===================================================================== */

body{overflow-x:clip;}

/* ---------- Couche image partagée ---------- */
.px-img{
  position:absolute;
  inset:-16% 0;
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* ---------- Fond du héro (pleine largeur, injecté par JS) ---------- */
.hero{position:relative;}
.hero > *:not(.hero-bg){position:relative;z-index:1;}

.hero-bg{
  position:absolute;
  top:0; bottom:0;
  left:calc(50% - 50vw);
  width:100vw;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

/* voile blanc : l'image reste subtile, le texte reste 100 % lisible,
   fondu vers le blanc en bas pour une transition douce avec la page */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.76) 0%,
    rgba(255,255,255,.64) 50%,
    #FFFFFF 100%);
}

/* ---------- Bandes équipe pleine largeur ---------- */
.px-equipe{
  position:relative;
  overflow:hidden;
  width:100vw;
  margin:92px calc(50% - 50vw) 0;
  height:clamp(280px, 44vh, 520px);
  background:var(--surface, #F5F6F7);
}

/* voile léger charte charbon */
.px-equipe::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(22,24,26,.52), rgba(22,24,26,.38) 45%, rgba(22,24,26,.55));
  pointer-events:none;
}

/* filet rouge signature en bas de bande */
.px-equipe::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--signal, #CC0000);
  z-index:1;
}

@media (max-width:600px){
  .px-equipe{height:clamp(220px, 34vh, 340px); margin-top:64px;}
}

@media (prefers-reduced-motion: reduce){
  .px-img{inset:0; transform:none !important;}
}