/* YDK Agency — animations (même logique que ydkconseil.com) */
:root{--ease:cubic-bezier(.22,1,.36,1);--acc:#0369A1}
html{scroll-behavior:smooth}

/* Barre de progression de lecture */
.progress{display:none;position:fixed;inset:0 0 auto;height:3px;background:var(--acc);transform-origin:0 50%;z-index:70}

/* Hero : titre ligne par ligne, puis apparitions */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block;animation:up 1s var(--ease) both}
.line:nth-child(2)>span{animation-delay:.14s}
.line:nth-child(3)>span{animation-delay:.28s}
.in{animation:fadeUp .9s var(--ease) both;animation-delay:calc(var(--d,0)*120ms + 350ms)}
.pop{animation:pop .9s var(--ease) both;animation-delay:calc(var(--d,0)*110ms + 650ms)}

/* Décor du hero : halos + grille de points, profondeur souris + parallaxe */
.hero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:-80px -20vw -40px;z-index:-1;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob.b1{width:520px;height:520px;right:4%;top:-60px;background:radial-gradient(circle,#BAE6FD,transparent 70%)}
.blob.b2{width:420px;height:420px;left:8%;bottom:-120px;background:radial-gradient(circle,#DBEAFE,transparent 70%)}
.hero-dots{position:absolute;right:2%;top:40px;width:360px;height:360px;opacity:.5;
  background-image:radial-gradient(#94A3B8 1.2px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%);mask-image:radial-gradient(circle,#000 30%,transparent 72%)}
.mouse{translate:calc(var(--mx,0)*var(--k,12)*1px) calc(var(--my,0)*var(--k,12)*1px);transition:translate .5s var(--ease)}
.photo-frame{overflow:hidden;border-radius:24px}
.photo-frame img{transform-origin:50% 0}

/* Apparitions au défilement */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*100ms)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv .icon *{stroke-dasharray:64;stroke-dashoffset:64;transition:stroke-dashoffset 1.4s var(--ease) .35s}
.js .rv.is-in .icon *{stroke-dashoffset:0}

/* Titres de section : soulignement qui se trace */
.h-ul{position:relative;display:inline}
.h-ul::after{content:"";position:absolute;left:0;bottom:-.06em;height:.12em;width:100%;background:var(--acc);opacity:.18;border-radius:4px;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .3s}
.js .rv.is-in .h-ul::after,.is-in>.h-ul::after{transform:scaleX(1)}

/* Fiche Google : votre garage remonte à la 1re place */
.js .rank-me{transform:translateY(118px);opacity:.6;transition:transform 1.2s var(--ease) .5s,opacity .6s ease .5s}
.js .is-in .rank-me{transform:none;opacity:1}
.js .rank-badge{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) 1.6s}
.js .is-in .rank-badge{transform:scale(1)}
.js .rank-other{transition:transform 1.2s var(--ease) .5s;transform:translateY(-52px)}
.js .is-in .rank-other{transform:none}

/* Automatisation : chaîne qui s'allume étape par étape */
.js .chain>*{opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s var(--ease)}
.js .is-in .chain>*{opacity:1;transform:none}
.js .is-in .chain>*:nth-child(2){transition-delay:.5s}.js .is-in .chain>*:nth-child(3){transition-delay:.8s}
.js .is-in .chain>*:nth-child(4){transition-delay:1.1s}.js .is-in .chain>*:nth-child(5){transition-delay:1.4s}
.js .is-in .chain>*:nth-child(1){transition-delay:.2s}

/* Méthode : ligne de progression */
.steps-track{height:3px;background:#E2E8F0;border-radius:999px;overflow:hidden}
.steps-track i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--ease) .2s}
.is-in>.steps-track i,.is-in .steps-track i{transform:scaleX(1)}

/* Bandeau défilant */
.marquee{overflow:hidden;background:#0F172A;color:#E2E8F0;border-block:1px solid #0F172A}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:18px;padding:18px 9px;font-family:'Outfit',sans-serif;font-weight:600;font-size:20px;white-space:nowrap}
.marquee-track span::after{content:"";width:8px;height:8px;border-radius:50%;background:#7DD3FC;margin-left:9px}

/* Texte géant qui glisse */
.drift-wrap{overflow:hidden;padding:56px 24px 0;pointer-events:none;text-align:center}
.drift{display:inline-block;font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(44px,5.6vw,92px);line-height:1;letter-spacing:-2px;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px #CBD5E1}
.drift .acc{-webkit-text-stroke-color:#7DB9DC}
@media (max-width:700px){
  .drift-wrap{padding:48px 24px 0;text-align:left}
  .drift{white-space:normal;font-size:clamp(40px,13vw,64px);letter-spacing:-1px;line-height:1.05;animation:none !important;transform:none !important}
  .drift span{display:block}
}

/* Boutons et FAQ */
.v2-btn svg{transition:transform .25s}
.v2-btn:hover svg{transform:translateX(5px)}
.pulse{animation:pulse 2.4s ease-out infinite}
details summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:26px;font-weight:400;color:var(--acc);transition:transform .3s var(--ease);flex:none}
details[open] summary::after{transform:rotate(45deg)}

/* Bloc CTA : halos en mouvement */
.cta{position:relative;isolation:isolate;overflow:hidden}
.cta-glow{position:absolute;z-index:-1;width:620px;height:620px;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none}
.cta-glow.g1{left:-160px;top:-200px;background:#0369A1}
.cta-glow.g2{right:-200px;bottom:-260px;background:#38BDF8;opacity:.2}

@keyframes up{from{transform:translateY(110%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(3,105,161,.5)}100%{box-shadow:0 0 0 16px rgba(3,105,161,0)}}
@keyframes parUp{to{transform:translateY(-110px)}}
@keyframes parDown{to{transform:translateY(80px);opacity:.25}}
@keyframes parSlow{to{transform:translateY(160px)}}
@keyframes drift{from{transform:translateX(5%)}to{transform:translateX(-5%)}}
@keyframes zoom{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes glow{to{transform:translate(120px,80px)}}

@supports (animation-timeline: scroll()){
  .progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}
  .par-up{animation:parUp linear both;animation-timeline:scroll(root);animation-range:0 900px}
  .par-down{animation:parDown linear both;animation-timeline:scroll(root);animation-range:0 800px}
  .hero-dots{animation:parSlow linear both;animation-timeline:scroll(root);animation-range:0 1000px}
  .drift{animation:drift linear both;animation-timeline:view()}
  .photo-frame img{animation:zoom linear both;animation-timeline:view();animation-range:entry cover 55%}
  .cta-glow.g1{animation:glow linear both;animation-timeline:view()}
}