/* ============================================================
   Hero FX — un canvas décoratif par page (réseau, globe, flow,
   constellation, particules de texte, grille de points ou orbite),
   fond sombre commun. Un seul effet actif par page, piloté par
   assets/js/hero-fx.js (IntersectionObserver + prefers-reduced-motion).
   ============================================================ */

.eb-hero-fx{
  position:relative;
  overflow:hidden;
  background:#07142A;
}
/* rupture pleine largeur quand le hero est imbriqué dans un conteneur
   max-width (pages piliers/outils, dans .pillar-wrap) — l'accueil, Solutions,
   Réalisations et À propos n'en ont pas besoin : leur hero est déjà la
   première chose sous le header, dans le même conteneur .section/.hero-left. */
.eb-hero-fx--bleed{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}
.eb-hero-fx__inner{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:56px 40px 0;
}
/* pages piliers/outils ("expertises") : le bandeau sombre descend ~15px de
   plus sous le mockup/CTA, pour respirer un peu avant la bascule vers le
   fond clair. */
.eb-hero-fx--bleed .eb-hero-fx__inner{
  padding-bottom:15px;
}
/* .pillar-hero/.pillar-mock portent leur propre margin-bottom (56px) pour
   l'espacement normal entre sections. Sans butée de padding en bas de
   .eb-hero-fx__inner, cette margin traverse le conteneur (collapse-through)
   et gonfle la boîte sombre de .eb-hero-fx (qui l'absorbe via son propre
   overflow:hidden) au lieu de rester invisible — d'où un bandeau sombre
   trop haut, avec un vide sous le contenu. On neutralise cette marge dans
   la zone sombre et on la restitue à l'identique hors du bandeau, dans le
   fond clair qui suit. */
.eb-hero-fx__inner > *:last-child{
  margin-bottom:0;
}
.eb-hero-fx--bleed{
  margin-bottom:56px;
}

.eb-hero-fx__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}

/* ---------- halos aurora respirants (derrière le contenu, au-dessus du canvas) ----------
   2 halos sur desktop (coût de blur() continu — le poste le plus cher de tout le hero-fx),
   aucun sur mobile (voir media query plus bas), statiques en prefers-reduced-motion. */
.eb-hero-fx__aurora{
  position:absolute;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(42px);
  will-change:transform;
}
.eb-hero-fx__aurora--1{
  width:520px; height:520px; top:-14%; right:4%;
  background:rgba(46,155,255,.42);
  animation:ebaurora 14s ease-in-out infinite;
}
.eb-hero-fx__aurora--2{
  width:460px; height:460px; bottom:-18%; left:2%;
  filter:blur(45px);
  background:rgba(221,122,51,.36);
  animation:ebaurora 18s ease-in-out infinite reverse;
}
/* effets déjà très lumineux par eux-mêmes (globe/orbit/flow) : halos adoucis
   pour ne pas surcharger. */
.eb-hero-fx--dim-halo .eb-hero-fx__aurora--1{ background:rgba(46,155,255,.28); }
.eb-hero-fx--dim-halo .eb-hero-fx__aurora--2{ background:rgba(221,122,51,.28); }
@keyframes ebaurora{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(6%,-4%) scale(1.15); }
  66%{ transform:translate(-5%,5%) scale(.92); }
  100%{ transform:translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .eb-hero-fx__aurora{ animation:none; }
}
@media (max-width:768px){
  .eb-hero-fx__aurora{ display:none; }
}

/* sans position/z-index propre, le contenu du hero (bloc en flux normal)
   peint AVANT les descendants positionnés dans l'ordre d'empilement CSS —
   le canvas et les halos (positionnés, z-index 0/1) passeraient donc
   au-dessus du texte. On sort chaque conteneur de contenu du hero du flux
   normal pour qu'il s'empile après eux. */
.eb-hero-fx > *:not(.eb-hero-fx__canvas):not(.eb-hero-fx__aurora){
  position:relative;
  z-index:2;
}

/* ---------- texte du hero sur fond sombre ---------- */
.eb-hero-fx h1{ color:#fff; }

/* --orange-a11y (#AC5F28) est assombri pour rester lisible sur fond CLAIR —
   sur le bandeau sombre du hero il tombe à 3.87:1, sous le seuil AA (4.5:1)
   pour un texte de cette taille. --orange (#DD7A33, la teinte de marque déjà
   utilisée pour les halos aurora sur ce même fond) atteint 6.04:1. */
.eb-hero-fx .eyebrow{ color:var(--orange); }

/* même raison : les liens en texte courant (p a / li a) héritent par défaut
   de --orange-a11y, sous le seuil AA sur fond sombre. */
.eb-hero-fx p a,
.eb-hero-fx li a{ color:var(--orange); }
.eb-hero-fx p a:hover,
.eb-hero-fx li a:hover,
.eb-hero-fx p a:focus-visible,
.eb-hero-fx li a:focus-visible{ color:var(--orange-hover); }

.eb-hero-fx .hero__lead,
.eb-hero-fx .pillar-hero__intro,
.eb-hero-fx .hero-left p{ color:var(--muted-on-navy); }

.eb-hero-fx .hero__reassurance{ color:var(--muted-on-navy); }
.eb-hero-fx .hero__demo-label span:first-child{ color:var(--muted-on-navy); }
.eb-hero-fx .hero__demo-rule{ background:rgba(255,255,255,.14); }

/* --green (#1E8E5A) tombe à 4.44:1 sur le bandeau sombre, sous le seuil AA —
   --green-bright est déjà la teinte utilisée pour ce même vert sur les fonds
   sombres ailleurs sur le site (ex. .workflow-panel__note-check). */
.eb-hero-fx .hero__reassurance-check{ color:var(--green-bright); }