/* =====================================================================
   HERO ANIMÉ — scène en calques
   Chaque élément de la scène est une image détourée, positionnée en
   pourcentage sur une grille de référence de 1600x773. La profondeur
   (--d) règle l'amplitude du déplacement à la souris.

   Les positions sont ici, en CSS, et non en attributs style : la
   politique de sécurité du site interdit les styles en ligne.
   ===================================================================== */

/* La section n'a plus de marge : la scène va d'un bord à l'autre. */
.hero-full{padding:0 0 1rem}

.hero-scene{
  position:relative;
  display:flex;align-items:center;      /* texte centré verticalement */
  width:100%;
  min-height:clamp(520px, 62vh, 680px);
  overflow:hidden;
  background:var(--primary);
  border-radius:0;
  --mx:0;--my:0;
}

/* La scène conserve ses proportions d'origine et s'ancre à droite.
   Sur un écran large, la zone laissée libre à gauche prend simplement
   le bleu de fond — c'est là que se pose le texte. */
.hero-scene .stage{
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
  height:100%;
  aspect-ratio:1600 / 773;
  min-width:64%;
}

/* Le texte reste aligné sur la grille du reste du site */
.hero-inner{position:relative;z-index:7;width:min(1120px,calc(100% - 2rem));margin-inline:auto}

.lyr{
  position:absolute;
  will-change:transform;
  transform:translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), 0);
}
.lyr img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.lyr-bg{left:0;top:0;width:100%;height:100%;--d:.04;transform:none}

/* --- Position et animation de chaque élément --------------------------- */
.lyr-globe     {left:51.9375%;top:0;      width:44%;     height:91.0737%;--d:.10;animation:globeBreathe 14s ease-in-out infinite}
.lyr-cle       {left:43.6875%;top:22.5097%;width:8.5%;    height:31.6947%;--d:.45;animation:floatA 7.5s ease-in-out infinite}
.lyr-cristal   {left:42.6875%;top:54.9806%;width:6.375%;  height:7.762%;  --d:.55;animation:floatB 5.5s ease-in-out infinite}
.lyr-ecrou     {left:57.125%; top:37.5162%;width:4.3125%; height:7.8913%; --d:.50;animation:spinFloat 9s ease-in-out infinite}
.lyr-engrenage {left:40.1875%;top:65.2005%;width:7%;      height:14.2303%;--d:.60;animation:gear 16s linear infinite}
.lyr-tournevis {left:52.25%;  top:40.1035%;width:8.8125%; height:41.3972%;--d:.42;animation:floatC 8s ease-in-out infinite}
.lyr-frigo     {left:62.5625%;top:25.6145%;width:11.8125%;height:53.5576%;--d:.22;animation:liftA 9s ease-in-out infinite}
.lyr-machine   {left:73.6875%;top:44.5019%;width:12.6875%;height:36.9987%;--d:.28;animation:liftB 8.5s ease-in-out infinite}
.lyr-perceuse  {left:86.3125%;top:47.7361%;width:9.6875%; height:27.9431%;--d:.70;animation:drill 6.5s ease-in-out infinite}

/* Boulons flottants */
.lyr-n1 {left:49%;    top:10.608%;width:3.125%; height:6.5977%;--d:.85;animation:nut1 4.2s ease-in-out 0s   infinite}
.lyr-n2 {left:54.5625%;top:12.8072%;width:3.3125%;height:6.727%;--d:.80;animation:nut2 5.1s ease-in-out .6s infinite}
.lyr-n3 {left:62.875%; top:5.0453%; width:2.375%; height:5.304%;--d:.75;animation:nut3 4.6s ease-in-out 1.2s infinite}
.lyr-n4 {left:80.0625%;top:17.9819%;width:3.125%; height:6.727%;--d:.72;animation:nut4 5.4s ease-in-out .3s infinite}
.lyr-n5 {left:92.375%; top:8.1501%; width:2.3125%;height:5.304%;--d:.88;animation:nut1 4.0s ease-in-out .9s infinite}
.lyr-n6 {left:97.4375%;top:24.8383%;width:2.5625%;height:6.727%;--d:.68;animation:nut2 5.8s ease-in-out 1.5s infinite}
.lyr-n7 {left:40%;     top:33.7646%;width:3%;     height:6.4683%;--d:.90;animation:nut3 4.4s ease-in-out .4s infinite}
.lyr-n8 {left:48.125%; top:69.0815%;width:4.25%;  height:4.1397%;--d:.82;animation:nut4 3.8s ease-in-out 1.1s infinite}
.lyr-n9 {left:45.625%; top:88.3571%;width:2.5%;   height:5.4334%;--d:.78;animation:nut1 5.0s ease-in-out .7s infinite}
.lyr-n10{left:94.125%; top:68.1759%;width:3.0625%;height:6.0802%;--d:.86;animation:nut2 4.8s ease-in-out 1.4s infinite}

