/* =========================================================
   ANIMATIONS XXL - Scène pétrolière (hero)
   ========================================================= */
.petro-hero-wrap{
  position:relative;
  border-radius:var(--lms-radius);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(7,27,61,.35);
  transform:perspective(1200px) rotateY(-4deg);
  transition:transform .4s ease;
}
.petro-hero-wrap:hover{ transform:perspective(1200px) rotateY(0deg) scale(1.01); }
.petro-hero-wrap svg{ width:100%; height:auto; display:block; }

.petro-sun{ animation: petroPulseGlow 4s ease-in-out infinite; transform-origin:470px 110px; }
@keyframes petroPulseGlow{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.12);} }

.petro-cloud{ animation: petroDriftCloud 22s linear infinite; }
.petro-cloud-1{ animation-duration:26s; }
.petro-cloud-2{ animation-duration:34s; animation-delay:-8s; }
@keyframes petroDriftCloud{
  0%{ transform:translateX(-40px); }
  50%{ transform:translateX(40px); }
  100%{ transform:translateX(-40px); }
}

.petro-bird{ opacity:.8; }
.petro-bird-1{ animation: petroFlyAcross 12s linear infinite; }
.petro-bird-2{ animation: petroFlyAcross 16s linear infinite; animation-delay:-4s; }
@keyframes petroFlyAcross{
  0%{ transform: translate(-20px,220px); opacity:0; }
  10%{ opacity:.8; }
  90%{ opacity:.8; }
  100%{ transform: translate(560px,170px); opacity:0; }
}

.petro-wave{ animation: petroWaveShift 6s ease-in-out infinite alternate; transform-origin:center; }
@keyframes petroWaveShift{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-24px);} }

.petro-smoke circle{ animation: petroRiseSmoke 4.5s ease-in infinite; }
.petro-smoke-1 circle:nth-child(1){ animation-delay:0s; }
.petro-smoke-1 circle:nth-child(2){ animation-delay:.6s; }
.petro-smoke-1 circle:nth-child(3){ animation-delay:1.2s; }
.petro-smoke-2 circle:nth-child(1){ animation-delay:.3s; }
.petro-smoke-2 circle:nth-child(2){ animation-delay:1s; }
@keyframes petroRiseSmoke{
  0%{ transform:translateY(0) scale(0.8); opacity:.7; }
  100%{ transform:translateY(-46px) scale(1.6); opacity:0; }
}

.petro-flame{ animation: petroFlicker 1.1s ease-in-out infinite alternate; transform-origin:5px 40px; }
.petro-flame-inner{ animation-duration:.8s; animation-delay:.15s; }
@keyframes petroFlicker{
  0%{ transform:scaleY(1) scaleX(1) rotate(-1deg); }
  50%{ transform:scaleY(1.12) scaleX(0.94) rotate(1.5deg); }
  100%{ transform:scaleY(0.96) scaleX(1.05) rotate(-2deg); }
}

.petro-beam{ animation: petroPump 2.6s ease-in-out infinite; }
@keyframes petroPump{
  0%,100%{ transform: rotate(-6deg); }
  50%{ transform: rotate(6deg); }
}

.petro-particle{ animation: petroFloatUp 5s ease-in-out infinite; }
.p1{ animation-delay:0s; } .p2{ animation-delay:1.1s; } .p3{ animation-delay:2s; } .p4{ animation-delay:.6s; }
@keyframes petroFloatUp{
  0%{ transform:translateY(0); opacity:.9; }
  50%{ transform:translateY(-30px); opacity:.4; }
  100%{ transform:translateY(-60px); opacity:0; }
}

/* Halo dégradé animé derrière le hero texte */
.hero.hero-petro{ position:relative; }
.hero.hero-petro::before{
  content:"";
  position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, var(--lms-blue-800), var(--lms-blue-500), var(--lms-blue-300), var(--lms-blue-800));
  opacity:.18;
  animation: petroRotateHalo 18s linear infinite;
  z-index:0;
}
.hero.hero-petro .container{ z-index:1; }

@keyframes petroRotateHalo{ to{ transform:rotate(360deg); } }

/* Icônes décoratives flottantes (barils, gouttes) dispersées dans les sections */
.petro-float-icon{
  position:absolute; opacity:.12; pointer-events:none; z-index:0;
  animation: petroFloatIcon 9s ease-in-out infinite;
}
@keyframes petroFloatIcon{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(8deg); }
}

/* =========================================================
   REVEAL AU SCROLL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   COMPTEURS STATISTIQUES
   ========================================================= */
.lms-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px;
}
@media (max-width:800px){ .lms-stats{ grid-template-columns:repeat(2,1fr); } }
.lms-stat{
  background:#fff; border-radius:var(--lms-radius); padding:26px 18px; text-align:center;
  box-shadow:0 6px 20px rgba(11,42,92,.08);
}
.lms-stat .num{ font-family:var(--lms-font-title); font-size:2.2rem; font-weight:700; color:var(--lms-blue-600); }
.lms-stat .label{ color:#6b7a94; font-size:.88rem; margin-top:4px; }

/* =========================================================
   ETAPES "COMMENT CREER UN COURS"
   ========================================================= */
.lms-steps{ display:flex; flex-direction:column; gap:22px; max-width:780px; margin:0 auto; }
.lms-step{
  display:flex; gap:20px; align-items:flex-start; background:#fff; border-radius:var(--lms-radius);
  padding:20px 24px; box-shadow:0 4px 16px rgba(11,42,92,.06);
}
.lms-step-icon{
  flex:none; width:52px; height:52px; border-radius:50%; background:var(--lms-gradient);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem;
}
.lms-step h3{ margin-bottom:4px; font-size:1.05rem; }
.lms-step p{ margin:0; color:#5b6b85; font-size:.92rem; }

/* Bouton CTA XXL avec effet lueur pulsante */
.btn-xxl{
  padding:18px 44px; font-size:1.1rem; border-radius:999px;
  position:relative; overflow:hidden;
}
.btn-xxl::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(79,156,240,.5);
  animation: petroPulseRing 2.4s ease-out infinite;
}
@keyframes petroPulseRing{
  0%{ box-shadow:0 0 0 0 rgba(79,156,240,.5); }
  100%{ box-shadow:0 0 0 22px rgba(79,156,240,0); }
}