/* ============================================================
   ACTIV AUTOMOBILES PRO — PREMIUM POLISH OVERLAY v1
   Couches additives : animations, micro-interactions, finitions.
   Ne modifie pas l'existant — overlays uniquement.
   Vars: --pp-copper (accent), --pp-navy (background)
   ============================================================ */

:root{
  --pp-copper:#D4A574;
  --pp-copper-bright:#E8B988;
  --pp-navy:#1B2A4A;
  --pp-navy-deep:#0F1A2E;
  --pp-ease:cubic-bezier(.22,.61,.36,1);
  --pp-ease-out:cubic-bezier(.16,1,.3,1);
}

/* =====  F. TOP PROGRESS BAR  ===== */
.pp-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:transparent; z-index:99999; pointer-events:none;
}
.pp-progress__bar{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--pp-copper),var(--pp-copper-bright));
  box-shadow:0 0 8px rgba(212,165,116,.6);
  transition:width .25s var(--pp-ease-out), opacity .4s ease;
}
.pp-progress.is-done .pp-progress__bar{opacity:0}

/* =====  A. HERO POLISH  ===== */

/* Badge glow rotatif */
.hero-badge{
  position:relative; isolation:isolate;
}
.hero-badge::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--pp-angle,0deg),
    transparent 0deg,
    rgba(212,165,116,.0) 60deg,
    rgba(212,165,116,.85) 120deg,
    rgba(232,185,136,1) 180deg,
    rgba(212,165,116,.85) 240deg,
    rgba(212,165,116,0) 300deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:pp-rotate 6s linear infinite;
  z-index:-1; opacity:.85;
}
@property --pp-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes pp-rotate{ to{ --pp-angle:360deg; } }

/* Scroll indicator */
.pp-scroll-indicator{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.7); pointer-events:none;
  animation:pp-fade-up .9s var(--pp-ease-out) 1.2s both;
}
.pp-scroll-indicator__line{
  width:1px; height:36px;
  background:linear-gradient(to bottom, transparent, var(--pp-copper));
  animation:pp-scroll-pulse 2s ease-in-out infinite;
}
.pp-scroll-indicator__dot{
  width:5px; height:5px; border-radius:50%; background:var(--pp-copper);
  box-shadow:0 0 8px var(--pp-copper);
}
@keyframes pp-scroll-pulse{
  0%,100%{ opacity:.35; transform:scaleY(.6); transform-origin:top; }
  50%{ opacity:1; transform:scaleY(1); }
}
@keyframes pp-fade-up{
  from{ opacity:0; transform:translate(-50%, 16px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}

/* Hero stats — léger lift au reveal */
.hero-stat{
  transition:transform .5s var(--pp-ease-out), filter .5s ease;
}
.hero-stat-icon{
  transition:transform .4s var(--pp-ease-out), color .3s ease;
}
.hero-stat:hover .hero-stat-icon{
  transform:translateY(-2px) scale(1.06);
  color:var(--pp-copper-bright);
}

/* =====  B. REVEAL SÉQUENCÉ + UNDERLINE CUIVRE  ===== */

/* Section titles — underline qui se trace au scroll */
.section-title{ position:relative; }
.section-title.pp-reveal::after{
  content:""; position:absolute; left:50%; bottom:-12px;
  height:2px; width:0; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--pp-copper) 30%, var(--pp-copper-bright) 50%, var(--pp-copper) 70%, transparent);
  transition:width .8s var(--pp-ease-out) .15s;
  pointer-events:none;
}
.section-title.pp-reveal.pp-in::after{ width:140px; }

/* Cards reveal séquencé */
.pp-stagger > *{
  opacity:0; transform:translateY(28px); filter:blur(4px);
  transition:opacity .7s var(--pp-ease-out), transform .7s var(--pp-ease-out), filter .7s ease;
}
.pp-stagger.pp-in > *{ opacity:1; transform:none; filter:blur(0); }
.pp-stagger.pp-in > *:nth-child(1){ transition-delay:0ms; }
.pp-stagger.pp-in > *:nth-child(2){ transition-delay:90ms; }
.pp-stagger.pp-in > *:nth-child(3){ transition-delay:180ms; }
.pp-stagger.pp-in > *:nth-child(4){ transition-delay:270ms; }
.pp-stagger.pp-in > *:nth-child(5){ transition-delay:360ms; }
.pp-stagger.pp-in > *:nth-child(6){ transition-delay:450ms; }

/* Fade-in legacy boost */
.fade-in.pp-in{ animation: pp-fade-soft .8s var(--pp-ease-out) both; }
@keyframes pp-fade-soft{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =====  C. HOVER PREMIUM + TILT LÉGER SUR CARDS  ===== */

/* Cards Services / Engagements / Stats */
.service-card, .stat-card, .about-card, .testimonial-card{
  transition:
    transform .45s var(--pp-ease-out),
    box-shadow .45s var(--pp-ease-out),
    border-color .35s ease;
  will-change:transform;
}
.service-card:hover,
.stat-card:hover,
.about-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 22px 50px -22px rgba(15,26,46,.35),
    0 8px 20px -10px rgba(212,165,116,.18);
  border-color:rgba(212,165,116,.45) !important;
}

