.slide-hero { position:relative; height:600px; overflow:hidden; background:url('../img/banner-nu.jpg') center/cover no-repeat; }
.hero-bg {
  inset:0;
  
  z-index:1;
}
.hero-text {
  position:absolute;
  top:35%; left:10%;
  z-index:5;
  opacity:0;
  transform:translateY(-20px);
  transition:0.8s;
}
.slick-active .hero-text {
  opacity:1;
  transform:translateY(0);
}


.feuille {
  position: absolute;

}

/* ==================================================
   FEUILLES – VENT ÉNERGIQUE + DÉFORMATIONS MAÎTRISÉES
   (équilibre naturel / cartoon)
   ================================================== */

/* ================= KEYFRAMES – VENT ================= */

/* 🌿 BLOC GAUCHE – rafale ample mais fluide */
@keyframes windLeftBalanced {
  0%   { transform: rotate(0deg) translateX(0); }
  20%  { transform: rotate(4deg) translateX(14px); }
  40%  { transform: rotate(-5deg) translateX(-18px); }
  60%  { transform: rotate(6deg) translateX(22px); }
  80%  { transform: rotate(3deg) translateX(10px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/* 🌿 BLOC CENTRE – vent appuyé mais stable */
@keyframes windCenterBalanced {
  0%   { transform: rotate(0deg) translateX(0); }
  25%  { transform: rotate(3deg) translateX(10px); }
  50%  { transform: rotate(-4deg) translateX(-14px); }
  70%  { transform: rotate(4deg) translateX(16px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/* 🌿 BLOC DROIT – turbulence contrôlée */
@keyframes windRightBalanced {
  0%   { transform: rotate(0deg) translate(0,0); }
  25%  { transform: rotate(-3deg) translate(-6px,5px); }
  45%  { transform: rotate(4deg) translate(10px,-6px); }
  65%  { transform: rotate(-5deg) translate(-12px,9px); }
  100% { transform: rotate(0deg) translate(0,0); }
}

/* ================= KEYFRAMES – FORMES ================= */

/* 🍃 Flexion douce (nervures) */
@keyframes leafBendBalanced {
  0%   { transform: skewX(0deg) scaleY(1); }
  30%  { transform: skewX(2deg) scaleY(1.03); }
  55%  { transform: skewX(-2.5deg) scaleY(0.97); }
  80%  { transform: skewX(1.5deg) scaleY(1.02); }
  100% { transform: skewX(0deg) scaleY(1); }
}

/* 🍃 Torsion légère */
@keyframes leafTwistBalanced {
  0%   { transform: skewY(0deg); }
  40%  { transform: skewY(2.5deg); }
  70%  { transform: skewY(-3deg); }
  100% { transform: skewY(0deg); }
}

/* ================= APPLICATION PAR BLOCS ================= */

/* 🌿 BLOC GAUCHE – vent dominant */
.f1, .f3, .f7, .f13, .f16 {
  animation:
    windLeftBalanced 9.5s cubic-bezier(.45,0,.55,1) infinite,
    leafBendBalanced 4.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.f1  { animation-delay: 0s, -1.2s; }
.f3  { animation-delay: -0.4s, -2s; }
.f7  { animation-delay: -0.7s, -2.4s; }
.f13 { animation-delay: -0.5s, -1.6s; }
.f16 { animation-delay: -0.2s, -2.1s; }

/* 🌿 BLOC CENTRE – vent groupé, plus massif */
.f6, .f10, .f11, .f12 {
  animation:
    windCenterBalanced 8.8s cubic-bezier(.4,0,.6,1) infinite,
    leafBendBalanced 5.5s ease-in-out infinite;
  transform-origin: 50% 80%;
}

.f6  { animation-delay: -0.6s, -2.2s; }
.f10 { animation-delay: -0.3s, -1.4s; }
.f11 { animation-delay: -0.5s, -1.9s; }
.f12 { animation-delay: -0.8s, -2.6s; }

/* 🌿 BLOC DROIT – turbulence plus nerveuse */
.f2, .f4, .f5, .f8, .f9, .f14, .f15 {
  animation:
    windRightBalanced 7.8s cubic-bezier(.35,0,.65,1) infinite,
    leafTwistBalanced 3.6s ease-in-out infinite;
  transform-origin: 50% 75%;
}

.f2  { animation-delay: -0.3s, -1.4s; }
.f4  { animation-delay: -0.6s, -2.1s; }
.f5  { animation-delay: -0.4s, -1.7s; }
.f8  { animation-delay: -0.2s, -2.3s; }
.f9  { animation-delay: -0.5s, -1.9s; }
.f14 { animation-delay: -0.7s, -2.7s; }
.f15 { animation-delay: -0.3s, -2.1s; }

/* ================= ACCESSIBILITÉ ================= */

@media (prefers-reduced-motion: reduce) {
  .feuille {
    animation: none !important;
  }
}


/* ===============================
   FEUILLES – POSITIONNEMENT FINAL
   Base : 1685 x 600
   Aucun resize
   =============================== */

/* ANCRES VALIDÉES */
.f1 {
  top: 360px;
  left: -20px;
}

.f2 {
  right: -60px;
  bottom: 120px;
}

.f3 {
  bottom: -20px;
  left: 220px;
}

.f4 {
  bottom: -20px;
  right: -10px;
}

.f5 {
  bottom: -20px;
  right: 130px;
}

/* BAS GAUCHE – CONTINUITÉ */
.f6 {
  bottom: -20px;
  left: 670px;
}

.f7 {
  bottom: 220px;
  left: -40px;
}

.f8 {
  bottom: 100px;
  left: 920px;
}

/* SOUS LE TEXTE (CENTRE GAUCHE) */
.f9 {
  bottom: -30px;
  right: 280px;
}

.f10 {
  bottom: 260px;
  left: 910px;
}

/* BAS DROIT – ZONE DENSE */
.f11 {
  bottom: -50px;
  right: 630px;
}

.f12 {
  bottom: -95px;
  right: 550px;
}

.f13 {
  bottom: -20px;
  left: -60px;
}

/* MONTÉE VISUELLE DROITE */
.f14 {
  bottom: -30px;
  left: 370px;
}

.f15 {
  bottom: 240px;
  right: 180px;
}

/* FEUILLE HAUTE ISOLÉE */
.f16 {
  bottom: -30px;
  left: 420px;
}

/* ===============================
   Z-INDEX (PROFONDEUR)
   =============================== */

/* arrière-plan */
.f10 {
  z-index: 1;
}
.f5 {
 z-index: 8;
}
.f9 {
 z-index: 7;
}
.f8 {
	z-index: 6;
}


/* plan intermédiaire */
.f7, .f4, .f14, .f11 {
  z-index: 10;
}

/* premier plan */
.f1, .f2, .f3, .f6 {
  z-index: 15;
}