/* BEFARM Finance — mouvement (chargé après site.css).
   Principes : on n'anime que transform et opacité ; une seule courbe d'accélération pour toute la page ;
   rien ne bouge si l'utilisateur demande moins d'animations ; sans JavaScript, tout est visible tout de suite.
   Les états de départ (éléments masqués avant leur apparition) n'existent que sous « html.js ». */

:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

/* ----------------------------------------------------------- en-tête vivant */
.top { transition: background-color .35s, box-shadow .35s; }
.top__in { transition: height .35s var(--ease); }
.top.is-scrolled { background: rgba(241, 242, 242, .94); box-shadow: 0 12px 32px -20px rgba(15, 28, 40, .45); }
.top.is-scrolled .top__in { height: 60px; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

.nav a { position: relative; padding-block: 6px; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--out); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ boutons */
.btn { transition: background-color .2s, box-shadow .3s var(--ease), transform .3s var(--out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { box-shadow: 0 14px 28px rgba(47, 191, 78, .42); }
.btn--ghost:hover { box-shadow: 0 10px 22px -12px rgba(15, 28, 40, .35); }

/* -------------------------------------------------------------------- héros */
.hero { position: relative; isolation: isolate; }
.hero::before, .hero::after { content: ''; position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.hero::before { width: clamp(380px, 48vw, 720px); right: -8%; top: 16%; background: radial-gradient(closest-side, rgba(63, 207, 94, .22), rgba(63, 207, 94, 0)); animation: blob-a 19s ease-in-out infinite alternate; }
.hero::after { width: clamp(320px, 40vw, 560px); left: -10%; bottom: -14%; background: radial-gradient(closest-side, rgba(138, 224, 156, .32), rgba(138, 224, 156, 0)); animation: blob-b 23s ease-in-out infinite alternate; }
@keyframes blob-a { to { transform: translate3d(-70px, 44px, 0) scale(1.14); } }
@keyframes blob-b { to { transform: translate3d(80px, -40px, 0) scale(1.1); } }

/* Titres : les mots montent un à un derrière un masque. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .18em; margin: -.1em 0 -.18em; }
.w__i { display: inline-block; }
html.js [data-split] .w__i { transform: translateY(115%); }
html.js [data-split].is-in .w__i { transform: none; transition: transform 1s var(--out); transition-delay: calc(var(--i, 0) * 55ms + var(--base, 0ms)); }
/* Le titre du héros reste invisible jusqu'à son découpage ; si le script échoue, il apparaît quand même. */
html.js .hero h1:not(.is-split) { opacity: 0; animation: show-late 0s 1.6s forwards; }
@keyframes show-late { to { opacity: 1; } }

/* Les deux fragments flottent doucement et suivent le pointeur en sens inverse (profondeur). */
.hv { translate: 0 calc(var(--sy, 0) * -.05px); }
.frag { transition: translate .7s var(--out); }
.frag--result { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -9px); }
.frag--couts { translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 12px); }
.frag img { animation: float-a 8s ease-in-out infinite; }
.frag--couts img { animation-name: float-b; animation-duration: 10s; animation-delay: -3s; }
@keyframes float-a { 50% { transform: translateY(-9px); } }
@keyframes float-b { 50% { transform: translateY(10px); } }

/* ------------------------------------------------------ apparition au défilement */
html.js [data-reveal] {
  opacity: 0;
  transition: opacity .9s var(--out), transform 1s var(--out), clip-path 1.1s var(--out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal="up"] { transform: translateY(34px); }
html.js [data-reveal="pop"] { transform: translateY(26px) scale(.93); }
html.js [data-reveal="left"] { transform: translateX(-56px) rotate(-2deg); }
html.js [data-reveal="right"] { transform: translateX(56px) rotate(2deg); }
html.js [data-reveal="tilt"] { transform: perspective(1400px) translateY(56px) rotateX(9deg) scale(.97); transform-origin: 50% 100%; }
html.js [data-reveal="wipe"] { opacity: 1; clip-path: inset(0 0 100% 0 round 28px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 28px); }

/* ------------------------------------------- ce qu'on ne mélange pas : filets et signes */
.neq__list li { position: relative; border-bottom: 0; }
.neq__list li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; }
.neq__pair .sign { display: inline-block; }
html.js .neq__list li:not(.line-in)::after { transform: scaleX(0); }
html.js .neq__list li.line-in::after { transition: transform 1.3s var(--out); transition-delay: var(--d, 0ms); }
html.js .neq__list li:not(.line-in) .sign { opacity: 0; transform: scale(.4) rotate(-30deg); }
html.js .neq__list li.line-in .sign { animation: pop 1s var(--out) both; animation-delay: calc(var(--d, 0ms) + 260ms); }
@keyframes pop { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 55% { opacity: 1; transform: scale(1.22) rotate(7deg); } 100% { opacity: 1; transform: none; } }
.neq__list li:hover .sign { animation: wobble .7s var(--out); }
@keyframes wobble { 30% { transform: rotate(-14deg) scale(1.12); } 65% { transform: rotate(8deg); } }

/* ------------------------------------------------ le kilo : console réactive */
.console { position: relative; isolation: isolate; overflow: hidden; }
.console::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(63, 207, 94, .14), transparent 62%); }
.console:hover::before { opacity: 1; }
.slider.is-idle input[type=range]::-webkit-slider-thumb { animation: ring 2.2s ease-out infinite; }
.slider.is-idle input[type=range]::-moz-range-thumb { animation: ring 2.2s ease-out infinite; }
@keyframes ring {
  0% { box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 255, 255, .6); }
  100% { box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 18px rgba(255, 255, 255, 0); }
}
.verdict.is-flip { animation: flip .7s var(--out); }
@keyframes flip { 0% { transform: scale(.96); } 45% { transform: scale(1.018); } 100% { transform: none; } }
.duel__res .num { transition: color .25s; }