/* --- Anneaux lumineux, entièrement en CSS ------------------------------ */
.orbits{position:absolute;left:41.5%;top:5%;width:47%;height:88%;
        pointer-events:none;perspective:900px;transform-style:preserve-3d}
.orbits.front{z-index:5}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;
      border:2px solid rgba(242,183,5,.55);
      box-shadow:0 0 18px rgba(242,183,5,.45), inset 0 0 22px rgba(242,183,5,.20);
      transform-style:preserve-3d}
.r1{width:104%;height:104%;margin:-52% 0 0 -52%;animation:orb1 26s linear infinite;opacity:.55}
.r2{width:86%; height:86%; margin:-43% 0 0 -43%;border-color:rgba(255,209,84,.45);animation:orb2 19s linear infinite;opacity:.5}
.r3{width:118%;height:118%;margin:-59% 0 0 -59%;border-color:rgba(255,231,163,.26);animation:orb3 34s linear infinite;opacity:.45}
.r4{width:96%; height:96%; margin:-48% 0 0 -48%;border-color:rgba(242,183,5,.60);animation:orb4 22s linear infinite;opacity:.6;
    -webkit-mask-image:linear-gradient(200deg,transparent 0 42%,#000 55% 100%);
            mask-image:linear-gradient(200deg,transparent 0 42%,#000 55% 100%)}
.sweep{position:absolute;left:50%;top:50%;width:110%;height:110%;margin:-55% 0 0 -55%;
       border-radius:50%;
       background:conic-gradient(from 0deg,transparent 0 72%,rgba(242,183,5,.28) 86%,transparent 92%);
       filter:blur(14px);animation:spin 11s linear infinite;opacity:.75;mix-blend-mode:screen}
.glowline{position:absolute;left:6%;top:56%;width:92%;height:3px;
          background:linear-gradient(90deg,transparent,rgba(255,205,80,.92),transparent);
          filter:blur(1.5px);opacity:.7;
          animation:glowpulse 4.5s ease-in-out infinite;transform:rotate(-9deg)}

/* --- Mouvements ---------------------------------------------------------
   Chaque animation reprend la translation de parallaxe pour ne pas
   l'écraser : sans cela, le déplacement à la souris serait annulé.
   ------------------------------------------------------------------------ */
@keyframes globeBreathe{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) scale(1)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px - 4px),0) scale(1.028)}
}
@keyframes liftA{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) scale(1)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px - 9px),0) scale(1.014)}
}
@keyframes liftB{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px - 7px),0) scale(1.012)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px + 2px),0) scale(1)}
}
@keyframes drill{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  35%    {transform:translate3d(calc(var(--mx)*var(--d)*1px + 10px),calc(var(--my)*var(--d)*1px - 5px),0) rotate(2.2deg)}
  70%    {transform:translate3d(calc(var(--mx)*var(--d)*1px - 4px),calc(var(--my)*var(--d)*1px + 4px),0) rotate(-1.4deg)}
}
@keyframes floatA{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px - 6px),calc(var(--my)*var(--d)*1px - 11px),0) rotate(-1.8deg)}
}
@keyframes floatB{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px + 7px),calc(var(--my)*var(--d)*1px - 9px),0) rotate(9deg)}
}
@keyframes floatC{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px + 5px),calc(var(--my)*var(--d)*1px - 8px),0) rotate(1.6deg)}
}
@keyframes spinFloat{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px - 5px),calc(var(--my)*var(--d)*1px + 8px),0) rotate(-16deg)}
}
@keyframes gear{
  from{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  to  {transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(360deg)}
}
@keyframes nut1{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px + 8px),calc(var(--my)*var(--d)*1px + 3px),0) rotate(5deg)}
}
@keyframes nut2{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px - 7px),calc(var(--my)*var(--d)*1px + 5px),0) rotate(-8deg)}
}
@keyframes nut3{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px + 6px),calc(var(--my)*var(--d)*1px - 6px),0) rotate(-13deg)}
}
@keyframes nut4{
  0%,100%{transform:translate3d(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px),0) rotate(0deg)}
  50%    {transform:translate3d(calc(var(--mx)*var(--d)*1px - 4px),calc(var(--my)*var(--d)*1px - 7px),0) rotate(11deg)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orb1{from{transform:rotateX(72deg) rotateZ(0deg)}   to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes orb2{from{transform:rotateX(66deg) rotateY(14deg) rotateZ(360deg)}to{transform:rotateX(66deg) rotateY(14deg) rotateZ(0deg)}}
@keyframes orb3{from{transform:rotateX(78deg) rotateY(-10deg) rotateZ(0deg)}to{transform:rotateX(78deg) rotateY(-10deg) rotateZ(360deg)}}
@keyframes orb4{from{transform:rotateX(69deg) rotateZ(0deg)}   to{transform:rotateX(69deg) rotateZ(-360deg)}}
@keyframes glowpulse{0%,100%{opacity:.25}50%{opacity:.85}}

/* --- Voile de lisibilité et contenu ------------------------------------- */
.hero-scene::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(11,42,74,.96) 0%,
    rgba(11,42,74,.92) 26%,
    rgba(11,42,74,.55) 44%,
    rgba(11,42,74,.12) 60%,
    rgba(11,42,74,0)   70%);
}
.hero-scene .hero-copy{
  position:relative;z-index:7;
  max-width:min(600px,52%);
  padding:3.5rem 0;
}
.hero-scene .hero-title{font-size:clamp(2.1rem,3.6vw,3.6rem)}
.hero-scene .hero-sub{font-size:clamp(1.02rem,1.25vw,1.18rem);max-width:46ch}

