/* Effets "réseau + 3D" des nouvelles pages (même style que Qui sommes-nous / Formations) */
.ep.ep section.hero{
  background:linear-gradient(135deg,#00162f 0%,#002a5c 55%,#003366 100%);
  isolation:isolate;
}
.ep.ep section.hero:before{content:none}
.ep.ep section.hero:after{
  content:"";position:absolute;top:auto;left:0;right:0;bottom:0;width:auto;height:90px;margin:0;border:0;border-radius:0;box-shadow:none;transform:none;z-index:4;pointer-events:none;
  background:linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 100%);
}
.ep.ep .hero-network{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ep.ep .hero>.container{position:relative;z-index:5}

/* 3D : le bloc du bandeau suit la souris */
.ep.ep .hero-grid{
  transform-style:preserve-3d;
  transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out;
  will-change:transform;
}
.ep.ep .hero-grid.is-resting{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ep.ep .hero h1{
  text-transform:uppercase;font-weight:900;letter-spacing:-.01em;
  font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.12;
  text-shadow:0 10px 24px rgba(0,0,0,.55);
  transform:translateZ(70px);
}
.ep.ep .hero-grid>div:first-child p,
.ep.ep .hero-grid .eyebrow,.ep.ep .hero-grid .hero-badge-top{transform:translateZ(36px)}
.ep.ep .hero-grid>div:last-child{transform:translateZ(45px)}

/* 3D : inclinaison des cartes au survol */
.ep.ep [data-tilt]{
  transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg)) translateZ(0);
  transition:transform .2s ease-out, box-shadow .25s ease;
  will-change:transform;
}
.ep.ep [data-tilt].is-tilting{box-shadow:0 22px 50px rgba(0,51,102,.22)}
.ep.ep [data-tilt].tilt-rest{transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease}

/* Apparition douce des sections */
.ep.ep .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.ep.ep .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .ep.ep .hero-grid{transform:none!important}
  .ep.ep .hero h1,.ep.ep .hero-grid>div:last-child{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ep.ep .hero-grid,.ep.ep [data-tilt]{transform:none!important;transition:none}
  .ep.ep .reveal{opacity:1;transform:none;transition:none}
}