/* ============================================================
   Granel Rénovation — Couche d'animations "wow" (11/06/2026)
   Se greffe par-dessus styles.css (chargée après).
   ============================================================ */
html { scroll-behavior: smooth; }

/* ---------- Reveal de base : musclé (mouvement + scale + flou + ressort) ---------- */
.reveal{
  opacity:0;
  transform: translateY(42px) scale(.975);
  filter: blur(2.5px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1),
              filter .6s ease;
  will-change: opacity, transform;
}
/* Sécurité anti-chevauchement : titres avec mot en script (em Playfair) */
.simu-head h2, .home-poles-head h2, .home-steps-body h2, .home-cta-body h2, .cta-banner h2{ line-height:1.16; }
h1 em, h2 em{ line-height:1; }
.simu-wrap{ margin-top:48px; }
.reveal.in{ opacity:1; transform:none; filter:none; }
.reveal-delay-1{ transition-delay:.10s; }
.reveal-delay-2{ transition-delay:.20s; }
.reveal-delay-3{ transition-delay:.30s; }

/* ---------- Variantes auto (.arv, posées par animations.js) ---------- */
.arv{
  opacity:0; filter:blur(2px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1),
              transform .85s cubic-bezier(.16,1,.3,1),
              filter .55s ease,
              clip-path .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.arv.up   { transform: translateY(44px); }
.arv.left { transform: translateX(-56px); }
.arv.right{ transform: translateX(56px); }
.arv.zoom { transform: scale(.9); filter:blur(1.5px); }
.arv.clip { clip-path: inset(0 0 100% 0); filter:none; transform: translateY(18px); }
.arv.flip { transform: perspective(900px) rotateX(16deg); transform-origin: top center; filter:none; }
/* Reset de l'état révélé — DOIT venir après les variantes directionnelles
   (même spécificité) pour gagner par l'ordre source, sinon l'élément reste
   figé translaté et chevauche le contenu suivant. */
.arv.in{ opacity:1; transform:none; filter:none; }
.arv.clip.in{ clip-path: inset(0 0 0 0); }

/* ---------- Barre de progression de scroll ---------- */
.scrollprog{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:99999;
  background:linear-gradient(90deg,#1F3D34,#6C8B7A,#C56E4E);
  box-shadow:0 0 12px rgba(197,110,78,.55);
  transition: width .08s linear;
}

/* ---------- Hover : cartes (élévation + ombre) ---------- */
.service-card, .home-poles-grid > *, .zone-card, .testi-card, .step-card, .pole-card, .info-card{
  transition: transform .5s cubic-bezier(.2,.8,.2,1.04), box-shadow .5s ease, border-color .4s ease !important;
}
.service-card:hover, .pole-card:hover, .info-card:hover{
  box-shadow: 0 30px 64px -26px rgba(31,61,52,.45) !important;
}
/* icônes qui réagissent */
.svc-icon{ transition: transform .55s cubic-bezier(.2,.8,.2,1.5) !important; }
.service-card:hover .svc-icon{ transform: scale(1.14) rotate(-7deg); }

/* ---------- Images : zoom doux au survol ---------- */
.home-cta-img-wrap, figure, .zone-map, .media, .img-wrap, .home-hero-img{ overflow:hidden; }
.home-cta-img-wrap img, figure img, .zone-map img, .media img, .img-wrap img, .home-hero-img img{
  transition: transform 1.3s cubic-bezier(.2,.7,.2,1);
}
.home-cta-img-wrap:hover img, figure:hover img, .zone-map:hover img, .media:hover img, .img-wrap:hover img{
  transform: scale(1.07);
}

/* ---------- Boutons : brillance + relief magnétique ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); pointer-events:none;
}
.btn:hover::after{ animation: btnShine .85s ease; }
@keyframes btnShine{ to{ left:150%; } }
.btn-primary{ transition: transform .22s cubic-bezier(.2,.8,.2,1.35), box-shadow .25s ease !important; }
.btn-primary:hover{ box-shadow: 0 18px 34px -12px rgba(197,110,78,.55) !important; }

/* ---------- Liens nav : soulignement animé ---------- */
.nav-links a, header nav a, .footer-col a{ position:relative; }
.nav-links a::after, header nav a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background:var(--beige); transition: width .32s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after, header nav a:hover::after{ width:100%; }

/* ---------- Badges flottants ---------- */
.circle-badge, .floating, .badge-float{ animation: floaty 6.5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-13px); } }

/* ---------- Blobs décoratifs animés (posés par JS) ---------- */
.anim-blob{
  position:absolute; border-radius:50%; filter:blur(64px); opacity:.20;
  pointer-events:none; z-index:0; animation: blobMove 20s ease-in-out infinite;
}
.anim-blob.b-sage{ background:#6C8B7A; }
.anim-blob.b-terra{ background:#C56E4E; }
.anim-blob.b-green{ background:#1F3D34; }
@keyframes blobMove{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(46px,-34px) scale(1.18); }
}
/* le contenu reste au-dessus des blobs */
.has-blobs > .container, .has-blobs .container{ position:relative; z-index:1; }

/* ---------- Tilt 3D (cartes) ---------- */
.tilt{ transform-style: preserve-3d; }

/* ---------- Apparition de l'en-tête au chargement ---------- */
@keyframes headIn{ from{ opacity:0; transform: translateY(-14px); } to{ opacity:1; transform:none; } }
.site-header, header.site-header, .header{ animation: headIn .7s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .arv{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .scrollprog, .anim-blob{ display:none !important; }
  *{ animation:none !important; }
}

/* ============ Pop-up simulateur (après 3 s) ============ */
.gr-pop{
  position:fixed; right:24px; bottom:24px; z-index:9998; max-width:360px; width:calc(100% - 48px);
  background:#fff; border:1px solid rgba(31,61,52,.12); border-radius:18px;
  box-shadow:0 26px 64px -18px rgba(31,61,52,.42); padding:22px 22px 20px;
  transform:translateY(140%) scale(.96); opacity:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.gr-pop.show{ transform:none; opacity:1; }
.gr-pop .pop-ic{ width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#1F3D34,#2f5749);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.gr-pop .pop-ic svg{ width:24px; height:24px; stroke:#C56E4E; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gr-pop .pop-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#C56E4E; margin-bottom:7px; }
.gr-pop h4{ font-family:'Montserrat',sans-serif; font-size:18px; font-weight:700; color:#1F3D34; margin:0 0 6px; text-transform:none; letter-spacing:0; line-height:1.25; }
.gr-pop p{ font-size:14px; line-height:1.5; color:#5a5a5a; margin:0 0 16px; }
.gr-pop .pop-cta{ display:inline-flex; align-items:center; gap:8px; background:#C56E4E; color:#fff; font-weight:700;
  font-size:14px; padding:12px 20px; border-radius:99px; text-decoration:none; border:0; cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
.gr-pop .pop-cta:hover{ background:#b25e3f; transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(197,110,78,.5); }
.gr-pop .pop-cta svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.gr-pop .pop-close{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; cursor:pointer;
  background:rgba(31,61,52,.06); border-radius:50%; color:#1F3D34; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.gr-pop .pop-close:hover{ background:rgba(31,61,52,.12); }
@media(max-width:520px){ .gr-pop{ right:12px; left:12px; bottom:12px; width:auto; max-width:none; } }