/* =====================================================================
   ADAPTATION AUX PETITS ÉCRANS
   Sur mobile, la scène passe en fond et les calques les plus coûteux
   sont retirés : une vingtaine d'animations simultanées sur un
   téléphone d'entrée de gamme, c'est du gaspillage de batterie.
   ===================================================================== */
/* Écrans très larges : la scène est agrandie pour ne pas laisser
   une bande de bleu vide sur la droite. */
@media (min-width:1500px){
  .hero-scene{min-height:clamp(600px,58vh,720px)}
  .hero-scene .stage{min-width:58%}
}

@media (max-width:900px){
  .hero-scene{min-height:560px;align-items:flex-end}
  .hero-scene .stage{
    right:-14%;top:0;transform:none;
    height:auto;width:150%;aspect-ratio:1600 / 773;min-width:0;
  }
  .hero-scene .hero-copy{max-width:none;padding:2.2rem 0 2.6rem}
  .hero-scene::after{
    background:linear-gradient(180deg,
      rgba(11,42,74,.94) 0%,
      rgba(11,42,74,.82) 42%,
      rgba(11,42,74,.55) 70%,
      rgba(11,42,74,.32) 100%);
  }
  .lyr-n1,.lyr-n2,.lyr-n3,.lyr-n4,.lyr-n5,
  .lyr-n6,.lyr-n7,.lyr-n8,.lyr-n9,.lyr-n10,
  .lyr-cristal,.lyr-ecrou{display:none}
  .r3,.sweep{display:none}
}

@media (max-width:640px){
  .hero-scene{min-height:500px}
  .hero-scene .stage{right:-30%;width:175%}
  .hero-scene .hero-copy{padding:1.6rem 0 2rem}
  .lyr-engrenage,.lyr-cle,.r2{display:none}
}

/* --- Mouvement réduit : scène figée, rien ne bouge ---------------------- */
@media (prefers-reduced-motion:reduce){
  .lyr,.ring,.sweep,.glowline{animation:none!important}
  .hero-scene{--mx:0;--my:0}
}

/* Animations suspendues quand la scène quitte l'écran */
.hero-scene.is-paused .lyr,
.hero-scene.is-paused .ring,
.hero-scene.is-paused .sweep,
.hero-scene.is-paused .glowline{animation-play-state:paused}