/* ==========================================================================
   Racines d'Avenir — animations
   Les états de départ ne s'appliquent que si JavaScript est actif (classe
   .js posée dans le <head>) et si l'utilisateur n'a pas demandé à réduire
   les animations : sans JS, la page s'affiche telle que la maquette.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Transition douce entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease-out) both; }
.hdr-pill { view-transition-name: entete; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Icônes : transitions de survol */
.i { transition: transform .35s var(--ease-out); }
a:hover .i-arrow-right, button:hover .i-arrow-right { transform: translateX(4px); }
a:hover .i-arrow-left, button:hover .i-arrow-left { transform: translateX(-4px); }
a:hover .i-arrow-up-right { transform: translate(3px, -3px) scale(1.05); }
a:hover .i-download { transform: translateY(3px); }
button:hover .i-send { transform: translate(3px, -3px) rotate(-8deg); }

@media (prefers-reduced-motion: no-preference) {

  /* ----------------------------------------------------------------------
     Barre de progression de lecture
     ---------------------------------------------------------------------- */
  .scroll-progress {
    position: fixed; inset: 0 0 auto; height: 3px; z-index: 90;
    pointer-events: none;
  }
  .scroll-progress span {
    display: block; height: 100%;
    background: var(--soleil);
    transform-origin: 0 50%;
    transform: scaleX(var(--progress, 0));
  }

  /* ----------------------------------------------------------------------
     En-tête : se retire en descendant, revient en remontant
     ---------------------------------------------------------------------- */
  .hdr-bar { transition: transform .45s var(--ease-out); }
  .site-header.is-hidden .hdr-bar { transform: translateY(calc(-100% - 24px)); }
  .first-visit .hdr-pill { animation: drop-in .8s var(--ease-out) both; }

  /* Logo : la pousse sort de terre (1re visite) et au pied de page */
  .logo-mark { transform-origin: 50% 100%; }
  :is(.first-visit .hdr-pill, .js .ft-cols:not(.is-pending)) .logo-mark { animation: tree-grow .9s var(--ease-spring) .1s both; }
  a:hover > .logo-mark { animation: sway 1.2s ease-in-out; }

  /* Menu mobile */
  .hdr-menu.is-opening { animation: menu-open .6s var(--ease-out) both; }
  .hdr-menu.is-closing { animation: menu-open .35s ease-in reverse both; }
  .hdr-menu.is-opening nav a,
  .hdr-menu.is-opening > a,
  .hdr-menu.is-opening > p { animation: rise .55s var(--ease-out) both; animation-delay: calc(.15s + var(--i, 0) * 50ms); }

  /* ----------------------------------------------------------------------
     Hero : entrée en cascade + photo vivante
     ---------------------------------------------------------------------- */
  .js [data-hero] .hero-card { animation: card-in 1s var(--ease-out) both; }
  .js [data-hero] .hero-card > * { animation: rise .9s var(--ease-out) both; animation-delay: calc(.3s + var(--n, 0) * .1s); }
  .js [data-hero] .hero-card > :nth-child(2) { --n: 1; }
  .js [data-hero] .hero-card > :nth-child(3) { --n: 2; }
  .js [data-hero] .hero-card > :nth-child(4) { --n: 3; }
  .js [data-hero] .hero-card > :nth-child(5) { --n: 4; }
  .js [data-hero] .hero-card > :nth-child(6) { --n: 5; }
  .js [data-hero] .hero-card h1 > span[style*="display: block"] { animation: rise 1s var(--ease-out) both; }
  .js [data-hero] .hero-card h1 > span:nth-child(1) { animation-delay: .45s; }
  .js [data-hero] .hero-card h1 > span:nth-child(2) { animation-delay: .6s; }
  .js [data-hero] .hero-card h1 > span:nth-child(3) { animation-delay: .75s; }
  .js [data-hero] .hero-tag { animation: slide-left .9s var(--ease-out) .9s both; }
  /* Bannière d'accueil : zoom lent de la photo, texte révélé ligne à ligne */
  .js .hs-slide .img-slot__frame { transform: scale(1.12); transition: transform 0s linear 1.2s; }
  .js .hs-slide.is-active .img-slot__frame { transform: scale(1); transition: transform 9s cubic-bezier(.2, .6, .2, 1); }
  .hs-media > .img-slot { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }

  .js .hs-line > span { transform: translateY(108%); transition: transform 0s linear 1.2s; }
  .js .hs-slide.is-active .hs-line > span { transform: none; transition: transform 1.1s var(--ease-out) .35s; }
  .js .hs-slide.is-active .hs-line + .hs-line > span { transition-delay: .5s; }
  .js .hs-slide :is(.hs-kicker, .hs-text, .hs-actions) {
    opacity: 0; transform: translateY(22px);
    transition: opacity .35s ease, transform 0s linear 1.2s;
  }
  .js .hs-slide.is-active :is(.hs-kicker, .hs-text, .hs-actions) {
    opacity: 1; transform: none;
    transition: opacity .9s ease var(--d, .2s), transform 1s var(--ease-out) var(--d, .2s);
  }
  .js .hs-slide.is-active .hs-text { --d: .7s; }
  .js .hs-slide.is-active .hs-actions { --d: .85s; }
  .js .hs-kicker__rule { transform-origin: 0 50%; }
  .js .hs-slide .hs-kicker__rule { transform: scaleX(0); transition: transform 0s linear 1.2s; }
  .js .hs-slide.is-active .hs-kicker__rule { transform: scaleX(1); transition: transform .9s var(--ease-out) .4s; }
  .first-visit .hs-bar { animation: rise 1s var(--ease-out) 1.1s both; }

  /* Progression de l'onglet actif pendant le défilement automatique */
  [data-slider].is-playing .hs-tab[aria-selected="true"] .hs-tab__fill { animation: dot-timer var(--slide-duration, 7s) linear both; }
  [data-slider].is-paused .hs-tab[aria-selected="true"] .hs-tab__fill { animation-play-state: paused; }

  /* Bouton WhatsApp : apparaît après l'arrivée sur la page, puis respire */
  .js .wa-float { animation: wa-in .7s var(--ease-spring) 1.6s both; }
  .wa-float::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    animation: wa-pulse 2.8s ease-out 3s infinite;
  }

  .hero-media { overflow: hidden; }
  .hero-media > .img-slot { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }
  .js .hero-media .img-slot__frame { animation: hero-zoom 2.4s var(--ease-out) both, breathe 18s ease-in-out 2.4s infinite alternate; }
  .js .map-pin { animation: pin-drop .9s var(--ease-spring) 1s both; }
  .map-pin > span:first-child { animation: pulse-ring 2.4s ease-out 2s infinite; }

  /* ----------------------------------------------------------------------
     Apparitions au défilement
     ---------------------------------------------------------------------- */
  /* Bloc entier */
  .js [data-reveal].is-pending { opacity: 0; transform: translateY(28px); }
  .js [data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

  /* Enfants en cascade */
  /* (animation plutôt que transition : certaines cartes ont une transition en ligne) */
  .js [data-stagger].is-pending > * { opacity: 0; }
  .js [data-stagger].is-in > * { animation: stagger-in .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }

  /* Titres mot à mot */
  .split .w { display: inline-block; }
  .js .split.is-pending .w { opacity: 0; transform: translateY(.45em) rotate(2deg); }
  .js .split .w {
    transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: calc(var(--wi, 0) * 45ms);
  }

  /* Soulignés jaunes dessinés au trait */
  .js .swash { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-out); }
  .js .swash.is-drawn { stroke-dashoffset: 0; }

  /* Photos : dévoilement en rideau */
  .js .img-slot.is-pending .img-slot__frame { clip-path: inset(100% 0 0 0); transform: scale(1.15); }
  .js .img-slot .img-slot__frame { transition: clip-path 1.1s var(--ease-out), transform 1.6s var(--ease-out), scale .8s var(--ease-out); }
  .js .img-slot.is-pending .img-slot__empty,
  .js .img-slot.is-pending .img-slot__ring { opacity: 0; }
  .img-slot__empty, .img-slot__ring { transition: opacity .6s ease .5s; }
  a:hover .img-slot__frame { scale: 1.06; }

  /* Chiffres */
  .pct { display: inline-block; }
  .js .pct.is-pending { transform: scale(.3) rotate(-30deg); opacity: 0; }
  .pct { transition: transform .8s var(--ease-spring) .9s, opacity .4s ease .9s; }
  .js .bar-fill.is-pending { transform: scaleX(0); }
  .bar-fill { transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .3s; }

  /* ----------------------------------------------------------------------
     Formes décoratives vivantes (feuilles)
     ---------------------------------------------------------------------- */
  .leaf {
    animation: float var(--float-d, 9s) ease-in-out var(--float-delay, 0s) infinite alternate;
    translate: 0 var(--parallax, 0px);
    will-change: translate, rotate;
  }

  /* Survol des pastilles d'icônes dans les listes */
  [data-stagger] > :hover .i,
  [data-stagger] > :hover > .i { animation: wiggle .7s var(--ease-out); }

  /* ----------------------------------------------------------------------
     Parcours : frise qui se remplit, étapes qui éclosent
     ---------------------------------------------------------------------- */
  .tl-progress {
    background: var(--soleil);
    border-radius: 4px;
    transform-origin: 50% 0;
    transform: scaleY(var(--p, 0));
    pointer-events: none;
  }
  .tl-num { position: relative; transition: transform .8s var(--ease-spring) .2s; }
  .js .is-pending .tl-num { transform: scale(.3) rotate(-90deg); }
  .tl-num.is-reached::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    animation: halo 1.4s ease-out both;
  }

  /* Témoignages */
  .is-entering { animation: rise .7s var(--ease-out) both; }
  [data-testimonials] .dot span { position: relative; overflow: hidden; }
  [data-testimonials].is-playing .dot[aria-selected="true"] span { background: rgba(242,177,52,.35); }
  [data-testimonials].is-playing .dot[aria-selected="true"] span::after {
    content: ""; position: absolute; inset: 0;
    background: var(--soleil);
    transform-origin: 0 50%;
    animation: dot-timer var(--slide-duration, 7s) linear both;
  }
  [data-testimonials].is-paused .dot[aria-selected="true"] span::after { animation-play-state: paused; }


  /* Carrousel : saisie à la souris */
  .rail { cursor: grab; }
  .rail.is-dragging { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto; }
  .rail.is-dragging a { pointer-events: none; }
  [data-rail-prev], [data-rail-next] { transition: opacity .3s, transform .3s var(--ease-out); }
  [data-rail-prev]:disabled, [data-rail-next]:disabled { opacity: .35; cursor: default; }
  [data-rail-prev]:not(:disabled):hover, [data-rail-next]:not(:disabled):hover { transform: scale(1.08); }

}

