/* ============================================================
   Activ Pro — Premium Polish V2 (#2 → #7)
   100% additif. Aucune modif des regles existantes.
   ============================================================ */

/* ===================================================== */
/* #2 — Gradient mesh anime (Engagements + Comment ca marche) */
/* ===================================================== */
.engagements-section,
.steps-section{
  position:relative;
  isolation:isolate; /* contient les pseudo-elements */
  overflow:hidden;
}
.engagements-section::before,
.steps-section::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(15,32,69,0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(184,134,11,0.04) 0%, transparent 45%),
    radial-gradient(circle at 60% 80%, rgba(15,32,69,0.04) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(184,134,11,0.03) 0%, transparent 45%);
  background-size:200% 200%;
  animation:pp2-mesh 60s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pp2-mesh{
  0%, 100%{ background-position:0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  25%{ background-position:50% 30%, 70% 40%, 30% 70%, 30% 30%; }
  50%{ background-position:100% 50%, 0% 80%, 80% 20%, 50% 80%; }
  75%{ background-position:30% 80%, 50% 0%, 0% 50%, 80% 0%; }
}

/* ===================================================== */
/* #3 — Ticker live: pas de CSS specifique (JS gere la valeur) */
/*     mais on ajoute un subtil flash quand la valeur change   */
/* ===================================================== */
.hero-stat-number.pp2-pulse{
  animation:pp2-numFlash 0.6s ease-out;
}
@keyframes pp2-numFlash{
  0%{ color:var(--copper, #b8860b); transform:scale(1.08); }
  100%{ color:inherit; transform:scale(1); }
}

/* ===================================================== */
/* #4 — Cursor trail cuivre (desktop only)                 */
/* ===================================================== */
.pp2-cursor-dot{ display:none !important;
  position:fixed;
  top:0; left:0;
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(184,134,11,0.6);
  box-shadow:0 0 12px rgba(184,134,11,0.4);
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:opacity 0.3s;
  mix-blend-mode:multiply;
}
.pp2-cursor-trail{ display:none !important;
  position:fixed;
  top:0; left:0;
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(184,134,11,0.18);
  pointer-events:none;
  z-index:9997;
  transform:translate(-50%,-50%);
  transition:opacity 0.8s ease-out, width 0.8s, height 0.8s;
}
/* Pas de curseur trail sur mobile / tactile / reduced motion */
@media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce){
  .pp2-cursor-dot, .pp2-cursor-trail{ display:none !important; display:none !important; }
}

/* ===================================================== */
/* #5 — Magnetic hover renforce sur cards                  */
/* ===================================================== */
.engagement-card,
.service-card,
.testimonial-card,
.step-card{
  transition:transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s;
  transform-style:preserve-3d;
  will-change:transform;
}
.engagement-card .icon-wrap,
.engagement-card svg,
.engagement-card .engagement-icon,
.service-card .service-icon,
.step-card .step-number,
.step-card .step-icon{
  transition:transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display:inline-block;
}
.engagement-card:hover .icon-wrap,
.engagement-card:hover svg,
.engagement-card:hover .engagement-icon,
.service-card:hover .service-icon{
  transform:translateY(-6px) scale(1.08);
}
.step-card:hover .step-number,
.step-card:hover .step-icon{
  transform:translateY(-4px) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce){
  .engagement-card, .service-card, .testimonial-card, .step-card{ transition:none !important; }
  .engagement-card .icon-wrap, .engagement-card svg, .service-card .service-icon,
  .step-card .step-number, .step-card .step-icon{ transition:none !important; transform:none !important; }
}

/* ===================================================== */
/* #6 — Glassmorphism navbar au scroll                    */
/* ===================================================== */
.navbar{
  transition:background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.navbar.pp2-scrolled{
  background:rgba(255,255,255,0.72) !important;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 8px 32px -8px rgba(15,32,69,0.10), 0 1px 0 rgba(15,32,69,0.06);
  border-bottom:1px solid rgba(15,32,69,0.06);
}
/* Fallback si pas de backdrop-filter (Firefox sans flag) */
@supports not (backdrop-filter: blur(1px)){
  .navbar.pp2-scrolled{ background:rgba(255,255,255,0.95) !important; }
}

/* ===================================================== */
/* #7 — Badge "En direct" pulsant                          */
/* ===================================================== */
.pp2-live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:4px 10px 4px 8px;
  border-radius:999px;
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.25);
  font-size:0.7rem;
  font-weight:600;
  color:#16a34a;
  letter-spacing:0.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pp2-live-badge::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,0.7);
  animation:pp2-livePulse 1.8s ease-out infinite;
}
@keyframes pp2-livePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.7); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce){
  .pp2-live-badge::before{ animation:none; }
}