/* Icône qui réagit dans la card */
.service-card .service-icon,
.stat-card .stat-icon,
.about-card .about-icon{
  transition:transform .45s var(--pp-ease-out), color .3s ease;
}
.service-card:hover .service-icon,
.stat-card:hover .stat-icon,
.about-card:hover .about-icon{
  transform:scale(1.08) rotate(-2deg);
  color:var(--pp-copper);
}

/* Tilt 3D subtil — activé par JS via .pp-tilt */
.pp-tilt{
  transform-style:preserve-3d;
  transition:transform .35s var(--pp-ease-out);
}
.pp-tilt-inner{ transform:translateZ(0); transition:transform .35s var(--pp-ease-out); }

/* =====  D. TÉMOIGNAGES — ÉTOILES ANIMÉES + CROSSFADE  ===== */

.testimonial-card .stars,
.testimonials-stars,
[class*="star"]{ display:inline-flex; }

.pp-star{
  display:inline-block; opacity:0; transform:scale(.4) rotate(-20deg);
  transition:opacity .35s ease, transform .55s var(--pp-ease-out);
}
.pp-stars-on .pp-star{ opacity:1; transform:none; }
.pp-stars-on .pp-star:nth-child(1){ transition-delay:0ms; }
.pp-stars-on .pp-star:nth-child(2){ transition-delay:80ms; }
.pp-stars-on .pp-star:nth-child(3){ transition-delay:160ms; }
.pp-stars-on .pp-star:nth-child(4){ transition-delay:240ms; }
.pp-stars-on .pp-star:nth-child(5){ transition-delay:320ms; }

/* =====  E. CTA MARCHAND — PARTICULES + GLOW BUTTON  ===== */

.pp-cta-bg{
  position:absolute !important; inset:0; pointer-events:none; overflow:hidden;
  z-index:0; opacity:.55;
  width:100%; height:100%;
}
.pp-cta-bg canvas{
  display:block; position:absolute; inset:0;
  width:100% !important; height:100% !important;
}

/* La section CTA doit être positioning context — sans casser le layout */
section[id*="cta"], .cta, .cta-section{ position:relative; }
section[id*="cta"] > *, .cta > *, .cta-section > *{ position:relative; z-index:1; }

/* Boutons primary — glow cuivre au hover */
.btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at var(--pp-mx,50%) var(--pp-my,50%),
    rgba(212,165,116,.45), transparent 60%);
  opacity:0; transition:opacity .4s ease;
  z-index:-1;
}
.btn-primary:hover::before{ opacity:1; }

.btn-primary::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(212,165,116,.4);
  transition:box-shadow .5s ease;
  pointer-events:none;
}
.btn-primary:hover::after{
  box-shadow:0 0 30px 4px rgba(212,165,116,.25);
}

/* Ripple click effect */
.pp-ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.45);
  transform:scale(0); pointer-events:none;
  animation:pp-ripple-anim .6s ease-out forwards;
}
@keyframes pp-ripple-anim{
  to{ transform:scale(4); opacity:0; }
}

/* =====  G. SMOOTH SCROLL + FOOTER MICRO-DÉTAILS  ===== */
html{ scroll-behavior:smooth; }

.footer a, footer a{
  position:relative; transition:color .3s ease;
}
.footer a:not(.btn)::after, footer a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--pp-copper);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--pp-ease-out);
}
.footer a:not(.btn):hover::after, footer a:not(.btn):hover::after{
  transform:scaleX(1);
}

/* =====  REDUCED MOTION (accessibilité)  ===== */
@media (prefers-reduced-motion: reduce){
  .pp-progress, .pp-scroll-indicator, .hero-badge::before,
  .pp-stagger > *, .section-title.pp-reveal::after,
  .pp-star, .pp-cta-bg, .btn-primary::before, .btn-primary::after{
    animation:none !important;
    transition:none !important;
  }
  .pp-stagger > *{ opacity:1; transform:none; filter:none; }
  .section-title.pp-reveal::after{ width:140px; }
  .pp-star{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =====  H. ACCESSIBILITE — fix contrastes (audit Lighthouse)  ===== */
.testimonials-rating .rating-label{ color:#475569 !important; }
.faq-contact-block p{ color:#475569 !important; }
.footer .footer-tagline{ color:#94a3b8 !important; }
.footer .footer-bottom p{ color:#94a3b8 !important; }
.footer .footer-bottom p[style*="opacity"]{ color:#cbd5e1 !important; opacity:0.7 !important; }