/* ----------------------------------------------------------------------
   Images clés
   ---------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-30px) scale(.96); } }
@keyframes card-in { from { opacity: 0; transform: translateY(60px); } }
@keyframes slide-left { from { opacity: 0; transform: translateX(30px); } }
@keyframes hero-zoom { from { transform: scale(1.14); } }
@keyframes breathe { to { scale: 1.06; } }
@keyframes sprout { from { opacity: 0; scale: 0; } }
@keyframes stem { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes sway { 30% { rotate: -10deg; } 65% { rotate: 7deg; } }
@keyframes float {
  from { rotate: 0deg; scale: 1; }
  to { rotate: var(--float-r, 8deg); scale: var(--float-s, 1.04); }
}
@keyframes wiggle { 30% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(8deg) scale(1.08); } }
@keyframes halo {
  from { box-shadow: 0 0 0 0 rgba(242,177,52,.7); }
  to { box-shadow: 0 0 0 36px rgba(242,177,52,0); }
}
@keyframes pin-drop { from { opacity: 0; transform: translateY(-80px); } }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(242,177,52,.7); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(242,177,52,0); }
}
@keyframes menu-open {
  from { clip-path: circle(0 at calc(100% - 48px) 48px); }
  to { clip-path: circle(150% at calc(100% - 48px) 48px); }
}
@keyframes dot-timer { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tree-grow { from { opacity: 0; scale: .45; } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes wa-in { from { opacity: 0; transform: translateY(30px) scale(.6); } }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
}
@keyframes stagger-in { from { opacity: 0; translate: 0 32px; scale: .97; } }