/* ================================================
   PARALLAXE HÉRO — parallaxe.css  (v9)
================================================ */

:root {
  --px-oversize: 35px;    /* zoom minimal, juste pour le déplacement souris */

  --px-scroll-l4: 0.18;   /* soleil    — monte bien visible  */
  --px-scroll-l3: 0.04;   /* montagnes — descend doucement   */
  --px-scroll-l2: 0.02;   /* rivière   — descend très peu    */
  --px-scroll-l1: 0.05;   /* herbes    — monte très peu      */

  /* Souris layers BG — plus fort */
  --px-mouse-l4:  22;
  --px-mouse-l3:  14;
  --px-mouse-l2:  8;
  --px-mouse-l1:  5;

  /* Souris feuilles — plus ample */
  --px-mouse-leaves-x: 40;
  --px-mouse-leaves-y: 20;
}

/* -----------------------------------------------
   OVERSIZE — stratégie corrigée
   Le .hero-scene a overflow:hidden dans index.css →
   il rogne les images qui dépassent.
   Solution : on retire overflow:hidden du .hero-scene
   et on laisse .hero (qui a overflow:hidden) contenir.
   Les images gardent width:100% mais c'est le .hero-scene
   qui est oversizé et décalé.
----------------------------------------------- */
.hero-scene {
  overflow: visible !important;
  left: calc(var(--px-oversize) * -1);
  right: calc(var(--px-oversize) * -1);
  width: calc(100% + (var(--px-oversize) * 2));
}

/* Les images reviennent à 100% de leur conteneur (le scene oversizé) */
.hero-mountains,
.hero-foreground {
  width: 100%;
  will-change: transform;
  transition: none !important;
}

.hero-herbe {
  left: 50% !important;
  width: 100% !important;
  will-change: transform;
  transition: none !important;
}

/* -----------------------------------------------
   FEUILLES — canvas + éléments
----------------------------------------------- */
.hero-leaves-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
  will-change: transform;
  transition: none !important;
}

.hero-leaf {
  position: absolute;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* -----------------------------------------------
   RACCORD HÉRO → SECTION SERVICES
   Solution définitive : on donne à .section-services
   un margin-top négatif suffisamment grand pour
   recouvrir tout gap possible, quelle que soit
   la hauteur d'écran. Son z-index:4 + position:relative
   existants garantissent qu'elle passe par-dessus le hero.
----------------------------------------------- */
.section-services {
  margin-top: -60px !important;
  padding-top: calc(1rem + 60px) !important;
}

/* -----------------------------------------------
   MOBILE
----------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --px-oversize:         30px;
    --px-scroll-l4:        0.28;   /* soleil monte plus sur mobile */
    --px-scroll-l3:        0.03;
    --px-scroll-l2:        0.01;
    --px-scroll-l1:        0.03;
    --px-mouse-l4:         0;
    --px-mouse-l3:         0;
    --px-mouse-l2:         0;
    --px-mouse-l1:         0;
    --px-mouse-leaves-x:   0;
    --px-mouse-leaves-y:   0;
  }

  /* Reset hero-scene sur mobile */
  .hero-scene {
    overflow: hidden !important;
    left: -2px !important;
    right: 0 !important;
    width: 101% !important;
  }

  .hero-foreground {
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .hero-herbe {
    left: 0 !important;
    width: 100% !important;
  }

  .hero-leaves-canvas { display: block; } /* feuilles actives sur mobile aussi */

  .section-services {
    margin-top: -30px !important;
    padding-top: calc(1rem + 30px) !important;
  }
}

/* -----------------------------------------------
   GRAND FORMAT
----------------------------------------------- */
@media (min-width: 2200px) {
  :root {
    --px-oversize:         80px;
    --px-mouse-l4:         30;
    --px-mouse-l3:         20;
    --px-mouse-l2:         12;
    --px-mouse-l1:         7;
    --px-mouse-leaves-x:   55;
    --px-mouse-leaves-y:   28;
  }

  .section-services {
    margin-top: -80px !important;
    padding-top: calc(1rem + 80px) !important;
  }
}