/* ============================================================
   Alarme HPP — Effects (v1) · CSS pur, léger, GPU-friendly
   Respecte prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Reveal on scroll (base) ---------- */
/* Fallback : si JS actif, on cache pour animer. Sinon le contenu reste visible. */
.fx-ready [data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.fx-ready [data-reveal].in{opacity:1;transform:none}
/* variantes de direction */
.fx-ready [data-reveal="left"]{transform:translateX(-46px)}
.fx-ready [data-reveal="right"]{transform:translateX(46px)}
.fx-ready [data-reveal="zoom"]{transform:scale(.9)}
.fx-ready [data-reveal="left"].in,
.fx-ready [data-reveal="right"].in,
.fx-ready [data-reveal="zoom"].in{transform:none}
/* cascade (delay via --d) */
.fx-ready [data-reveal][style*="--d"]{transition-delay:var(--d)}

/* ---------- 2. Hero cascade ---------- */
.fx-hero-in{animation:fxHeroUp .9s cubic-bezier(.16,1,.3,1) both}
.fx-hero-in:nth-child(1){animation-delay:.05s}
.fx-hero-in:nth-child(2){animation-delay:.18s}
.fx-hero-in:nth-child(3){animation-delay:.32s}
.fx-hero-in:nth-child(4){animation-delay:.46s}
@keyframes fxHeroUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* halo animé derrière le hero */
.page-hero,.loc-hero,.hero{position:relative;overflow:hidden}
.page-hero::after,.loc-hero::after{
  content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.28), transparent 62%);
  top:-160px;right:-120px;filter:blur(14px);
  animation:fxFloat 9s ease-in-out infinite;pointer-events:none;z-index:0;
}
.page-hero>*,.loc-hero>*{position:relative;z-index:1}
@keyframes fxFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-26px,24px) scale(1.08)}
}

/* ---------- 3. Cartes : lift + glow au survol ---------- */
.svc-card,.feature-card,.dept-card,.near-link,.loc-rv{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
  will-change:transform;
}
.svc-card:hover,.feature-card:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 46px -18px rgba(245,166,35,.55);
}
.loc-rv:hover{transform:translateY(-6px);box-shadow:0 18px 40px -20px rgba(0,0,0,.3)}
/* image des cartes services : léger zoom */
.svc-card .svc-img img,.svc-img img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .svc-img img{transform:scale(1.07)}

/* ---------- 4. Boutons : brillance + pression ---------- */
.btn-orange,.btn-dark,.btn-outline{position:relative;overflow:hidden;isolation:isolate}
.btn-orange::before,.btn-dark::before{
  content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;z-index:1;pointer-events:none;
}
.btn-orange:hover::before,.btn-dark:hover::before{left:130%}
.btn-orange:active,.btn-dark:active,.btn-outline:active{transform:scale(.97)}
.btn-orange,.btn-dark,.btn-outline{transition:transform .12s ease, background .2s ease}

/* pulsation douce sur le CTA téléphone du nav */
.nav-tel{transition:transform .2s ease}
.nav-tel:hover{transform:scale(1.06)}

/* ---------- 5. Images produits (boards) : reveal zoom ---------- */
.board-wrap img,.loc-img{transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .4s ease}
.board-wrap:hover img{transform:scale(1.02)}

/* ---------- 6. Barre de progression de lecture ---------- */
#fx-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--orange),#ffd280);
  box-shadow:0 0 10px rgba(245,166,35,.7);transition:width .1s linear;
}

/* ---------- 7. Bouton retour en haut ---------- */
#fx-top{
  position:fixed;right:20px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--orange);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), background .2s;
  box-shadow:0 8px 24px -6px rgba(245,166,35,.7);z-index:9998;
}
#fx-top.on{opacity:1;transform:none;pointer-events:auto}
#fx-top:hover{background:var(--orange2);transform:translateY(-3px)}

/* ---------- 8. Compteurs / stats ---------- */
.fx-count{font-variant-numeric:tabular-nums}

/* ---------- 9. Specs list : puce qui grandit au survol ---------- */
.prod-specs li{transition:transform .2s ease}
.prod-specs li:hover{transform:translateX(6px)}
.prod-specs li:hover::before{box-shadow:0 0 0 4px rgba(245,166,35,.18)}

/* ---------- 10. Liens nav : soulignement animé ---------- */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--orange);transition:width .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after{width:100%}

/* ---------- 11. Bouton secondaire (contour orange, fond clair) ---------- */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--orange);
  padding:12px 28px;border-radius:50px;font-size:15px;font-weight:700;
  border:2px solid var(--orange);cursor:pointer;text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .25s ease, border-color .25s ease, transform .12s ease;
}
.btn-ghost::after{
  content:'';position:absolute;inset:0;background:var(--orange);
  transform:scaleX(0);transform-origin:left;z-index:-1;transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.btn-ghost:hover{color:#fff}
.btn-ghost:hover::after{transform:scaleX(1)}
.btn-ghost:active{transform:scale(.97)}

/* ---------- 12. Aération : plus de respiration verticale (desktop) ---------- */
@media (min-width: 901px){
  .prod-section{padding-top:84px;padding-bottom:84px}
  .prod-intro .prod-p{margin-bottom:18px}
  .prod-h2{margin-bottom:22px}
  .svc-text > div[style*="display:flex"][style*="flex-wrap"]{margin-top:26px}
  .feature-cards{margin-top:36px}
  .board-wrap{margin-top:32px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .page-hero::after,.loc-hero::after{animation:none}
}