/* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Page service (généré) Généré par scripts/build-service.py — ne pas éditer à la main. TOUT est scopé sous .abcdt-service-leads-generation. Aucune règle ne touche html, body, a, button, img ni les titres globaux : header et pied de page Elementor, Axeptio et HubSpot ne sont pas affectés. Les règles html{} et body{} du prototype sont retirées du scope, mais leurs déclarations sont REPORTÉES ci-dessous sur le wrapper. C'est exactement ce qui avait manqué lors du premier déploiement de la homepage, où le H1 s'était retrouvé gris foncé. ═══════════════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation{ margin:0; background:var(--ink); color:var(--text); font-family:var(--ff-b); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative; isolation:isolate; } /* Réinitialisation locale, strictement bornée au module. */ .abcdt-service-leads-generation *, .abcdt-service-leads-generation *::before, .abcdt-service-leads-generation *::after{ box-sizing:border-box } /* Marges de flux du navigateur : elles disparaissent avec body{}, il faut les redonner explicitement, sinon les titres se collent. */ .abcdt-service-leads-generation h1,.abcdt-service-leads-generation h2,.abcdt-service-leads-generation h3,.abcdt-service-leads-generation h4,.abcdt-service-leads-generation h5,.abcdt-service-leads-generation h6, .abcdt-service-leads-generation p,.abcdt-service-leads-generation ul,.abcdt-service-leads-generation ol,.abcdt-service-leads-generation dl,.abcdt-service-leads-generation figure,.abcdt-service-leads-generation blockquote{ color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none } .abcdt-service-leads-generation img,.abcdt-service-leads-generation video,.abcdt-service-leads-generation canvas{ display:block;max-width:100% } .abcdt-service-leads-generation a{ color:inherit } .abcdt-service-leads-generation button,.abcdt-service-leads-generation input,.abcdt-service-leads-generation select,.abcdt-service-leads-generation textarea{ font-family:inherit;font-size:inherit;font-weight:inherit; font-style:inherit;line-height:normal;color:inherit;letter-spacing:inherit } .abcdt-service-leads-generation ::selection{ background:var(--blue);color:var(--on-blue) } .abcdt-service-leads-generation :focus-visible{ outline:2px solid var(--blue-lift);outline-offset:4px;border-radius:2px } /* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Homepage V1 Direction A — Le Montage. Deux régimes : · par défaut → tout est visible, le hero fait un écran. C'est ce que voient les visiteurs sans JS et sous reduced-motion. · .js-motion → hero en sticky sur 3 plans, révélations au scroll. Le bleu est rare : accents de CTA uniquement. Tout le reste est noir, blanc et image. ═══════════════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation{ --ink:#06060A; --ink-2:#0B0B11; --ink-3:#13131E; /* fonds de survol — défini ici, jamais hérité */ --text:#E8E8F0; --text-2:#B8B8C4; --text-3:#9A9AB4; /* plancher texte — 7,37:1 sur --ink */ --line:rgba(232,232,240,.12); --line-2:rgba(232,232,240,.26); --blue:#1A6FFF; --blue-lift:#4A8CFF; --on-blue:#06060A; --ff-d:'Syne',system-ui,sans-serif; --ff-b:'DM Sans',system-ui,sans-serif; --e:cubic-bezier(.16,1,.3,1); --nav-h:76px; --gut:1.5rem; --maxw:1360px; --hero-scroll:2600px; } @media(min-width:768px){ .abcdt-service-leads-generation{ --gut:2.5rem } } @media(min-width:1200px){ .abcdt-service-leads-generation{ --gut:4rem } } .abcdt-service-leads-generation *, .abcdt-service-leads-generation *::before, .abcdt-service-leads-generation *::after{box-sizing:border-box} @media(prefers-reduced-motion:reduce){} .abcdt-service-leads-generation a{color:inherit} .abcdt-service-leads-generation .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .abcdt-service-leads-generation .skip{ position:fixed;top:.75rem;left:.75rem;z-index:300; padding:.7rem 1.1rem;background:var(--blue);color:var(--on-blue); font-weight:500;font-size:.9rem;border-radius:4px;text-decoration:none; transform:translateY(-180%);transition:transform .25s var(--e) } .abcdt-service-leads-generation .skip:focus-visible{transform:translateY(0)} /* ── Typographie commune ───────────────────────────────────────── */ .abcdt-service-leads-generation .eyebrow{ margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--text-3) } .abcdt-service-leads-generation .h2{ margin:0;font-family:var(--ff-d);font-weight:700; font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.04;letter-spacing:-.032em; text-wrap:balance;max-width:17ch } .abcdt-service-leads-generation .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch} .abcdt-service-leads-generation .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800} .abcdt-service-leads-generation .lede{margin:1.6rem 0 0;max-width:56ch;color:var(--text-3);font-size:1.02rem} /* Lien typographique — remplace les boutons pleins partout sauf le skip. */ .abcdt-service-leads-generation .tlink{ display:inline-flex;align-items:center;gap:.6rem; background:none;border:0;padding:.35rem 0;cursor:pointer; font-family:var(--ff-b);font-size:1rem;font-weight:500;color:var(--text); text-decoration:none;letter-spacing:.005em; border-bottom:1px solid var(--line-2); transition:color .25s var(--e),border-color .25s var(--e) } .abcdt-service-leads-generation .tlink::after{content:'→';transition:transform .3s var(--e)} .abcdt-service-leads-generation .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)} .abcdt-service-leads-generation .tlink:hover::after{transform:translateX(5px)} .abcdt-service-leads-generation .tlink--lg{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:-.01em} /* Lien secondaire : plus petit, sans filet, il ne concurrence jamais le lien principal. Signalé par la flèche et le contraste seuls. */ .abcdt-service-leads-generation .tlink--min{ border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em } .abcdt-service-leads-generation .tlink--min::after{font-size:.9em} .abcdt-service-leads-generation .tlink--min:hover{color:var(--text)} .abcdt-service-leads-generation .sec{position:relative;padding:clamp(5rem,13vh,9.5rem) 0} .abcdt-service-leads-generation .sec--quiet{padding:clamp(4rem,10vh,7rem) 0} .abcdt-service-leads-generation .sec--rule{border-top:1px solid var(--line)} /* Grain — technique reprise de Card with Noise Pattern (@Ali-Hussein-dev) : une turbulence SVG tuilée, posée en data-URI, sans requête réseau ni WebGL. C'est ce qui donne au noir sa matière plutôt qu'une couleur. Le même motif sert au hero et aux quatre zones retravaillées. */ .abcdt-service-leads-generation .tex{ position:absolute;inset:0;pointer-events:none;z-index:0; opacity:.05;mix-blend-mode:overlay;background-size:200px 200px; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") } /* Le lien de fin de chapitre respire toujours de la même façon. */ .abcdt-service-leads-generation .after-cta{margin-top:clamp(2.5rem,7vh,4.5rem)} /* ── Curseur personnalisé ─────────────────────────────────────── Canvas 2D plein écran, hors du flux, sans coût de mise en page. Ces deux règles sont volontairement HORS du scope .abchome : la couche suit le pointeur sur toute la fenêtre. Elles ne s'appliquent que si le script a réellement démarré le canvas (classe .has-tube posée sur à ce moment-là, jamais au chargement). */ /* ═══════════════════════════════════════════════════════════════════════ ABC DIGITAL TOUCH — Page service « Génération de leads B2B » V2. La V1 avait construit un troisième langage : du trait, du point, du Canvas. Elle appartenait à un autre site. Cette version reprend la grammaire de la page d'accueil et de la page Acquisition — plateau média plein cadre, poster peint d'abord, grain, voile, fenêtre qui repasse au-dessus, texte monumental, alternance spectacle / lecture — et n'en change que le récit. Aucun Canvas. La matière est filmée. LE BLEU reste rare : les liens, et rien d'autre. ═══════════════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .svc{ position:relative } /* Toute fenêtre média du site se comporte de la même façon : le poster est peint tout de suite, la vidéo se superpose quand elle est prête. Rien n'attend JavaScript pour être visible. */ .abcdt-service-leads-generation .m-fill{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover } /* ═══════════════════════════════════════════════════════════════ 01 · HERO — LE COURANT ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .hh{ position:relative;background:var(--ink) } .abcdt-service-leads-generation .hh__stage{ position:relative;isolation:isolate;overflow:hidden; min-height:100svh;display:flex;align-items:flex-end; padding:calc(var(--nav-h) + 4rem) 0 clamp(3rem,9vh,5.5rem) } .abcdt-service-leads-generation .hh__media{ position:absolute;inset:0;z-index:0 } .abcdt-service-leads-generation .hh__poster, .abcdt-service-leads-generation .hh__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; /* Le plan est retourné : sa fenêtre lumineuse passe à droite, sa masse dense à gauche. Le texte s'installe dans le noir, la matière respire en face de lui. */ transform:scaleX(-1) scale(1.06) translate3d(0,var(--hp,0px),0); transform-origin:center } .abcdt-service-leads-generation .hh__v{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-leads-generation .hh__v.is-lit{ opacity:1 } .abcdt-service-leads-generation .hh .tex{ z-index:2 } .abcdt-service-leads-generation .hh__veil{ position:absolute;inset:0;z-index:3; background: linear-gradient(78deg, rgba(6,6,10,.94) 0%, rgba(6,6,10,.8) 32%, rgba(6,6,10,.24) 64%, rgba(6,6,10,.42) 100%), linear-gradient(to bottom, rgba(6,6,10,.6) 0%, rgba(6,6,10,.22) 32%, rgba(6,6,10,.78) 86%, var(--ink) 100%) } /* La fenêtre — au-dessus du voile, c'est le seul endroit où le plan est vu à pleine densité. Même rôle que hero__win sur la page d'accueil. */ .abcdt-service-leads-generation .hh__win{ position:absolute;z-index:4;overflow:hidden; right:0;top:calc(var(--nav-h) + 2rem); width:min(46vw,520px);aspect-ratio:3/4; clip-path:inset(var(--wc,26%) 0 var(--wc,26%) 0); transition:clip-path 1.4s var(--e) } .abcdt-service-leads-generation .hh__winv{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) } .abcdt-service-leads-generation .hh__winl{ position:absolute;inset:0; background:linear-gradient(to left, transparent 40%, rgba(6,6,10,.55) 100%); box-shadow:inset 0 0 0 1px rgba(232,232,240,.14) } .abcdt-service-leads-generation .hh__copy{ position:relative;z-index:5;width:100% } .abcdt-service-leads-generation .hh__k{ display:flex;align-items:center;gap:1rem;margin:0 0 clamp(1.4rem,3.5vh,2.2rem); font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-leads-generation .hh__k i{ width:clamp(28px,6vw,64px);height:1px;background:var(--line-2);flex:none } .abcdt-service-leads-generation .hh__h{ margin:0 0 0 -.05em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.86; font-size:clamp(1.8rem,8.6vw,5.6rem);color:#fff;text-wrap:balance } .abcdt-service-leads-generation .hh__l{ margin:clamp(1.6rem,4.5vh,2.6rem) 0 0;max-width:46ch; color:var(--text-2);font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.62 } .abcdt-service-leads-generation .hh__a{ display:flex;align-items:center;gap:clamp(1.4rem,4vw,2.6rem);flex-wrap:wrap; margin:clamp(1.8rem,5vh,2.8rem) 0 0 } /* ── Repères ────────────────────────────────────────────────── */ .abcdt-service-leads-generation .hh__r{ position:relative;z-index:2;list-style:none; display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4vh,2.2rem); padding-top:clamp(2rem,5vh,3rem);padding-bottom:clamp(3rem,8vh,5rem); border-top:1px solid var(--line) } .abcdt-service-leads-generation .hh__ri b{ display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.05;color:var(--text) } .abcdt-service-leads-generation .hh__ri b i{ font-style:normal;color:var(--text-3);font-weight:400 } .abcdt-service-leads-generation .hh__ri span{ display:block;margin:.5rem 0 .7rem; font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-leads-generation .hh__ri p{ margin:0;max-width:34ch;color:var(--text-2);font-size:.94rem;line-height:1.6 } @media(min-width:768px){ .abcdt-service-leads-generation .hh__r{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem);gap:0 } .abcdt-service-leads-generation .hh__ri + .hh__ri{ padding-left:clamp(2rem,5vw,4rem);border-left:1px solid var(--line) } } @media(min-width:1024px){ .abcdt-service-leads-generation .hh__win{ top:auto;bottom:clamp(3rem,10vh,7rem);width:min(34vw,420px);aspect-ratio:4/5 } } /* De 768 à 1359 la fenêtre et le titre se disputent la même bande horizontale : à ces largeurs, le H1 monumental occupe presque toute la colonne. La fenêtre remonte alors dans le quart haut, où le bloc éditorial — aligné en bas — ne va jamais. */ @media(min-width:768px) and (max-width:1359px){ .abcdt-service-leads-generation .hh__win{ top:calc(var(--nav-h) + 1rem);bottom:auto;width:min(21vw,230px);aspect-ratio:1/1 } } @media(max-width:767px){ /* La fenêtre reste dans le tiers haut : en dessous, elle écrivait par-dessus le titre. Elle désigne la matière, elle ne la dispute pas au texte. */ .abcdt-service-leads-generation .hh__win{ width:40vw;top:calc(var(--nav-h) + .75rem);aspect-ratio:1/1 } .abcdt-service-leads-generation .hh__veil{ background: linear-gradient(to bottom, rgba(6,6,10,.6) 0%, rgba(6,6,10,.38) 30%, rgba(6,6,10,.92) 74%, var(--ink) 100%) } } /* ═══════════════════════════════════════════════════════════════ 02 · LE VOLUME N'EST PAS LE PIPELINE — la respiration claire La fenêtre s'ouvre depuis un petit cadre jusqu'à occuper presque tout l'écran. C'est le seul endroit du site où la matière est lumineuse : le contraste du parcours vient de là. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .vp{ position:relative;background:var(--ink) } .abcdt-service-leads-generation .vp__pin{ position:relative;min-height:100svh;overflow:hidden; display:grid;place-items:center;isolation:isolate } .abcdt-service-leads-generation .vp__pin > *, .abcdt-service-leads-generation .cw__pin > *{ min-width:0 } .abcdt-service-leads-generation .vp__frame{ position:absolute;margin:0;overflow:hidden; /* --vo va de 0 (petit cadre) à 1 (presque plein écran). */ width:calc(38% + 58% * var(--vo,1)); height:calc(34% + 60% * var(--vo,1)); background:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(232,232,240,.12) } .abcdt-service-leads-generation .vp__poster, .abcdt-service-leads-generation .vp__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.08) } .abcdt-service-leads-generation .vp__v{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-leads-generation .vp__v.is-lit{ opacity:1 } /* Le plan est clair : le texte a besoin d'un appui pour rester lisible par-dessus. Une ombre portée douce, jamais un aplat translucide. */ .abcdt-service-leads-generation .vp__grade{ position:absolute;inset:0; background: radial-gradient(110% 86% at 20% 54%, rgba(6,6,10,.78), rgba(6,6,10,.28) 54%, transparent 76%), linear-gradient(to bottom, rgba(6,6,10,.42), transparent 24%, transparent 66%, rgba(6,6,10,.5)) } .abcdt-service-leads-generation .vp__copy{ position:relative;z-index:2;width:100% } .abcdt-service-leads-generation .vp__eb{ color:var(--text-2) } .abcdt-service-leads-generation .vp__h{ margin:0 0 0 -.045em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.048em;line-height:.88; font-size:clamp(1.7rem,8.8vw,6.2rem);color:#fff; text-shadow:0 2px 42px rgba(6,6,10,.72) } .abcdt-service-leads-generation .vp__h span{ display:block } .abcdt-service-leads-generation .vp__after{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,4vh,2rem); padding-top:clamp(3rem,9vh,5.5rem);padding-bottom:clamp(4rem,11vh,7rem) } .abcdt-service-leads-generation .vp__p{ margin:0;max-width:52ch;color:var(--text-2);font-size:1rem;line-height:1.62 } @media(min-width:900px){ .abcdt-service-leads-generation .vp__after{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(3rem,7vw,6rem) } } /* La scène ne s'épingle qu'à partir d'une hauteur utile. */ /* La piste porte la hauteur de défilement ; le plateau y colle. Ce qui suit la piste reprend le flux normal, sans recouvrement. */ @media(min-height:620px){ .abcdt-service-leads-generation.abc-motion .vp__track{ height:250svh } .abcdt-service-leads-generation.abc-motion .vp__pin{ position:sticky;top:0;height:100svh;min-height:0 } } /* ═══════════════════════════════════════════════════════════════ 03 · LA CONVERSATION — la frontière de lumière Un seul cadre plein écran. --cf est la part de largeur occupée par la clarté : .18 au départ, .62 à l'arrivée. La même valeur découpe le plan clair et la copie encrée du texte, donc le bord est rigoureusement le même — il n'y a jamais deux frontières. Le bleu n'apparaît nulle part ici. Le contraste vient de la lumière. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .cw{ position:relative;background:var(--ink) } .abcdt-service-leads-generation .cw__pin{ position:relative;min-height:100svh;overflow:hidden;isolation:isolate; display:grid;align-items:center } .abcdt-service-leads-generation .cw__pin > *{ grid-area:1/1;min-width:0 } .abcdt-service-leads-generation .cw__field{ position:absolute;inset:0;z-index:0 } .abcdt-service-leads-generation .cw__poster, .abcdt-service-leads-generation .cw__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) } .abcdt-service-leads-generation .cw__poster, .abcdt-service-leads-generation .cw__v--dark{ object-position:78% 50%;filter:grayscale(1) contrast(1.3) brightness(.78) } .abcdt-service-leads-generation .cw__v{ opacity:0;transition:opacity 1.2s var(--e) } .abcdt-service-leads-generation .cw__v.is-lit{ opacity:1 } /* La clarté n'occupe qu'une bande, dont la largeur est pilotée au défilement. Un seul découpage, aucune bordure dessinée. */ /* Le plan de fond respire : par moments il s'éclaircit et le texte blanc perdrait son appui. Le voile est posé SOUS la bande claire, donc il ne touche jamais la partie lumineuse de la composition. */ .abcdt-service-leads-generation .cw__scrim{ position:absolute;inset:0; background: linear-gradient(96deg, rgba(6,6,10,.9) 0%, rgba(6,6,10,.72) 38%, rgba(6,6,10,.42) 72%, rgba(6,6,10,.34) 100%), linear-gradient(to bottom, rgba(6,6,10,.5), transparent 26%, transparent 74%, rgba(6,6,10,.5)) } .abcdt-service-leads-generation .cw__lit{ position:absolute;inset:0;overflow:hidden; clip-path:inset(0 0 0 calc((1 - var(--cf,.62)) * 100%)) } .abcdt-service-leads-generation .cw__poster--light{ object-position:20% 50%;filter:grayscale(1) contrast(1.02) brightness(1.1) } .abcdt-service-leads-generation .cw__v--light{ object-position:20% 50%;filter:grayscale(1) contrast(1.02) brightness(1.1) } /* Le bord lui-même : un simple dégradé qui adoucit la coupe, pas un filet. Il se déplace avec la frontière. */ .abcdt-service-leads-generation .cw__edge{ position:absolute;top:0;bottom:0;width:12vw;pointer-events:none; left:calc((1 - var(--cf,.62)) * 100% - 6vw); background:linear-gradient(90deg, transparent, rgba(6,6,10,.28) 46%, transparent) } .abcdt-service-leads-generation .cw .tex{ z-index:2 } .abcdt-service-leads-generation .cw__copy{ position:relative;z-index:3;width:100%;padding-block:clamp(4rem,10vh,7rem) } /* La copie encrée est révélée par exactement la même frontière que la lumière : le texte change de couleur au passage du bord. */ .abcdt-service-leads-generation .cw__copy--ink{ z-index:4;pointer-events:none; clip-path:inset(0 0 0 calc((1 - var(--cf,.62)) * 100%)) } .abcdt-service-leads-generation .cw__copy--ink .cw__h, .abcdt-service-leads-generation .cw__copy--ink .cw__a, .abcdt-service-leads-generation .cw__copy--ink .cw__b, .abcdt-service-leads-generation .cw__copy--ink .eyebrow{ color:var(--ink) } .abcdt-service-leads-generation .cw__eb{ margin-bottom:.9rem } .abcdt-service-leads-generation .cw__h{ margin:0 0 clamp(1.6rem,4vh,2.4rem); font-family:var(--ff-b);font-weight:500; font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2) } .abcdt-service-leads-generation .cw__q{ margin:0;padding:0;border:0 } .abcdt-service-leads-generation .cw__a{ margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.048em;line-height:.92; font-size:clamp(1.65rem,7.4vw,4.6rem);color:#fff;max-width:16ch } .abcdt-service-leads-generation .cw__a span{ display:block } /* La seconde phrase change d'échelle et se décale : c'est la réponse, elle n'a pas le même poids que l'objection. */ .abcdt-service-leads-generation .cw__b{ margin:clamp(1.6rem,4.5vh,2.6rem) 0 0;max-width:38ch; font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em;line-height:1.18; font-size:clamp(1.05rem,2.5vw,1.55rem);color:var(--text) } .abcdt-service-leads-generation .cw__after{ padding-top:clamp(3rem,8vh,4.5rem);padding-bottom:clamp(4rem,11vh,7rem) } .abcdt-service-leads-generation .cw__p{ margin:0;max-width:56ch;color:var(--text-2);font-size:1rem;line-height:1.62 } @media(min-width:900px){ .abcdt-service-leads-generation .cw__a{ font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:14ch } /* La réponse s'installe dans la zone que la lumière vient d'ouvrir. */ .abcdt-service-leads-generation .cw__b{ margin-left:clamp(2rem,12vw,11rem);max-width:30ch } } /* 170svh au lieu de 230 : la V2 laissait attendre. */ @media(min-height:620px){ .abcdt-service-leads-generation.abc-motion .cw__track{ height:170svh } .abcdt-service-leads-generation.abc-motion .cw__pin{ position:sticky;top:0;height:100svh;min-height:0 } } /* ═══════════════════════════════════════════════════════════════ 04 · LE DISPOSITIF — média collant, lecture en regard ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .dp{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0;background:var(--ink) } .abcdt-service-leads-generation .dp__head{ margin-bottom:clamp(3rem,8vh,5rem) } .abcdt-service-leads-generation .dp__grid{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vh,3rem) } .abcdt-service-leads-generation .dp__frame{ position:relative;overflow:hidden;aspect-ratio:4/3; background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(232,232,240,.12) } .abcdt-service-leads-generation .dp__poster, .abcdt-service-leads-generation .dp__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.15); /* Le cadrage suit le levier actif : c'est le même plan, recadré. */ object-position:var(--po,50% 50%); transform:scale(1.22); transition:object-position 1.1s var(--e),transform 1.1s var(--e) } .abcdt-service-leads-generation .dp__v{ opacity:0;transition:opacity 1.2s var(--e),object-position 1.1s var(--e),transform 1.1s var(--e) } .abcdt-service-leads-generation .dp__v.is-lit{ opacity:1 } .abcdt-service-leads-generation .dp__grade{ position:absolute;inset:0; background:linear-gradient(to top, rgba(6,6,10,.9) 0%, rgba(6,6,10,.26) 40%, transparent 62%, rgba(6,6,10,.34) 100%) } .abcdt-service-leads-generation .dp__step{ position:absolute;left:0;bottom:0;margin:0;padding:clamp(1rem,3vw,1.6rem); display:flex;flex-direction:column;gap:.4rem } .abcdt-service-leads-generation .dp__step i{ font-style:normal;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-leads-generation .dp__step b{ font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.5rem,4vw,2.2rem);line-height:1;color:#fff } .abcdt-service-leads-generation .dp__l{ list-style:none;margin:0;padding:0 } .abcdt-service-leads-generation .dp__i{ border-top:1px solid var(--line) } .abcdt-service-leads-generation .dp__i:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-leads-generation .dp__b{ display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start; gap:clamp(.9rem,2.5vw,1.4rem);width:100%; padding:clamp(1rem,2.6vh,1.4rem) 0; background:none;border:0;cursor:pointer;text-align:left; font-family:var(--ff-d);color:var(--text) } .abcdt-service-leads-generation .dp__n{ grid-column:1;grid-row:1;align-self:center; font-family:var(--ff-b);font-size:.68rem;letter-spacing:.18em;color:var(--text-3); font-variant-numeric:tabular-nums;transition:color .3s var(--e) } .abcdt-service-leads-generation .dp__t{ grid-column:2;grid-row:1; font-weight:600;letter-spacing:-.028em;line-height:1.1; font-size:clamp(1.05rem,2.8vw,1.5rem);transition:color .3s var(--e) } .abcdt-service-leads-generation .dp__g{ grid-column:2;grid-row:2;justify-self:start;margin-top:.45rem;display:flex;gap:.4rem } .abcdt-service-leads-generation .dp__g i{ font-style:normal;font-family:var(--ff-b); font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--text-3);padding:.26rem .55rem; border:1px solid var(--line);border-radius:2px;white-space:nowrap; transition:border-color .3s var(--e),color .3s var(--e) } .abcdt-service-leads-generation .dp__i.is-on .dp__n{ color:var(--text-2) } .abcdt-service-leads-generation .dp__i.is-on .dp__g i{ border-color:var(--line-2);color:var(--text-2) } .abcdt-service-leads-generation .dp__d{ padding:0 0 clamp(1rem,2.6vh,1.4rem) } .abcdt-service-leads-generation .dp__d p{ margin:0;max-width:58ch;color:var(--text-2);font-size:.96rem;line-height:1.64 } .abcdt-service-leads-generation.abc-motion .dp__d{ display:grid;grid-template-rows:0fr;padding-bottom:0;opacity:0; transition:grid-template-rows .55s var(--e),opacity .45s var(--e),padding-bottom .55s var(--e) } .abcdt-service-leads-generation.abc-motion .dp__d > p{ overflow:hidden;min-height:0 } .abcdt-service-leads-generation.abc-motion .dp__i.is-on .dp__d{ grid-template-rows:1fr;opacity:1;padding-bottom:clamp(1rem,2.6vh,1.4rem) } @media(min-width:768px){ .abcdt-service-leads-generation .dp__b{ grid-template-columns:auto minmax(0,1fr) auto } .abcdt-service-leads-generation .dp__g{ grid-column:3;grid-row:1;justify-self:end;margin-top:0;align-self:center } } @media(min-width:900px){ .abcdt-service-leads-generation .dp__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(2.5rem,6vw,5rem);align-items:start } .abcdt-service-leads-generation .dp__media{ position:sticky;top:calc(var(--nav-h) + 2rem) } .abcdt-service-leads-generation .dp__frame{ aspect-ratio:4/5 } } /* ═══════════════════════════════════════════════════════════════ 05 · NOTRE APPROCHE — LE CADRAGE Une scène, quatre états. Trois variables portent toute la section : --fw largeur du cadre 88% → 44% → 96% → 70% --fa format du cadre 21/9 → 4/5 → 16/9 → 3/2 --sc échelle de la matière 1.02 → 1.34 → 1.16 → 1.0 Le cadre est aligné à droite ; les numéros occupent la gauche et se font couper par son bord. Quand le cadre se resserre (02), il découvre le numéro ; quand il s'ouvre (03), il le recouvre presque. La forme raconte la méthode — il n'y a rien à lire pour comprendre. Aucun bleu dans cette section. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .ap{ position:relative;background:var(--ink);padding-top:clamp(5rem,13vh,9.5rem) } .abcdt-service-leads-generation .ap__head{ margin-bottom:clamp(2.5rem,7vh,4rem) } .abcdt-service-leads-generation .ap__pin{ position:relative;overflow:hidden;isolation:isolate; padding:clamp(2rem,6vh,4rem) 0 clamp(4rem,11vh,7rem) } .abcdt-service-leads-generation .ap__stage{ position:relative } /* ── Les quatre numéros, au même endroit ─────────────────────── L'actif est monumental ; les trois autres restent en veille juste derrière lui. C'est l'index de la section, et il n'en faut pas d'autre : ni pastilles, ni flèches, ni barre de progression. */ .abcdt-service-leads-generation .ap__nums{ /* z-index 3 : AU-DESSUS du cadre. C'est le média qui passe derrière la typographie, jamais l'inverse. */ position:absolute;left:var(--gut);top:0;margin:0;z-index:3; font-family:var(--ff-d);font-weight:800;letter-spacing:-.06em;line-height:.78; font-variant-numeric:tabular-nums;pointer-events:none } .abcdt-service-leads-generation .ap__nums span{ display:block;position:absolute;top:0;left:-.05em; font-size:clamp(6.5rem,21vw,20rem); /* Les temps à venir sont presque absents : un contour à peine posé. */ color:transparent; -webkit-text-stroke:1px rgba(232,232,240,.06); transform:translate3d(var(--nx,0), .05em, 0) scale(.94); transform-origin:0 50%; transition:color .85s var(--e) .1s,-webkit-text-stroke-color .85s var(--e) .1s, transform 1.3s cubic-bezier(.16,1,.26,1) .06s } /* Le temps qui vient d'être franchi laisse une trace, pas un rival. */ .abcdt-service-leads-generation .ap__nums span.is-past{ -webkit-text-stroke:1px rgba(232,232,240,.22) } /* L'actif est plein. C'est lui qui structure le cadre. */ .abcdt-service-leads-generation .ap__nums span.is-on{ color:rgba(255,255,255,.94); -webkit-text-stroke:0; transform:translate3d(var(--nx,0), 0, 0) scale(var(--nsc,1)) } /* ── Le cadre ────────────────────────────────────────────────── Sa largeur et son format changent d'un état à l'autre. C'est le mouvement principal de la section : une masse qui se resserre puis s'ouvre, pas un contenu qui glisse. */ .abcdt-service-leads-generation .ap__frame{ position:relative;z-index:1;margin:0 0 0 auto;overflow:hidden; width:var(--fw,68%);aspect-ratio:var(--fa,16/9); /* Filet de sécurité : quelle que soit la géométrie de l'état, le cadre ne dépasse jamais la hauteur qui reste une fois le texte posé. */ max-height:min(52svh,520px); background:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(232,232,240,.12); transition:width 1.15s cubic-bezier(.19,1,.22,1),aspect-ratio 1.15s cubic-bezier(.19,1,.22,1) } .abcdt-service-leads-generation .ap__poster, .abcdt-service-leads-generation .ap__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:var(--po,50% 50%); transform:scale(var(--sc,1.02)); filter:grayscale(1) contrast(var(--ct,1)) brightness(var(--br,.86)); transition:object-position 1.25s cubic-bezier(.19,1,.22,1),transform 1.25s cubic-bezier(.19,1,.22,1),filter 1.1s var(--e) } .abcdt-service-leads-generation .ap__v{ opacity:0;transition:opacity 1.2s var(--e),object-position 1.1s var(--e),transform 1.1s var(--e),filter 1.1s var(--e) } .abcdt-service-leads-generation .ap__v.is-lit{ opacity:1 } .abcdt-service-leads-generation .ap__grade{ position:absolute;inset:0; /* Appui local sous la typographie : un assombrissement doux, centré là où le numéro se pose. Aucune ombre portée, aucun halo — c'est le plan qui recule, pas le chiffre qui brille. */ background: radial-gradient(92% 150% at var(--gx,16%) 50%, rgba(6,6,10,.9), rgba(6,6,10,.62) 34%, rgba(6,6,10,.18) 64%, transparent 84%), linear-gradient(102deg, rgba(6,6,10,.3) 0%, rgba(6,6,10,.04) 46%, transparent 76%); transition:background 1.15s cubic-bezier(.19,1,.22,1) } /* ── Les quatre textes, superposés eux aussi ─────────────────── Tous restent dans l'arbre d'accessibilité : seule l'opacité change, jamais visibility ni display. Un lecteur d'écran lit les quatre étapes dans l'ordre, comme une liste ordonnée normale. */ .abcdt-service-leads-generation .ap__l{ list-style:none;margin:0;padding:0;position:relative } .abcdt-service-leads-generation .ap__i{ opacity:1 } .abcdt-service-leads-generation .ap__lb{ margin:0 0 .55rem;font-family:var(--ff-b);font-weight:500; font-size:clamp(.66rem,1.5vw,.78rem);letter-spacing:.3em;text-transform:uppercase; color:rgba(255,255,255,.82) } .abcdt-service-leads-generation .ap__t{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.2rem,3.2vw,1.9rem);line-height:1.12;color:var(--text);max-width:22ch } .abcdt-service-leads-generation .ap__p{ margin:.9rem 0 0;max-width:56ch;color:var(--text-2);font-size:.98rem;line-height:1.64 } .abcdt-service-leads-generation .ap__k{ display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 0 } .abcdt-service-leads-generation .ap__k i{ font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--text-3);padding:.32rem .6rem;border:1px solid var(--line);border-radius:2px } /* ── Mobile ──────────────────────────────────────────────────── Pas de scène épinglée pénible : le cadre devient une bande collante sous l'en-tête, et les quatre temps défilent dessous. C'est toujours une seule scène — le cadre change d'état au passage de chaque temps — mais la lecture reste linéaire et confortable. */ @media(max-width:899px){ .abcdt-service-leads-generation .ap__frame{ position:sticky;top:calc(var(--nav-h) + .5rem);width:100%;aspect-ratio:16/9 } .abcdt-service-leads-generation .ap__nums{ position:sticky;top:calc(var(--nav-h) + .5rem);height:0;overflow:visible } .abcdt-service-leads-generation .ap__nums span{ font-size:clamp(4.5rem,26vw,9rem);top:.06em;transform:translate3d(0,0,0) scale(.96) } .abcdt-service-leads-generation .ap__nums span.is-on{ transform:translate3d(0,0,0) scale(1) } .abcdt-service-leads-generation .ap__l{ margin-top:clamp(2rem,6vh,3rem) } .abcdt-service-leads-generation .ap__i + .ap__i{ margin-top:clamp(2.5rem,7vh,4rem);padding-top:clamp(2.5rem,7vh,4rem);border-top:1px solid var(--line) } } @media(min-width:900px){ .abcdt-service-leads-generation .ap__stage{ display:grid;grid-template-columns:minmax(0,1fr); row-gap:clamp(2.5rem,6vh,4rem);align-items:start } /* Les quatre textes occupent la même cellule : c'est bien une seule zone éditoriale, pas quatre blocs empilés. */ .abcdt-service-leads-generation .ap__l{ display:grid } .abcdt-service-leads-generation .ap__i{ grid-area:1/1;opacity:0;pointer-events:none; transform:translate3d(0,1.1rem,0); transition:opacity .7s var(--e),transform .8s var(--e) } .abcdt-service-leads-generation .ap__i.is-on{ opacity:1;pointer-events:auto;transform:none } .abcdt-service-leads-generation .ap__l{ padding-left:0;max-width:62ch } } @media(min-width:900px) and (min-height:620px){ .abcdt-service-leads-generation.abc-motion .ap__track{ height:200svh } .abcdt-service-leads-generation.abc-motion .ap__pin{ position:sticky;top:0;height:100svh;display:grid;align-items:center;padding:0 } /* .ap__stage porte .wrap, donc margin:0 auto. Dans une grille, une marge automatique fait rétrécir l'élément à son contenu : le plateau tombait à 730px au lieu de 1360. Même cause que le décalage du hero. */ .abcdt-service-leads-generation.abc-motion .ap__pin > .ap__stage{ width:100% } } /* ═══════════════════════════════════════════════════════════════ 06 · LA PREUVE — à l'échelle, sur la matière ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .pf{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(5rem,14vh,10rem) 0;background:var(--ink) } .abcdt-service-leads-generation .pf__media{ position:absolute;inset:0;z-index:0 } .abcdt-service-leads-generation .pf__poster, .abcdt-service-leads-generation .pf__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:22% 50%;filter:grayscale(1) contrast(1.25);transform:scale(1.12) } .abcdt-service-leads-generation .pf__v{ opacity:0;transition:opacity 1.4s var(--e) } .abcdt-service-leads-generation .pf__v.is-lit{ opacity:1 } .abcdt-service-leads-generation .pf__veil{ position:absolute;inset:0; background: linear-gradient(96deg, rgba(6,6,10,.96) 0%, rgba(6,6,10,.86) 34%, rgba(6,6,10,.3) 74%, rgba(6,6,10,.52) 100%), linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.15) 24%, rgba(6,6,10,.15) 72%, var(--ink) 100%) } .abcdt-service-leads-generation .pf .tex{ z-index:1 } .abcdt-service-leads-generation .pf__in{ position:relative;z-index:2 } .abcdt-service-leads-generation .pf__h{ margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.042em;line-height:.98; font-size:clamp(1.9rem,5.4vw,3.4rem);color:#fff;max-width:16ch;text-wrap:balance } .abcdt-service-leads-generation .pf__k{ margin:clamp(2.5rem,7vh,4rem) 0 0; display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,5vh,2.6rem) } .abcdt-service-leads-generation .pf__ki dt{ margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.84; font-size:clamp(3.6rem,13vw,8.5rem);color:#fff;font-variant-numeric:tabular-nums; white-space:nowrap;text-shadow:0 2px 40px rgba(6,6,10,.6) } .abcdt-service-leads-generation .pf__ki dd{ margin:.6rem 0 0;color:var(--text-2);font-size:1rem } .abcdt-service-leads-generation .pf__src{ display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:clamp(1.6rem,4vh,2.2rem) 0 0; font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-leads-generation .pf__src span:first-child{ color:var(--text);font-weight:500 } .abcdt-service-leads-generation .pf__src i{ width:16px;height:1px;background:var(--line-2);display:block;flex:none } .abcdt-service-leads-generation .pf__q{ margin:clamp(2.5rem,7vh,4rem) 0 0;padding:clamp(1.6rem,4vh,2.2rem) 0 0; border-top:1px solid var(--line);max-width:56ch } .abcdt-service-leads-generation .pf__q p{ margin:0;color:var(--text-2);font-size:1rem;line-height:1.64;font-style:italic } .abcdt-service-leads-generation .pf__q footer{ margin-top:1rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap } .abcdt-service-leads-generation .pf__q footer b{ font-weight:500;font-size:.9rem;color:var(--text);font-style:normal } .abcdt-service-leads-generation .pf__q footer span{ font-size:.78rem;letter-spacing:.06em;color:var(--text-3);font-style:normal } @media(min-width:768px){ .abcdt-service-leads-generation .pf__k{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem) } } /* ═══════════════════════════════════════════════════════════════ 07 · POUR QUI, ET CE QUE ÇA PRODUIT ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .qp__l{ list-style:none;margin:clamp(3rem,8vh,5rem) 0 0;padding:0 } .abcdt-service-leads-generation .qp__i{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4vh,2.2rem); padding:clamp(2rem,5vh,3rem) 0;border-top:1px solid var(--line) } .abcdt-service-leads-generation .qp__i:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-leads-generation .qp__t{ margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.032em; font-size:clamp(1.25rem,3.4vw,1.95rem);line-height:1.1;color:var(--text);max-width:22ch } .abcdt-service-leads-generation .qp__p{ margin:1rem 0 0;max-width:50ch;color:var(--text-2);font-size:.98rem;line-height:1.64 } .abcdt-service-leads-generation .qp__w{ margin:0 0 .7rem;font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em; font-size:clamp(1.9rem,5vw,2.8rem);line-height:.94; color:rgba(232,232,240,.1);-webkit-text-stroke:1px rgba(232,232,240,.34) } .abcdt-service-leads-generation .qp__r{ margin:0;max-width:46ch;color:var(--text-3);font-size:.95rem;line-height:1.62 } .abcdt-service-leads-generation .qp__r b{ display:block;margin-bottom:.4rem;font-family:var(--ff-d);font-weight:600; letter-spacing:-.02em;font-size:1.02rem;color:var(--text) } @media(min-width:900px){ .abcdt-service-leads-generation .qp__i{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(3rem,7vw,6rem);align-items:start } } /* ═══════════════════════════════════════════════════════════════ 08 · EXPERTISES CONNEXES — compact ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation .xp__in{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem) } .abcdt-service-leads-generation .xp__l{ list-style:none;margin:0;padding:0 } .abcdt-service-leads-generation .xp__l li{ border-top:1px solid var(--line) } .abcdt-service-leads-generation .xp__l li:last-child{ border-bottom:1px solid var(--line) } .abcdt-service-leads-generation .xp__l a{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline; gap:.3rem 1.2rem;padding:.9rem 0;text-decoration:none } .abcdt-service-leads-generation .xp__l a span{ font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em; font-size:clamp(1rem,2.4vw,1.15rem);color:var(--text);transition:color .25s var(--e) } .abcdt-service-leads-generation .xp__l a i{ grid-column:1/-1;font-style:normal;font-size:.84rem;color:var(--text-3); transition:color .25s var(--e) } .abcdt-service-leads-generation .xp__l a::after{ content:'→';grid-row:1;grid-column:2;color:var(--text-3); transition:transform .3s var(--e),color .25s var(--e) } .abcdt-service-leads-generation .xp__l a:hover span, .abcdt-service-leads-generation .xp__l a:focus-visible span{ color:var(--blue-lift) } .abcdt-service-leads-generation .xp__l a:hover i, .abcdt-service-leads-generation .xp__l a:focus-visible i{ color:var(--text-2) } .abcdt-service-leads-generation .xp__l a:hover::after, .abcdt-service-leads-generation .xp__l a:focus-visible::after{ transform:translateX(5px);color:var(--blue-lift) } @media(min-width:900px){ .abcdt-service-leads-generation .xp__in{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(3rem,7vw,6rem);align-items:start } .abcdt-service-leads-generation .xp__l a{ grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto } .abcdt-service-leads-generation .xp__l a i{ grid-column:2;grid-row:1 } .abcdt-service-leads-generation .xp__l a::after{ grid-column:3 } } /* ═══════════════════════════════════════════════════════════════ RÉVÉLATIONS COMMUNES — même convention que la page Acquisition. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.4rem,0) } .abcdt-service-leads-generation.abc-motion [data-rv].is-in{ opacity:1;transform:none; transition:opacity .85s var(--e),transform .95s var(--e) } .abcdt-service-leads-generation.abc-motion .qp__i{ opacity:0;transform:translate3d(0,2rem,0) } .abcdt-service-leads-generation.abc-motion .qp__i.is-in{ opacity:1;transform:none; transition:opacity .9s var(--e),transform 1s var(--e) } /* La phrase du grand moment tombe en trois temps. */ .abcdt-service-leads-generation.abc-motion .vp__h span{ opacity:0;transform:translate3d(0,.5em,0) } .abcdt-service-leads-generation.abc-motion .vp__pin.is-in .vp__h span{ opacity:1;transform:none;transition:opacity .8s var(--e),transform .9s var(--e) } .abcdt-service-leads-generation.abc-motion .vp__pin.is-in .vp__h span:nth-child(2){ transition-delay:.14s } .abcdt-service-leads-generation.abc-motion .vp__pin.is-in .vp__h span:nth-child(3){ transition-delay:.28s } /* ═══════════════════════════════════════════════════════════════ MOUVEMENT RÉDUIT / SANS JAVASCRIPT Aucune vidéo n'est chargée, les posters suffisent. Aucune scène ne s'épingle, aucun cadre ne s'ouvre : les fenêtres sont d'emblée à leur taille finale, les deux matières déjà alignées, les six leviers dépliés. Rien n'attend le défilement pour être lisible. ═══════════════════════════════════════════════════════════════ */ .abcdt-service-leads-generation:not(.abc-motion) .hh__win{ clip-path:none } /* Sans script : les quatre bandes sont ouvertes et les quatre étapes à pleine lisibilité. Aucune n'attend d'être « active ». */ /* Sans script : les quatre temps sont tous lisibles, empilés. Les grands chiffres, eux, disparaissent — superposés au même endroit et sans état actif, ils ne seraient qu'un amas. Ils sont décoratifs (aria-hidden) : rien n'est perdu. */ .abcdt-service-leads-generation:not(.abc-motion) .ap__nums{ display:none } .abcdt-service-leads-generation:not(.abc-motion) .ap__i{ opacity:1;transform:none;pointer-events:auto } .abcdt-service-leads-generation:not(.abc-motion) .ap__l{ display:block } .abcdt-service-leads-generation:not(.abc-motion) .ap__i + .ap__i{ margin-top:2.5rem } @media (prefers-reduced-motion: reduce){ .abcdt-service-leads-generation .hh__v, .abcdt-service-leads-generation .vp__v, .abcdt-service-leads-generation .dp__v, .abcdt-service-leads-generation .pf__v, .abcdt-service-leads-generation .cw__v{ display:none } .abcdt-service-leads-generation .hh__win{ clip-path:none;transition:none } .abcdt-service-leads-generation .vp__frame{ --vo:1 } .abcdt-service-leads-generation .cw__p--a, .abcdt-service-leads-generation .cw__p--b{ transform:none;filter:none } .abcdt-service-leads-generation .dp__poster, .abcdt-service-leads-generation .dp__v{ transition:none } .abcdt-service-leads-generation .ap__frame, .abcdt-service-leads-generation .ap__poster, .abcdt-service-leads-generation .ap__v, .abcdt-service-leads-generation .ap__nums span, .abcdt-service-leads-generation .ap__i, .abcdt-service-leads-generation .ap__grade{ transition:none } .abcdt-service-leads-generation .ap__nums{ display:none } .abcdt-service-leads-generation .ap__v{ display:none } .abcdt-service-leads-generation .cw__edge{ display:none } .abcdt-service-leads-generation .xp__l a, .abcdt-service-leads-generation .xp__l a i, .abcdt-service-leads-generation .xp__l a::after, .abcdt-service-leads-generation .dp__d, .abcdt-service-leads-generation .dp__n, .abcdt-service-leads-generation .dp__t{ transition:none } } .abcdt-service-leads-generation .end{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(6rem,17vh,12rem) 0 clamp(5rem,13vh,8rem); background:var(--ink) } .abcdt-service-leads-generation .end__media{ position:absolute;inset:0;z-index:0 } .abcdt-service-leads-generation .end__v{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover; /* Recadré sur le tiers droit du plan : celui qui est presque noir. Le même rush, une surface complètement différente. */ object-position:88% 50%; filter:grayscale(1) contrast(1.2); opacity:.6;transition:opacity 1.4s var(--e); transform:scale(1.14) } .abcdt-service-leads-generation .end__veil{ position:absolute;inset:0; background: linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.5) 28%, rgba(6,6,10,.68) 72%, var(--ink) 100%), radial-gradient(70% 60% at 18% 42%, rgba(26,111,255,.09), transparent 72%) } .abcdt-service-leads-generation .end .tex{ z-index:1 } .abcdt-service-leads-generation .end__in{ position:relative;z-index:2 } .abcdt-service-leads-generation .end__h{ margin:0 0 0 -.045em; font-family:var(--ff-d);font-weight:800;letter-spacing:-.046em; /* Deux lignes fixes, coupées après « Posons les ». La ligne large est « fondations. » : le plancher tient dans la gouttière à 320px. */ font-size:clamp(2rem,8.6vw,7rem);line-height:.9;color:var(--text) } .abcdt-service-leads-generation .end__grid{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,7vh,4rem);margin-top:clamp(2.5rem,7vh,4rem) } .abcdt-service-leads-generation .end__p{ margin:0 0 1.2rem;max-width:52ch;color:var(--text-2); font-size:1rem;line-height:1.62 } .abcdt-service-leads-generation .end__p:last-child{ margin-bottom:0 } .abcdt-service-leads-generation .end__re{ display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; margin:0 0 clamp(1.4rem,3.5vh,2rem); font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3) } .abcdt-service-leads-generation .end__re i{ width:16px;height:1px;background:var(--line-2);display:block;flex:none } /* Aimantation légère du CTA — écrite par le script, plafonnée à 6px. */ .abcdt-service-leads-generation .end__cta{ transform:translate3d(var(--mx,0px),var(--my,0px),0); transition:transform .35s var(--e),color .25s var(--e),border-color .25s var(--e) } @media(min-width:900px){ .abcdt-service-leads-generation .end__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(3rem,7vw,6.5rem);align-items:start } /* La colonne est divisée par deux : le titre est recalibré sur cette demi-largeur, pas sur la largeur de page. */ .abcdt-service-leads-generation .end__h{ font-size:clamp(2.4rem,4.4vw,4rem) } .abcdt-service-leads-generation .end__act{ padding-top:.4rem } } @media (prefers-reduced-motion: reduce){ .abcdt-service-leads-generation .end__v, .abcdt-service-leads-generation .end__cta{ transition:none } .abcdt-service-leads-generation .end__v{ opacity:0 } } /* ── Curseur personnalisé — VOLONTAIREMENT HORS DU SCOPE ────────── Le canvas est posé sur , pas dans le wrapper : ces deux règles doivent donc rester globales, exactement comme sur la page d'accueil. Elles ne s'appliquent que si le script a réellement démarré le canvas — la classe .has-tube n'est posée qu'au premier mouvement de souris, jamais au chargement. ──────────────────────────────────────────────────────────── */ .abc-cursor{ position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1);contain:strict } .abc-cursor.is-on{opacity:1} body.has-tube, body.has-tube a,body.has-tube button,body.has-tube summary, body.has-tube input,body.has-tube textarea,body.has-tube select, body.has-tube label,body.has-tube [role="button"]{cursor:none} body.has-tube .abcdt-service-leads-generation, body.has-tube .abcdt-service-leads-generation a, body.has-tube .abcdt-service-leads-generation button, body.has-tube .abcdt-service-leads-generation summary, body.has-tube .abcdt-service-leads-generation input, body.has-tube .abcdt-service-leads-generation textarea, body.has-tube .abcdt-service-leads-generation select, body.has-tube .abcdt-service-leads-generation label, body.has-tube .abcdt-service-leads-generation [role="button"]{cursor:none}