/* =========================================================================
   he-volet.css — Composant "illustration en volet bleu nuit + débordement 3D"
   Réutilisable sur tout le site heteractis. CSS custom (hors Tailwind).
   Couleur "mix" validée. Z-index pensé pour que l'illustration qui déborde
   passe AU-DESSUS de la section suivante (jamais coupée au scroll).
   ---------------------------------------------------------------------------
   Variables par composant (posées en inline-style sur .he-volet) :
     --pw / --ph   dimensions de référence du cadre (fallback fluide en dessous)
     --iw          largeur de l'illustration (% du volet)
   Pilotage on-scroll (he-volet-scroll.js) : --tx / --ty / --s sur .he-illu.
   ========================================================================= */

/* Le VOLET = conteneur + cadre clippeur d'écran assuré par la section porteuse.
   z-index local élevé : l'illu débordante passe par-dessus la section suivante. */
.he-volet{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:300px;
}

/* le cadre bleu nuit (panneau) */
.he-panel{
  position:relative;
  width:var(--pw,380px);max-width:100%;
  aspect-ratio:var(--par,380 / 354);
  border-radius:30px;
  background:linear-gradient(150deg,#0a1228 0%,#141a34 55%,#1d2c5b 100%);
  box-shadow:0 30px 60px rgba(10,18,40,.32);
  overflow:visible;                 /* l'illustration peut sortir du cadre */
}
.he-panel .he-amb{position:absolute;inset:0;border-radius:30px;pointer-events:none;overflow:hidden;}
.he-panel .he-amb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 68% 30%,rgba(61,82,151,.5),transparent 58%);}

/* ---------------------------------------------------------------------------
   L'ILLUSTRATION — déborde, et passe AU-DESSUS de la section suivante.
   z-index:40 (crucial). transform 100% : --tx/--ty/--s posés par le JS de scroll.
   --------------------------------------------------------------------------- */
.he-illu{
  position:absolute;left:50%;top:50%;
  width:var(--iw,92%);height:auto;z-index:40;
  transform-origin:center center;
  transform:translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1));
  filter:drop-shadow(0 22px 28px rgba(10,18,40,.45));
  will-change:transform;            /* couche GPU dédiée, recompose sans reflow */
}

/* polygones bleus low-poly qui s'échappent (couleur mix validée) */
.he-poly{position:absolute;clip-path:polygon(50% 0%,100% 100%,0% 100%);
  filter:drop-shadow(0 3px 5px rgba(31,95,214,.4));z-index:1;opacity:.75;will-change:transform;}
.he-poly.vif{background:linear-gradient(135deg,#5bb6ff,#1f63e0);}
.he-poly.mid{background:linear-gradient(135deg,#6f93e0,#395bbf);}
.he-p1{width:17px;height:17px;top:-11px;left:2%;animation:hefl1 7.5s ease-in-out infinite;}
.he-p2{width:11px;height:11px;top:20%;left:-4%;opacity:.6;animation:hefl3 9s ease-in-out infinite;}
.he-p3{width:10px;height:10px;bottom:8%;left:-2%;opacity:.55;animation:hefl2 8.5s ease-in-out infinite;}
.he-p4{width:16px;height:16px;top:-7px;right:4%;animation:hefl2 9.4s ease-in-out infinite;}
.he-p5{width:9px;height:9px;bottom:14%;right:-3%;opacity:.55;animation:hefl1 8.8s ease-in-out infinite;}
.he-p6{width:12px;height:12px;bottom:-9px;right:18%;opacity:.65;animation:hefl3 10s ease-in-out infinite;}
@keyframes hefl1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(40deg)}}
@keyframes hefl2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(8px,-10px) rotate(-32deg)}}
@keyframes hefl3{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(10px) rotate(24deg)}}

/* prefers-reduced-motion : on coupe les flottements (le scroll JS fige déjà l'illu) */
@media (prefers-reduced-motion: reduce){
  .he-poly{animation:none!important;}
}

/* responsive : sous lg, le volet se centre et réduit un peu */
@media (max-width:1023px){
  .he-volet{min-height:260px;}
  .he-panel{margin-inline:auto;}
}