/* ------------------------------------------------ onglets : curseur glissant, progression */
.tabs { position: relative; }
.tab { position: relative; z-index: 1; }
.glider { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 12px; background: var(--ink); transition: transform .55s var(--out), width .55s var(--out), height .55s var(--out); will-change: transform; }
/* Quand le curseur glissant porte la sélection, l'onglet actif n'a plus de fond propre. */
html.has-glider .tab[aria-selected=true] { background: transparent; border-color: transparent; color: #fff; }
@media (min-width: 900px) {
  .tabs--side .glider { z-index: 2; width: 3px !important; border-radius: 3px; background: var(--green); }
  html.has-glider .tabs--side .tab[aria-selected=true] { border-left-color: var(--line-2); color: var(--ink); }
}
.tab.is-timed::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (min-width: 900px) { .tabs--side .tab.is-timed::after { left: 22px; right: 0; bottom: 3px; background: var(--ink); opacity: .35; } }

.tour__pause { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--text-2); font-weight: 500; font-size: .8125rem; transition: background-color .2s, color .2s; }
.tour__pause:hover { background: var(--soft); color: var(--ink); }
.tour__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tour__pause .i-play { display: none; fill: currentColor; stroke-width: 1.6; }
.tour__pause[aria-pressed=true] .i-play { display: inline; }
.tour__pause[aria-pressed=true] .i-pause { display: none; }

/* ---------------------------------------------------- sur le terrain : flottement */
.field__visual .field__modal:not([data-reveal]) { animation: float-a 9s ease-in-out infinite; }
.field__visual .field__phone:not([data-reveal]) { animation: float-b 10s ease-in-out -4s infinite; }

.gallery__row .phone:nth-child(even) { margin-top: 30px; }
.gallery__row .phone__body { transition: transform .7s var(--out), box-shadow .7s var(--out); }
.gallery__row .phone:hover .phone__body { transform: translateY(-12px) rotate(-.6deg); box-shadow: 0 48px 72px -24px rgba(15, 28, 40, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------- bandeau final vivant */
.closing { position: relative; isolation: isolate; overflow: clip; background-size: 150% 150%; animation: gradient-shift 17s ease-in-out infinite alternate; }
.closing::before, .closing::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.closing::before { width: 640px; height: 640px; right: -140px; top: -170px; background: radial-gradient(closest-side, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); animation: blob-a 15s ease-in-out infinite alternate; }
.closing::after { width: 540px; height: 540px; left: 32%; bottom: -280px; background: radial-gradient(closest-side, rgba(15, 28, 40, .16), rgba(15, 28, 40, 0)); animation: blob-b 19s ease-in-out infinite alternate; }
@keyframes gradient-shift { from { background-position: 0% 0%; } to { background-position: 100% 70%; } }

/* ------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-split] .w__i, html.js .neq__list li .sign, html.js .hero h1:not(.is-split) { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  html.js .neq__list li::after { transform: none !important; }
  .hero::before, .hero::after, .closing, .closing::before, .closing::after { animation: none !important; }
  .top::after { display: none; }
  .frag, .frag--result, .frag--couts, .hv { translate: none !important; }
}