/* =====================================================================
   MOVELY — Couche SIGNATURE (animations & finitions premium)
   Additive : n'écrase aucune règle existante, ne touche pas l'estimateur.
   Tout est désactivé si l'utilisateur a demandé « animations réduites ».
   Rien d'essentiel n'en dépend : sans JS/CSS, le contenu reste intact.
   ===================================================================== */

/* Barre de progression : définie dans nuit.css (transform:scaleX, piloté
   par motion.js). La version width:0% qui était ici était inopérante. */


/* ---------- 2. Entrée du hero (au chargement) ---------- */
.hero .mention,
.hero h1,
.hero .hero-lead,
.hero .hero-cta,
.hero .hero-preuves{
  opacity:0; transform:translateY(22px);
  animation:sigRise .9s cubic-bezier(.16,.8,.24,1) forwards;
}
.hero h1{animation-delay:.12s}
.hero .hero-lead{animation-delay:.26s}
.hero .hero-cta{animation-delay:.4s}
.hero .hero-preuves{animation-delay:.54s}
@keyframes sigRise{to{opacity:1;transform:none}}


/* ---------- 4. Compteurs & révélation (réutilise .js-reveal existant) ---------- */
.count-up{font-variant-numeric:tabular-nums}

/* Petit décalage en cascade quand plusieurs .js-reveal se suivent */
.js-reveal.s2{transition-delay:.08s}
.js-reveal.s3{transition-delay:.16s}
.js-reveal.s4{transition-delay:.24s}

/* ---------- 5. SECTION ZONES & DESTINATIONS (SEO) ---------- */
.zones{background:var(--encre);color:var(--blanc);position:relative;overflow:hidden}
.zones::before{
  content:""; position:absolute; right:-10%; top:-30%; width:600px; height:600px;
  background:radial-gradient(circle,rgba(201,162,75,.10),transparent 68%); pointer-events:none;
}
.zones .eyebrow{color:var(--or-clair)}
.zones h2{color:var(--blanc)}
.zones .lead-l,.zones .lead{color:rgba(247,245,240,.82)}

.zones-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:40px 0 8px;
}
.zstat{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:26px 22px; text-align:center;
  transition:transform .3s, border-color .3s, background .3s;
}
.zstat:hover{transform:translateY(-4px); border-color:var(--or); background:rgba(201,162,75,.08)}
.zstat b{display:block; font-family:'Inter',sans-serif; font-size:2.3rem; color:var(--or); line-height:1}
.zstat span{display:block; margin-top:8px; font-size:.92rem; color:rgba(247,245,240,.75)}

.zones-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.zcard{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:28px;
  transition:transform .3s, border-color .3s;
}
.zcard:hover{transform:translateY(-5px); border-color:var(--or)}
.zcard h3{font-size:1.18rem; margin-bottom:12px; color:var(--blanc)}
.zcard h3 .zico{color:var(--or); margin-right:8px}
.zcard ul{list-style:none; margin:0; padding:0}
.zcard li{padding:7px 0; font-size:.96rem; color:rgba(247,245,240,.85); border-bottom:1px solid rgba(255,255,255,.07)}
.zcard li:last-child{border-bottom:none}
.zcard li b{color:var(--blanc); font-weight:600}
.zones-foot{
  margin-top:38px; padding:24px 28px; border-radius:var(--radius);
  background:rgba(201,162,75,.08); border:1px solid rgba(201,162,75,.3);
  font-size:1rem; color:rgba(247,245,240,.9);
}
.zones-foot b{color:var(--or-clair)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .zones-stats{grid-template-columns:repeat(2,1fr)}
  .zones-grid{grid-template-columns:1fr}
}

/* ---------- Respect de « animations réduites » ---------- */
@media (prefers-reduced-motion: reduce){
  .sig-progress{display:none}
  .hero .mention,.hero h1,.hero .hero-lead,.hero .hero-cta,.hero .hero-preuves{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
    .zstat:hover,.zcard:hover{transform:none}
}