/* Animations partagées des pages publiques (vitrine + blog).
   Esprit de la charte : calme, clarté. Rien ne bouge en continu hormis le halo du hero, très lent.
   Tout ce qui cache du contenu en attendant son apparition est conditionné à html.lp-anim,
   posée par un petit script dans le <head> de chaque page, uniquement si le visiteur n'a pas
   demandé à réduire les animations. Le déclenchement est dans vitrine-animations.js. */

/* ── Barre de lecture et ombre du menu ── */
.lp-scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 2px;
  background: var(--sauge, #7C9A7A);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
.lp-nav { transition: box-shadow 0.3s; }
.lp-nav.is-scrolled { box-shadow: 0 8px 24px -14px rgba(43,45,49,0.22); }

/* ── Hero : halo végétal qui respire lentement ──
   Les heros ne sont pas positionnés : le halo se cale sur la largeur de la fenêtre
   (hors barre de défilement), sans créer de défilement horizontal. */
.lp-hero-glow {
  position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 780px;
  overflow: hidden; pointer-events: none;
}
.lp-hero-glow span { position: absolute; border-radius: 50%; filter: blur(70px); }
.lp-hero-glow .g1 {
  width: 460px; height: 460px; top: 0; left: calc(50% - 520px);
  background: rgba(124,154,122,0.22);
  animation: lpDrift 22s ease-in-out infinite alternate;
}
.lp-hero-glow .g2 {
  width: 380px; height: 380px; top: 140px; left: calc(50% + 140px);
  background: rgba(201,120,90,0.14);
  animation: lpDrift 28s ease-in-out infinite alternate-reverse;
}
@keyframes lpDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}

/* ── Hero : entrée en cascade ── */
@keyframes lpFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
html.lp-anim :is(.lp-hero, .tarif-hero, .etab-hero, .part-hero, .par-hero, .blog-head, .article-head) > :not(.lp-hero-glow) {
  opacity: 0;
  animation: lpFadeUp 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
html.lp-anim :is(.lp-hero, .tarif-hero, .etab-hero, .part-hero, .par-hero, .blog-head, .article-head) > :nth-child(2) { animation-delay: 0.12s; }
html.lp-anim :is(.lp-hero, .tarif-hero, .etab-hero, .part-hero, .par-hero, .blog-head, .article-head) > :nth-child(3) { animation-delay: 0.3s; }
html.lp-anim :is(.lp-hero, .tarif-hero, .etab-hero, .part-hero, .par-hero, .blog-head, .article-head) > :nth-child(4) { animation-delay: 0.45s; }
html.lp-anim :is(.lp-hero, .tarif-hero, .etab-hero, .part-hero, .par-hero, .blog-head, .article-head) > :nth-child(n+5) { animation-delay: 0.6s; }

/* ── Hero : coup de surligneur sous le mot en italique du titre ── */
:is(.lp-hero, .tarif-hero, .par-hero, .blog-head) h1 em {
  background-image: linear-gradient(rgba(124,154,122,0.22), rgba(124,154,122,0.22));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.06em;
}
html.lp-anim :is(.lp-hero, .tarif-hero, .par-hero, .blog-head) h1 em {
  background-size: 0% 0.3em;
  animation: lpMark 0.9s cubic-bezier(.6,0,.2,1) 1.1s forwards;
}
@keyframes lpMark { to { background-size: 100% 0.3em; } }

/* ── Apparition au défilement ── */
html.lp-anim [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--lp-d, 0s);
}
html.lp-anim [data-reveal="zoom"] { transform: scale(0.96); }
html.lp-anim [data-reveal="side"] { transform: translateX(-14px); }
html.lp-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Cartes : légère élévation au survol ── */
:is(.lp-benefice, .lp-testi-card, .lp-responsible-item, .tarif-card, .tarif-info-card, .etab-diff-item, .etab-card, .part-item, .part-niveau-card, .par-etape, .par-recompense-card) {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
:is(.lp-benefice, .lp-testi-card, .lp-responsible-item, .tarif-card, .tarif-info-card, .etab-card, .part-niveau-card, .par-recompense-card):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -22px rgba(43,45,49,0.28);
}
:is(.lp-benefice-icon, .lp-responsible-icon, .etab-diff-icon, .part-item-icon) {
  transition: transform 0.35s cubic-bezier(.3,1.5,.5,1);
}
:is(.lp-benefice, .lp-responsible-item, .etab-diff-item, .part-item):hover :is(.lp-benefice-icon, .lp-responsible-icon, .etab-diff-icon, .part-item-icon) {
  transform: rotate(-6deg) scale(1.08);
}

/* ── Boutons principaux : reflet au survol ── */
:is(.lp-btn-hero, .lp-btn-cta, .tarif-cta, .etab-hero-cta, .part-hero-cta, .par-cta-btn) { position: relative; overflow: hidden; }
:is(.lp-btn-hero, .lp-btn-cta, .tarif-cta, .etab-hero-cta, .part-hero-cta, .par-cta-btn)::after {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
:is(.lp-btn-hero, .lp-btn-cta, .tarif-cta, .etab-hero-cta, .part-hero-cta, .par-cta-btn):hover::after { left: 130%; }

/* ── FAQ : ouverture en fondu ── */
.lp-faq-item.open .lp-faq-a { animation: lpFaqIn 0.35s ease; }
@keyframes lpFaqIn { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-glow span { animation: none; }
  :is(.lp-btn-hero, .lp-btn-cta, .tarif-cta, .etab-hero-cta, .part-hero-cta, .par-cta-btn)::after { display: none; }
  .lp-faq-item.open .lp-faq-a { animation: none; }
}