/* ═══════════════════════════════════════════════════════════════════════
   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-acquisition-ecommerce. 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-acquisition-ecommerce{
  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-acquisition-ecommerce *,
.abcdt-service-acquisition-ecommerce *::before,
.abcdt-service-acquisition-ecommerce *::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-acquisition-ecommerce h1,.abcdt-service-acquisition-ecommerce h2,.abcdt-service-acquisition-ecommerce h3,.abcdt-service-acquisition-ecommerce h4,.abcdt-service-acquisition-ecommerce h5,.abcdt-service-acquisition-ecommerce h6,
.abcdt-service-acquisition-ecommerce p,.abcdt-service-acquisition-ecommerce ul,.abcdt-service-acquisition-ecommerce ol,.abcdt-service-acquisition-ecommerce dl,.abcdt-service-acquisition-ecommerce figure,.abcdt-service-acquisition-ecommerce blockquote{
  color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none
}
.abcdt-service-acquisition-ecommerce img,.abcdt-service-acquisition-ecommerce video,.abcdt-service-acquisition-ecommerce canvas{ display:block;max-width:100% }
.abcdt-service-acquisition-ecommerce a{ color:inherit }
.abcdt-service-acquisition-ecommerce button,.abcdt-service-acquisition-ecommerce input,.abcdt-service-acquisition-ecommerce select,.abcdt-service-acquisition-ecommerce textarea{
  font-family:inherit;font-size:inherit;font-weight:inherit;
  font-style:inherit;line-height:normal;color:inherit;letter-spacing:inherit
}
.abcdt-service-acquisition-ecommerce ::selection{ background:var(--blue);color:var(--on-blue) }
.abcdt-service-acquisition-ecommerce :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-acquisition-ecommerce{
  --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-acquisition-ecommerce{ --gut:2.5rem } }
@media(min-width:1200px){ .abcdt-service-acquisition-ecommerce{ --gut:4rem } }

.abcdt-service-acquisition-ecommerce *, .abcdt-service-acquisition-ecommerce *::before, .abcdt-service-acquisition-ecommerce *::after{box-sizing:border-box}

@media(prefers-reduced-motion:reduce){}



.abcdt-service-acquisition-ecommerce a{color:inherit}



.abcdt-service-acquisition-ecommerce .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .skip:focus-visible{transform:translateY(0)}

/* ── Typographie commune ───────────────────────────────────────── */
.abcdt-service-acquisition-ecommerce .eyebrow{
  margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch}
.abcdt-service-acquisition-ecommerce .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800}
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .tlink::after{content:'→';transition:transform .3s var(--e)}
.abcdt-service-acquisition-ecommerce .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)}
.abcdt-service-acquisition-ecommerce .tlink:hover::after{transform:translateX(5px)}
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .tlink--min{
  border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em
}
.abcdt-service-acquisition-ecommerce .tlink--min::after{font-size:.9em}
.abcdt-service-acquisition-ecommerce .tlink--min:hover{color:var(--text)}


.abcdt-service-acquisition-ecommerce .sec{position:relative;padding:clamp(5rem,13vh,9.5rem) 0}

.abcdt-service-acquisition-ecommerce .sec--quiet{padding:clamp(4rem,10vh,7rem) 0}

.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .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 <body> à ce moment-là, jamais au chargement). */


/* ═══════════════════════════════════════════════════════════════════════
   ABC DIGITAL TOUCH — Page service « Acquisition e-commerce »

   Même socle que les deux autres pages service : core.css pour les
   tokens, patterns.css pour les primitives, contact.css pour la
   conversion. Ce fichier ne contient que ce qui appartient à cette page.

   TERRITOIRE — Acquisition raconte la direction, Lead Generation la
   sélection. Ici c'est L'ALIGNEMENT. Des cadres entrent désaxés,
   se disputent l'attention, puis se recalent. Entre voir et acheter,
   tout est affaire d'alignement — c'est la friction, et c'est la
   conversion.

   La matière est neuve : une forme sculptée sur champ studio lumineux,
   tonalement l'inverse de l'encre des deux autres pages. Ces fenêtres
   claires posées sur le noir donnent à la page son caractère plus
   tactile et plus commercial.

   LE BLEU — nulle part ailleurs que dans les liens.
   ═══════════════════════════════════════════════════════════════════════ */

.abcdt-service-acquisition-ecommerce .svc{ position:relative }

/* ═══════════════════════════════════════════════════════════════
   01 · HERO — LA HIÉRARCHIE DU DÉSIR

   --al : 0 = les trois cadres sont désaxés, 1 = ils partagent un axe
   et le cadre dominant a pris le dessus. L'état par défaut du CSS est
   1 : sans script, la composition est déjà résolue.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .eh{ position:relative;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .eh__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-acquisition-ecommerce .eh__set{ position:absolute;inset:0;z-index:0 }
.abcdt-service-acquisition-ecommerce .eh__f{
  position:absolute;margin:0;overflow:hidden;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(232,232,240,.14);
  transition:transform 1.4s cubic-bezier(.19,1,.22,1),
             opacity 1.2s var(--e),width 1.4s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .eh__f img, .abcdt-service-acquisition-ecommerce .eh__f video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06)
}
.abcdt-service-acquisition-ecommerce .eh__f video{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-acquisition-ecommerce .eh__f video.is-lit{ opacity:1 }

/* Le cadre dominant : celui qui gagne la hiérarchie. */
.abcdt-service-acquisition-ecommerce .eh__f--a{
  right:0;top:10%;width:min(46vw,560px);aspect-ratio:5/4;
  transform:translate3d(calc(9vw * (1 - var(--al,1))), calc(-6vh * (1 - var(--al,1))), 0)
}
/* Les deux autres restent présents — rien n'est éliminé — mais reculent. */
.abcdt-service-acquisition-ecommerce .eh__f--b{
  right:min(24vw,280px);top:30%;width:min(24vw,280px);aspect-ratio:3/4;
  opacity:calc(.34 + .3 * var(--al,1));
  transform:translate3d(calc(-11vw * (1 - var(--al,1))), calc(8vh * (1 - var(--al,1))), 0)
}
.abcdt-service-acquisition-ecommerce .eh__f--c{
  right:min(4vw,50px);bottom:5%;width:min(18vw,210px);aspect-ratio:4/3;
  opacity:calc(.22 + .26 * var(--al,1));
  transform:translate3d(calc(6vw * (1 - var(--al,1))), calc(10vh * (1 - var(--al,1))), 0)
}
.abcdt-service-acquisition-ecommerce .eh__veil{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(92deg, var(--ink) 0%, rgba(6,6,10,.93) 32%, rgba(6,6,10,.66) 58%, rgba(6,6,10,.2) 82%, rgba(6,6,10,.12) 100%),
    linear-gradient(to bottom, rgba(6,6,10,.5) 0%, transparent 26%, rgba(6,6,10,.5) 78%, var(--ink) 100%)
}
.abcdt-service-acquisition-ecommerce .eh .tex{ z-index:3 }

.abcdt-service-acquisition-ecommerce .eh__copy{ position:relative;z-index:4;width:100% }
.abcdt-service-acquisition-ecommerce .eh__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-acquisition-ecommerce .eh__k i{ width:clamp(28px,6vw,64px);height:1px;background:var(--line-2);flex:none }
.abcdt-service-acquisition-ecommerce .eh__h{
  margin:0 0 0 -.05em;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(1.9rem,8.4vw,5.6rem);color:#fff
}
/* « e-commerce » ne doit jamais se couper sur son trait d'union : la
   marque du service se lit d'un bloc. */
.abcdt-service-acquisition-ecommerce .eh__h em, .abcdt-service-acquisition-ecommerce .eh__h{ }
.abcdt-service-acquisition-ecommerce .eh__nb{ white-space:nowrap }
.abcdt-service-acquisition-ecommerce .eh__l{
  margin:clamp(1.6rem,4.5vh,2.6rem) 0 0;max-width:44ch;
  color:var(--text-2);font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.62
}
.abcdt-service-acquisition-ecommerce .eh__l em{ font-style:normal;color:var(--text) }
.abcdt-service-acquisition-ecommerce .eh__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-acquisition-ecommerce .eh__r{
  position:relative;z-index:2;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem);
  padding-top:clamp(2rem,5vh,3rem);padding-bottom:clamp(3rem,8vh,5rem);
  border-top:1px solid var(--line)
}
.abcdt-service-acquisition-ecommerce .eh__ri b{
  display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.05;color:var(--text)
}
.abcdt-service-acquisition-ecommerce .eh__ri b i{ font-style:normal;color:var(--text-3);font-weight:400 }
.abcdt-service-acquisition-ecommerce .eh__ri span{
  display:block;margin:.5rem 0 .7rem;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition-ecommerce .eh__ri p{ margin:0;max-width:32ch;color:var(--text-2);font-size:.92rem;line-height:1.6 }

@media(min-width:768px){
  .abcdt-service-acquisition-ecommerce .eh__r{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem) }
}
@media(min-width:1100px){
  .abcdt-service-acquisition-ecommerce .eh__r{ grid-template-columns:repeat(4,minmax(0,1fr));gap:0 }
  .abcdt-service-acquisition-ecommerce .eh__ri + .eh__ri{ padding-left:clamp(1.5rem,3vw,2.6rem);border-left:1px solid var(--line) }
}
@media(max-width:767px){
  .abcdt-service-acquisition-ecommerce .eh__f--a{ width:64vw;top:16%;aspect-ratio:4/5 }
  .abcdt-service-acquisition-ecommerce .eh__f--b{ right:52vw;top:40%;width:34vw }
  .abcdt-service-acquisition-ecommerce .eh__f--c{ display:none }
  .abcdt-service-acquisition-ecommerce .eh__veil{
    background:linear-gradient(to bottom, rgba(6,6,10,.62) 0%, rgba(6,6,10,.4) 26%, rgba(6,6,10,.9) 72%, var(--ink) 100%)
  }
}

/* ═══════════════════════════════════════════════════════════════
   02 · CONVICTION — DÉPENSER MIEUX
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .ec{ position:relative;padding:clamp(5rem,14vh,10rem) 0 0;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .ec__h{
  margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(1.75rem,5.4vw,3.6rem);color:var(--text-3);max-width:20ch;text-wrap:balance
}
/* La seconde moitié de la phrase porte l'affirmation : elle seule est
   à pleine lumière. */
.abcdt-service-acquisition-ecommerce .ec__h em{ font-style:normal;color:#fff }

/* La bande de matière coupe la page d'un bord à l'autre : une arête
   dure, pas une vignette. */
.abcdt-service-acquisition-ecommerce .ec__band{
  position:relative;margin:clamp(3rem,9vh,6rem) 0 0;height:clamp(180px,34vh,340px);overflow:hidden
}
.abcdt-service-acquisition-ecommerce .ec__poster, .abcdt-service-acquisition-ecommerce .ec__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;filter:grayscale(1) contrast(1.15);
  transform:scale(1.04) translate3d(0,var(--ecp,0px),0)
}
.abcdt-service-acquisition-ecommerce .ec__v{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-acquisition-ecommerce .ec__v.is-lit{ opacity:1 }
.abcdt-service-acquisition-ecommerce .ec__band::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%)
}
.abcdt-service-acquisition-ecommerce .ec__after{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,4vh,2rem);
  padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(4rem,11vh,7rem)
}
/* Le poster porte désormais sa propre classe (.ec__poster) : plus besoin
   de neutraliser ici un position:absolute hérité par collision de nom. */
.abcdt-service-acquisition-ecommerce .ec__p{ margin:0;max-width:52ch;color:var(--text-2);font-size:1rem;line-height:1.62 }
@media(min-width:900px){
  .abcdt-service-acquisition-ecommerce .ec__after{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(3rem,7vw,6rem) }
}

/* ═══════════════════════════════════════════════════════════════
   03 · LA FRICTION — les cadres s'alignent

   --fa : 0 = quatre cadres désaxés, à des échelles et des hauteurs
   différentes ; 1 = un seul bandeau continu. Une variable, un geste.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .fr{ position:relative;background:var(--ink-2) }
.abcdt-service-acquisition-ecommerce .fr__pin{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:grid;place-items:center
}
.abcdt-service-acquisition-ecommerce .fr__pin > *{ grid-area:1/1;min-width:0 }
.abcdt-service-acquisition-ecommerce .fr__set{
  position:relative;z-index:0;width:100%;height:min(58svh,540px);
  display:flex;align-items:center;justify-content:center;
  gap:calc(8px + 34px * (1 - var(--fa,1)))
}
/* Le désordre est piloté par des transformations, pas par des hauteurs
   en pourcentage : une translation verticale, un écrasement, une
   échelle. Trois propriétés compositées, aucun recalcul de mise en page.
   --dy et --sq donnent à chaque cadre son propre décalage. */
.abcdt-service-acquisition-ecommerce .fr__f{
  position:relative;margin:0;overflow:hidden;flex:1 1 0;height:100%;
  transform:translate3d(0, calc((1 - var(--fa,1)) * var(--dy,0) * 1px), 0)
            scaleY(calc(1 - (1 - var(--fa,1)) * var(--sq,0)))
            scaleX(calc(1 - (1 - var(--fa,1)) * .04));
  box-shadow:inset 0 0 0 1px rgba(232,232,240,.14);
  transition:transform 1.3s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .fr__f:nth-child(1){ --dy:-58; --sq:.34 }
.abcdt-service-acquisition-ecommerce .fr__f:nth-child(2){ --dy: 42; --sq:.16 }
.abcdt-service-acquisition-ecommerce .fr__f:nth-child(3){ --dy:-30; --sq:.44 }
.abcdt-service-acquisition-ecommerce .fr__f:nth-child(4){ --dy: 66; --sq:.26 }
.abcdt-service-acquisition-ecommerce .fr__f img, .abcdt-service-acquisition-ecommerce .fr__f video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(calc(.78 + .22 * var(--fa,1)))
}
.abcdt-service-acquisition-ecommerce .fr__f video{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-acquisition-ecommerce .fr__f video.is-lit{ opacity:1 }
.abcdt-service-acquisition-ecommerce .fr .tex{ z-index:2 }
/* Les cadres sont clairs : le texte blanc a besoin d'un appui. Un
   assombrissement doux depuis la gauche, posé au-dessus de la matière et
   sous la typographie. Aucune ombre portée. */
.abcdt-service-acquisition-ecommerce .fr__pin::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(6,6,10,.86) 0%, rgba(6,6,10,.6) 42%, rgba(6,6,10,.24) 72%, rgba(6,6,10,.34) 100%),
    linear-gradient(to bottom, var(--ink-2) 0%, transparent 18%, transparent 82%, var(--ink-2) 100%)
}
.abcdt-service-acquisition-ecommerce .fr__copy{ position:relative;z-index:3;width:100% }
.abcdt-service-acquisition-ecommerce .fr__h{
  margin:.9rem 0 0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.048em;line-height:.94;
  font-size:clamp(1.6rem,7.6vw,4.6rem);color:#fff;
  text-shadow:0 2px 46px rgba(6,6,10,.8)
}
.abcdt-service-acquisition-ecommerce .fr__h span{ display:block }
.abcdt-service-acquisition-ecommerce .fr__after{ padding-top:clamp(3rem,8vh,4.5rem);padding-bottom:clamp(4rem,11vh,7rem) }
.abcdt-service-acquisition-ecommerce .fr__p{ margin:0;max-width:56ch;color:var(--text-2);font-size:1rem;line-height:1.62 }
@media(min-width:900px){
  .abcdt-service-acquisition-ecommerce .fr__h{ max-width:15ch }
}
@media(min-height:620px){
  .abcdt-service-acquisition-ecommerce.abc-motion .fr__track{ height:190svh }
  .abcdt-service-acquisition-ecommerce.abc-motion .fr__pin{ position:sticky;top:0;height:100svh;min-height:0 }
}

/* ═══════════════════════════════════════════════════════════════
   04 · LE FUNNEL — une seule trajectoire

   --tf : 0 = tout est flou, 1 = la mise au point a traversé la bande
   de gauche à droite. Deux copies du même plan, un masque qui avance.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .tj{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0 0;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .tj__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-acquisition-ecommerce .tj__band{
  position:relative;margin:0;overflow:hidden;
  height:clamp(220px,42vh,440px)
}
.abcdt-service-acquisition-ecommerce .tj__blur, .abcdt-service-acquisition-ecommerce .tj__sharp{ position:absolute;inset:0 }
.abcdt-service-acquisition-ecommerce .tj__blur{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:grayscale(1) blur(11px) brightness(.62) contrast(.9);transform:scale(1.1)
}
/* Le masque avance de gauche à droite : l'attention devient intention,
   puis achat. La mise au point EST la narration. */
.abcdt-service-acquisition-ecommerce .tj__sharp{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--tf,1) * 100%),transparent calc(var(--tf,1) * 100% + 14vw));
  mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--tf,1) * 100%),transparent calc(var(--tf,1) * 100% + 14vw))
}
.abcdt-service-acquisition-ecommerce .tj__sharp img, .abcdt-service-acquisition-ecommerce .tj__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  /* brightness identique à .tj__blur : seule la netteté traverse la bande. */
  filter:grayscale(1) brightness(.62) contrast(1.06)
}
.abcdt-service-acquisition-ecommerce .tj__v{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-acquisition-ecommerce .tj__v.is-lit{ opacity:1 }
.abcdt-service-acquisition-ecommerce .tj__grade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, var(--ink) 0%, transparent 24%, transparent 74%, var(--ink) 100%)
}
.abcdt-service-acquisition-ecommerce .tj__l{
  list-style:none;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vh,3rem);
  padding-top:clamp(2.5rem,7vh,4rem);padding-bottom:clamp(4rem,11vh,7rem);margin:0
}
.abcdt-service-acquisition-ecommerce .tj__t{
  margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2.8vw,1.6rem);line-height:1.14;color:var(--text);max-width:20ch
}
.abcdt-service-acquisition-ecommerce .tj__p{ margin:.9rem 0 0;max-width:42ch;color:var(--text-2);font-size:.96rem;line-height:1.64 }
/* Les canaux ne sont pas des étiquettes à cocher : ils se lisent comme une
   énumération. Pas de boîte, pas de filet — l'écart fait la séparation, et
   il ne laisse aucun signe orphelin en début de ligne au retour à la ligne. */
.abcdt-service-acquisition-ecommerce .tj__k{ display:flex;flex-wrap:wrap;row-gap:.5rem;column-gap:1.9rem;margin:1.3rem 0 0 }
.abcdt-service-acquisition-ecommerce .tj__k i{
  font-style:normal;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap
}
@media(min-width:900px){
  /* Les trois textes s'alignent sous les trois zones de la bande. */
  .abcdt-service-acquisition-ecommerce .tj__l{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem) }
  .abcdt-service-acquisition-ecommerce .tj__i + .tj__i{ padding-left:clamp(1.6rem,3vw,2.6rem);border-left:1px solid var(--line) }
}

/* ═══════════════════════════════════════════════════════════════
   05 · LES LEVIERS — quatre cadrages, une seule matière

   Le principe ne change pas : typographie monumentale, un média
   unique, un état actif. Ce qui change, c'est que la fenêtre média
   n'est plus la simple bande de la ligne active.

   Elle a maintenant quatre bords pilotés (--ml/--mr en largeur,
   --ovt/--ovb en débord vertical), une échelle de plan propre à
   chaque levier (--sc) et un recadrage (--po). Le média déborde
   donc de sa ligne et traverse les lettres des leviers voisins.

   Et surtout : le mot actif passe DEVANT le média, les mots au
   repos restent DERRIÈRE. C'est ce qui fait la recomposition —
   la matière circule entre les plans typographiques.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .md{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .md__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-acquisition-ecommerce .md__stage{ position:relative;isolation:isolate }

/* z-index 2 : au-dessus des mots au repos (auto), sous le mot actif (3). */
.abcdt-service-acquisition-ecommerce .md__media{
  position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  clip-path:inset(
    calc(var(--mt,0px) - var(--ovt,0px))
    var(--mr,0%)
    calc(100% - var(--mb,0px) - var(--ovb,0px))
    var(--ml,0%));
  transition:clip-path 1s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .md__p, .abcdt-service-acquisition-ecommerce .md__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--po,50% 50%);filter:grayscale(1) contrast(1.34) brightness(.5);
  transform:scale(var(--sc,1.06));
  transition:object-position 1.1s cubic-bezier(.19,1,.22,1),
             transform 1.1s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .md__v{
  opacity:0;
  transition:opacity 1.2s var(--e),object-position 1.1s cubic-bezier(.19,1,.22,1),
             transform 1.1s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .md__v.is-lit{ opacity:1 }

.abcdt-service-acquisition-ecommerce .md__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(9,9,12,.72) 0%, rgba(9,9,12,.3) 46%, rgba(9,9,12,.6) 100%)
}
.abcdt-service-acquisition-ecommerce .md__l{ position:relative;list-style:none;margin:0;padding:0 }
/* Pas de z-index ici : .md__l ne doit pas créer de contexte
   d'empilement, sinon le mot actif ne pourrait pas passer devant
   le média qui est son oncle et non son frère. */
.abcdt-service-acquisition-ecommerce .md__i{
  position:relative;border-top:1px solid var(--line);
  transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .7s var(--e)
}
.abcdt-service-acquisition-ecommerce .md__i:last-child{ border-bottom:1px solid var(--line) }
/* Le levier qu'on quitte recule : il s'efface et se retire vers la
   gauche pendant que la matière se recompose sur le nouveau. */
.abcdt-service-acquisition-ecommerce.abc-motion .md__i{ transform:translate3d(-.5rem,0,0);opacity:.62 }
.abcdt-service-acquisition-ecommerce.abc-motion .md__i.is-on{ transform:none;opacity:1;z-index:3 }

.abcdt-service-acquisition-ecommerce .md__b{
  display:block;width:100%;padding:clamp(1rem,2.8vh,1.7rem) var(--gut);
  background:none;border:0;cursor:pointer;text-align:left
}
.abcdt-service-acquisition-ecommerce .md__b span{
  display:block;max-width:var(--maxw);margin:0 auto;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.04em;line-height:1;
  /* Échelle propre à chaque levier : ils ne pèsent pas le même poids. */
  font-size:calc(clamp(1.5rem,5.6vw,3.6rem) * var(--fsc,1));
  /* Chaque nom entre sur sa propre verticale : le bord gauche n'est
     plus une colonne rigide, c'est une composition. */
  transform:translate3d(var(--tx,0),0,0);
  color:rgba(232,232,240,.1);
  -webkit-text-stroke:1.2px rgba(232,232,240,.42);
  transition:color .7s var(--e),-webkit-text-stroke-color .7s var(--e)
}
.abcdt-service-acquisition-ecommerce .md__i.is-on .md__b span{ color:#fff;-webkit-text-stroke:0 }

.abcdt-service-acquisition-ecommerce .md__d{ padding:0 var(--gut) clamp(1.2rem,3vh,1.8rem) }
.abcdt-service-acquisition-ecommerce .md__d p{
  max-width:56ch;margin:0 auto;color:var(--text-2);font-size:.98rem;line-height:1.64;
  padding-left:0
}

@media(min-width:900px){
  .abcdt-service-acquisition-ecommerce .md__d p{ max-width:var(--maxw);padding-left:var(--dx,38%) }
  /* Le dépli n'existe qu'au-dessus de 900 : c'est un index de studio,
     pas un accordéon, et il n'en devient jamais un sur mobile. */
  .abcdt-service-acquisition-ecommerce.abc-motion .md__d{
    display:grid;grid-template-rows:0fr;padding-bottom:0;opacity:0;
    transition:grid-template-rows .7s cubic-bezier(.19,1,.22,1),
               opacity .55s var(--e),padding-bottom .7s var(--e)
  }
  .abcdt-service-acquisition-ecommerce.abc-motion .md__d > p{ overflow:hidden;min-height:0 }
  .abcdt-service-acquisition-ecommerce.abc-motion .md__i.is-on .md__d{
    grid-template-rows:1fr;opacity:1;padding-bottom:clamp(1.2rem,3vh,1.8rem)
  }
}

/* Sous 900 : les quatre noms restent gros, chaque description reste
   lue, le média suit le levier le plus proche du centre à mesure
   qu'on fait défiler. Aucun dépli, aucun geste à deviner. */
@media(max-width:899px){
  .abcdt-service-acquisition-ecommerce .md__b{ cursor:default }
  .abcdt-service-acquisition-ecommerce .md__d p{ color:var(--text-3);font-size:.92rem }
  .abcdt-service-acquisition-ecommerce.abc-motion .md__i{ transform:none;opacity:1 }
  .abcdt-service-acquisition-ecommerce.abc-motion .md__i.is-on{ z-index:3 }
  /* À 24px un trait de 1,2px remplit la lettre : contour et plein
     deviennent indiscernables. On l'affine pour garder la hiérarchie. */
  .abcdt-service-acquisition-ecommerce .md__b span{ -webkit-text-stroke-width:.7px }
  .abcdt-service-acquisition-ecommerce .md__i .md__b span{ color:rgba(232,232,240,.06) }
  .abcdt-service-acquisition-ecommerce .md__i.is-on .md__b span{ color:#fff;-webkit-text-stroke-width:0 }
}

/* ═══════════════════════════════════════════════════════════════
   06 · LE PILOTAGE — la table de montage

   Aucun chiffre. Quatre fragments de décision à des échelles et des
   retraits différents ; l'actif passe devant, les autres reculent.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .pl{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .pl__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-acquisition-ecommerce .pl__stage{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vh,3rem) }
.abcdt-service-acquisition-ecommerce .pl__media{
  position:relative;overflow:hidden;aspect-ratio:16/10;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(232,232,240,.12)
}
.abcdt-service-acquisition-ecommerce .pl__poster, .abcdt-service-acquisition-ecommerce .pl__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--po,50% 50%);filter:grayscale(1) contrast(1.12);
  transform:scale(1.08);transition:object-position 1s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .pl__v{ opacity:0;transition:opacity 1.2s var(--e),object-position 1s cubic-bezier(.19,1,.22,1) }
.abcdt-service-acquisition-ecommerce .pl__v.is-lit{ opacity:1 }
.abcdt-service-acquisition-ecommerce .pl__grade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,10,.62) 0%, transparent 46%)
}
.abcdt-service-acquisition-ecommerce .pl__l{ list-style:none;margin:0;padding:0 }
/* Les fragments : retrait et échelle propres, l'actif vient devant. */
.abcdt-service-acquisition-ecommerce .pl__i{
  padding:clamp(1.1rem,3vh,1.7rem) 0;border-top:1px solid var(--line);
  transition:opacity .7s var(--e),transform .8s cubic-bezier(.19,1,.22,1)
}
.abcdt-service-acquisition-ecommerce .pl__i:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-acquisition-ecommerce .pl__t{
  margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.1rem,2.6vw,1.5rem);line-height:1.14;color:var(--text-3);max-width:22ch;
  transition:color .7s var(--e)
}
.abcdt-service-acquisition-ecommerce .pl__p{
  margin:.8rem 0 0;max-width:52ch;color:var(--text-3);font-size:.96rem;line-height:1.62;
  transition:color .7s var(--e)
}
.abcdt-service-acquisition-ecommerce .pl__k{ display:flex;flex-wrap:wrap;row-gap:.45rem;column-gap:1.8rem;margin:1.2rem 0 0 }
.abcdt-service-acquisition-ecommerce .pl__k i{
  font-style:normal;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap
}
.abcdt-service-acquisition-ecommerce .pl__i.is-on .pl__t{ color:#fff }
.abcdt-service-acquisition-ecommerce .pl__i.is-on .pl__p{ color:var(--text-2) }
.abcdt-service-acquisition-ecommerce .pl__i.is-on .pl__k i{ color:var(--text-2) }
@media(min-width:900px){
  .abcdt-service-acquisition-ecommerce .pl__stage{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(2.5rem,6vw,5rem);align-items:start }
  .abcdt-service-acquisition-ecommerce .pl__media{ position:sticky;top:calc(var(--nav-h) + 2rem);aspect-ratio:4/5 }
  /* Le retrait donne la profondeur : l'actif remonte au premier plan,
     les autres restent en retrait. C'est l'arbitrage, pas une liste. */
  .abcdt-service-acquisition-ecommerce .pl__i{ transform:translate3d(clamp(1rem,3vw,2.6rem),0,0) scale(.985);opacity:.72 }
  .abcdt-service-acquisition-ecommerce .pl__i.is-on{ transform:none;opacity:1 }
}

/* ═══════════════════════════════════════════════════════════════
   07 · LA PREUVE — ZAG SKI

   Le film de campagne dans son format natif vertical, ses couleurs de
   marque intactes. Les indicateurs sont composés en affiche : trois
   volumes à des poids différents, le ROI en point de résolution.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .zg{ position:relative;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .zg__pin{ position:relative;overflow:hidden;background:var(--ink-2);padding:clamp(4rem,11vh,7rem) 0 }
.abcdt-service-acquisition-ecommerce .zg__in{ position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem) }

.abcdt-service-acquisition-ecommerce .zg__h{
  margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.042em;line-height:1;
  font-size:clamp(1.6rem,4.6vw,2.9rem);color:#fff;text-wrap:balance
}
/* Le client d'abord, seul sur sa ligne ; la nature du dispositif
   ensuite. Empilé et non aligné : le descriptif est long et ne doit
   jamais se casser derrière un filet en suspens. */
.abcdt-service-acquisition-ecommerce .zg__client{
  display:block;margin:clamp(1.4rem,3.5vh,2rem) 0 0;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition-ecommerce .zg__client b{ display:block;color:#fff;font-weight:600;font-size:.76rem;letter-spacing:.24em }
.abcdt-service-acquisition-ecommerce .zg__client i{ display:block;width:26px;height:1px;background:var(--line-2);margin:.75rem 0 }
.abcdt-service-acquisition-ecommerce .zg__client span{ display:block;max-width:38ch;line-height:1.75;letter-spacing:.16em }

/* La campagne garde son format vertical natif — c'est un film Reels,
   pas une vignette recadrée — et ses couleurs de marque. */
.abcdt-service-acquisition-ecommerce .zg__media{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:9/16;width:min(72vw,320px);
  box-shadow:inset 0 0 0 1px rgba(232,232,240,.16)
}
.abcdt-service-acquisition-ecommerce .zg__poster, .abcdt-service-acquisition-ecommerce .zg__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.abcdt-service-acquisition-ecommerce .zg__v{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-acquisition-ecommerce .zg__v.is-lit{ opacity:1 }

.abcdt-service-acquisition-ecommerce .zg__k{ margin:0;display:grid;gap:clamp(1.4rem,4vh,2.2rem) }
.abcdt-service-acquisition-ecommerce .zg__ki dt{
  margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.84;
  color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap
}
.abcdt-service-acquisition-ecommerce .zg__ki em{ font-style:normal;font-size:.44em;letter-spacing:-.02em;margin-left:.06em }
/* Trois poids différents : le volume Meta domine, les deux autres
   suivent. Ce sont des masses, pas une rangée de cartes. */
.abcdt-service-acquisition-ecommerce .zg__ki--a dt{ font-size:clamp(3.4rem,12vw,7rem) }
.abcdt-service-acquisition-ecommerce .zg__ki--b dt{ font-size:clamp(2.4rem,8vw,4.6rem) }
.abcdt-service-acquisition-ecommerce .zg__ki--c dt{ font-size:clamp(2rem,6.4vw,3.6rem) }
.abcdt-service-acquisition-ecommerce .zg__ki dd{ margin:.5rem 0 0;color:var(--text-2);font-size:.92rem;letter-spacing:.01em }

/* Le ROI arrive en dernier : c'est le point de résolution. */
.abcdt-service-acquisition-ecommerce .zg__roi{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.4rem);margin:0;
  padding-top:clamp(1.4rem,4vh,2.2rem);border-top:1px solid var(--line-2)
}
.abcdt-service-acquisition-ecommerce .zg__roi i{
  font-style:normal;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition-ecommerce .zg__roi b{
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(3rem,11vw,6.4rem);color:#fff;font-variant-numeric:tabular-nums
}

/* Légende du film : il est un exemple de création, pas la source
   exclusive des chiffres. Discrète, jamais un badge. */
.abcdt-service-acquisition-ecommerce .zg__cap{
  position:absolute;left:0;bottom:0;right:0;z-index:2;
  padding:.7rem .8rem;margin:0;
  padding-top:2.4rem;
  background:linear-gradient(to top, rgba(9,9,12,.92) 0%, rgba(9,9,12,.72) 45%, transparent 100%);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#fff
}

/* ── Temps B ──────────────────────────────────────────────────────
   La respiration. Le fond quitte le gris relevé du cas client pour
   le noir plein : le spectacle se referme, l'agence parle ensuite.
   Aucun média, aucune masse chiffrée — c'est ce qui interdit de
   confondre les repères ABC avec les résultats ZAG. */
.abcdt-service-acquisition-ecommerce .zg__break{
  height:clamp(4rem,14vh,9rem);
  background:linear-gradient(to bottom, var(--ink-2), var(--ink))
}
.abcdt-service-acquisition-ecommerce .zg__trust{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4.5vh,2.4rem);
  padding-top:clamp(1rem,3vh,2rem);padding-bottom:clamp(4rem,11vh,7rem)
}
/* La phrase qui remet le cas à sa place, sans le diminuer. */
.abcdt-service-acquisition-ecommerce .zg__one{
  margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.15;color:var(--text);max-width:22ch
}
.abcdt-service-acquisition-ecommerce .zg__lead{ margin:0;max-width:52ch;color:var(--text-2);font-size:1rem;line-height:1.62 }

/* Les repères agence : une ligne courante, pas des volumes. Les
   nombres restent à hauteur de texte — impossible de les lire comme
   les 31M de ZAG, qui font sept fois leur taille. */
/* Flux normal, pas flex : en flex chaque nœud devient un item et les
   espaces entre « 200 » et « entreprises » disparaissent. */
.abcdt-service-acquisition-ecommerce .zg__ag{
  margin:0;padding-top:clamp(1.4rem,4vh,2rem);border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.2em;line-height:2.2;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition-ecommerce .zg__ag b{
  font-family:var(--ff-d);font-weight:700;font-size:1.5em;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;margin:0 .12em
}
.abcdt-service-acquisition-ecommerce .zg__ag i{
  display:inline-block;vertical-align:middle;width:1px;height:.9em;
  margin:0 clamp(1rem,3vw,2rem);background:var(--line-2)
}
/* Sous 700 les deux repères passent forcément à la ligne : le filet
   resterait suspendu en fin de ligne. Le retour à la ligne sépare. */
@media(max-width:699px){
  .abcdt-service-acquisition-ecommerce .zg__ag i{ display:block;width:0;height:0;margin:0 }
}

@media(min-width:900px){
  /* Entre 900 et 1180 le film prend déjà sa place mais il ne reste pas
     assez de largeur pour trois colonnes : les volumes passent sous le
     titre, dans toute la colonne de gauche, au lieu d'être étranglés. */
  .abcdt-service-acquisition-ecommerce .zg__in{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'side media' 'kpi media' 'roi media';
    column-gap:clamp(2.5rem,6vw,5rem);row-gap:clamp(2.5rem,7vh,4rem);align-items:start
  }
  .abcdt-service-acquisition-ecommerce .zg__side{ grid-area:side }
  .abcdt-service-acquisition-ecommerce .zg__media{ grid-area:media;width:min(26vw,300px) }
  .abcdt-service-acquisition-ecommerce .zg__k{ grid-area:kpi;align-content:start }
  .abcdt-service-acquisition-ecommerce .zg__roi{ grid-area:roi;align-self:end }
  /* Temps B en deux colonnes calmes : la phrase à gauche, l'argument
     à droite. La ligne de repères et le lien courent sous les deux. */
  .abcdt-service-acquisition-ecommerce .zg__trust{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(3rem,7vw,6rem);align-items:start }
  .abcdt-service-acquisition-ecommerce .zg__trust .zg__ag, .abcdt-service-acquisition-ecommerce .zg__trust .after-cta{ grid-column:1/-1;margin-top:0 }
}

@media(min-width:1180px){
  /* Composition d'affiche : le film au centre, les volumes en colonne
     asymétrique à droite, le ROI en bas comme signature. */
  .abcdt-service-acquisition-ecommerce .zg__in{
    grid-template-columns:minmax(0,1fr) auto minmax(0,.9fr);
    grid-template-areas:'side media kpi' 'roi media kpi'
  }
}

/* ═══════════════════════════════════════════════════════════════
   08 · SUR LA DURÉE — les couches s'accumulent

   --dl : 0 = trois couches fragmentées et décalées, 1 = elles se
   superposent en une seule image. Le dispositif apprend de chaque
   cycle ; chaque passage laisse sa trace.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .dr{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0;background:var(--ink) }
.abcdt-service-acquisition-ecommerce .dr__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-acquisition-ecommerce .dr__stage{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,7vh,4rem) }
.abcdt-service-acquisition-ecommerce .dr__stack{
  position:relative;aspect-ratio:5/4;
  isolation:isolate
}
.abcdt-service-acquisition-ecommerce .dr__f{
  position:absolute;margin:0;overflow:hidden;inset:0;
  box-shadow:inset 0 0 0 1px rgba(232,232,240,.12);
  transition:transform 1.3s cubic-bezier(.19,1,.22,1),opacity 1s var(--e)
}
.abcdt-service-acquisition-ecommerce .dr__f img, .abcdt-service-acquisition-ecommerce .dr__f video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1)
}
.abcdt-service-acquisition-ecommerce .dr__f video{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-acquisition-ecommerce .dr__f video.is-lit{ opacity:1 }
/* Chaque couche part d'un décalage propre et vient se ranger. */
.abcdt-service-acquisition-ecommerce .dr__f--1{ transform:translate3d(calc(-9% * (1 - var(--dl,1))), calc(-7% * (1 - var(--dl,1))), 0) scale(calc(1 - .1 * (1 - var(--dl,1)))) }
.abcdt-service-acquisition-ecommerce .dr__f--2{ transform:translate3d(calc(11% * (1 - var(--dl,1))), calc(6% * (1 - var(--dl,1))), 0) scale(calc(1 - .06 * (1 - var(--dl,1))));opacity:calc(.5 + .5 * var(--dl,1)) }
.abcdt-service-acquisition-ecommerce .dr__f--3{ transform:translate3d(calc(-5% * (1 - var(--dl,1))), calc(12% * (1 - var(--dl,1))), 0) scale(calc(1 - .14 * (1 - var(--dl,1))));opacity:calc(.34 + .66 * var(--dl,1)) }

.abcdt-service-acquisition-ecommerce .dr__l{ list-style:none;margin:0;padding:0 }
.abcdt-service-acquisition-ecommerce .dr__i{ padding:clamp(1.4rem,4vh,2.2rem) 0;border-top:1px solid var(--line) }
.abcdt-service-acquisition-ecommerce .dr__i:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-acquisition-ecommerce .dr__t{
  margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.14;color:var(--text)
}
.abcdt-service-acquisition-ecommerce .dr__p{ margin:.8rem 0 0;max-width:54ch;color:var(--text-2);font-size:.96rem;line-height:1.64 }
@media(min-width:900px){
  .abcdt-service-acquisition-ecommerce .dr__stage{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(3rem,7vw,6rem);align-items:center }
  .abcdt-service-acquisition-ecommerce .dr__stack{ aspect-ratio:4/5 }
}

/* ═══════════════════════════════════════════════════════════════
   09 · EXPERTISES CONNEXES — compact
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce .xp__in{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem) }
.abcdt-service-acquisition-ecommerce .xp__l{ list-style:none;margin:0;padding:0 }
.abcdt-service-acquisition-ecommerce .xp__l li{ border-top:1px solid var(--line) }
.abcdt-service-acquisition-ecommerce .xp__l li:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .xp__l a:hover span, .abcdt-service-acquisition-ecommerce .xp__l a:focus-visible span{ color:var(--blue-lift) }
.abcdt-service-acquisition-ecommerce .xp__l a:hover i, .abcdt-service-acquisition-ecommerce .xp__l a:focus-visible i{ color:var(--text-2) }
.abcdt-service-acquisition-ecommerce .xp__l a:hover::after, .abcdt-service-acquisition-ecommerce .xp__l a:focus-visible::after{ transform:translateX(5px);color:var(--blue-lift) }
@media(min-width:900px){
  .abcdt-service-acquisition-ecommerce .xp__in{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(3rem,7vw,6rem);align-items:start }
  .abcdt-service-acquisition-ecommerce .xp__l a{ grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto }
  .abcdt-service-acquisition-ecommerce .xp__l a i{ grid-column:2;grid-row:1 }
  .abcdt-service-acquisition-ecommerce .xp__l a::after{ grid-column:3 }
}

/* ═══════════════════════════════════════════════════════════════
   RÉVÉLATIONS COMMUNES — même convention que les deux autres pages.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition-ecommerce.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.4rem,0) }
.abcdt-service-acquisition-ecommerce.abc-motion [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--e),transform .95s var(--e)
}
.abcdt-service-acquisition-ecommerce.abc-motion .dr__i, .abcdt-service-acquisition-ecommerce.abc-motion .tj__i{ opacity:0;transform:translate3d(0,2rem,0) }
.abcdt-service-acquisition-ecommerce.abc-motion .dr__i.is-in, .abcdt-service-acquisition-ecommerce.abc-motion .tj__i.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--e),transform 1s var(--e)
}
.abcdt-service-acquisition-ecommerce.abc-motion .fr__h span{ opacity:0;transform:translate3d(0,.5em,0) }
.abcdt-service-acquisition-ecommerce.abc-motion .fr__pin.is-in .fr__h span{
  opacity:1;transform:none;transition:opacity .8s var(--e),transform .9s var(--e)
}
.abcdt-service-acquisition-ecommerce.abc-motion .fr__pin.is-in .fr__h span:nth-child(2){ transition-delay:.13s }
.abcdt-service-acquisition-ecommerce.abc-motion .fr__pin.is-in .fr__h span:nth-child(3){ transition-delay:.26s }

/* ═══════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT / SANS JAVASCRIPT

   Aucune vidéo n'est chargée, les posters suffisent. Les cadres sont
   d'emblée alignés, la piste horizontale redevient une pile, les
   quatre leviers sont dépliés. Rien n'attend le défilement.
   ═══════════════════════════════════════════════════════════════ */
/* Sans script : la mise au point est faite, les couches sont rangées,
   la fenêtre des leviers couvre toute la liste. */
.abcdt-service-acquisition-ecommerce:not(.abc-motion) .tj__sharp{ -webkit-mask-image:none;mask-image:none }
.abcdt-service-acquisition-ecommerce:not(.abc-motion) .md__media{ clip-path:none;opacity:.4 }
.abcdt-service-acquisition-ecommerce:not(.abc-motion) .pl__i .pl__t{ color:var(--text) }
.abcdt-service-acquisition-ecommerce:not(.abc-motion) .pl__i .pl__p{ color:var(--text-2) }

@media (prefers-reduced-motion: reduce){
  .abcdt-service-acquisition-ecommerce .eh__v, .abcdt-service-acquisition-ecommerce .ec__v, .abcdt-service-acquisition-ecommerce .fr__v, .abcdt-service-acquisition-ecommerce .tj__v, .abcdt-service-acquisition-ecommerce .md__v, .abcdt-service-acquisition-ecommerce .pl__v, .abcdt-service-acquisition-ecommerce .dr__v, .abcdt-service-acquisition-ecommerce .zg__v{ display:none }
  .abcdt-service-acquisition-ecommerce .eh__f, .abcdt-service-acquisition-ecommerce .fr__f, .abcdt-service-acquisition-ecommerce .ec__poster, .abcdt-service-acquisition-ecommerce .ec__v{ transition:none }
  .abcdt-service-acquisition-ecommerce .md__d, .abcdt-service-acquisition-ecommerce .md__media, .abcdt-service-acquisition-ecommerce .md__b span, .abcdt-service-acquisition-ecommerce .pl__i, .abcdt-service-acquisition-ecommerce .pl__t, .abcdt-service-acquisition-ecommerce .pl__p, .abcdt-service-acquisition-ecommerce .pl__k i, .abcdt-service-acquisition-ecommerce .dr__f, .abcdt-service-acquisition-ecommerce .tj__sharp, .abcdt-service-acquisition-ecommerce .dr__stack, .abcdt-service-acquisition-ecommerce .xp__l a, .abcdt-service-acquisition-ecommerce .xp__l a i, .abcdt-service-acquisition-ecommerce .xp__l a::after{ transition:none }
  .abcdt-service-acquisition-ecommerce .tj__sharp{ -webkit-mask-image:none;mask-image:none }
}

.abcdt-service-acquisition-ecommerce .end{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(6rem,17vh,12rem) 0 clamp(5rem,13vh,8rem);
  background:var(--ink)
}
.abcdt-service-acquisition-ecommerce .end__media{ position:absolute;inset:0;z-index:0 }
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .end .tex{ z-index:1 }
.abcdt-service-acquisition-ecommerce .end__in{ position:relative;z-index:2 }
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .end__p{
  margin:0 0 1.2rem;max-width:52ch;color:var(--text-2);
  font-size:1rem;line-height:1.62
}
.abcdt-service-acquisition-ecommerce .end__p:last-child{ margin-bottom:0 }
.abcdt-service-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .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-acquisition-ecommerce .end__h{ font-size:clamp(2.4rem,4.4vw,4rem) }
  .abcdt-service-acquisition-ecommerce .end__act{ padding-top:.4rem }
}

@media (prefers-reduced-motion: reduce){
  .abcdt-service-acquisition-ecommerce .end__v, .abcdt-service-acquisition-ecommerce .end__cta{ transition:none }
  .abcdt-service-acquisition-ecommerce .end__v{ opacity:0 }
}


/* ── Curseur personnalisé — VOLONTAIREMENT HORS DU SCOPE ──────────
   Le canvas est posé sur <body>, 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-acquisition-ecommerce,
body.has-tube .abcdt-service-acquisition-ecommerce a,
body.has-tube .abcdt-service-acquisition-ecommerce button,
body.has-tube .abcdt-service-acquisition-ecommerce summary,
body.has-tube .abcdt-service-acquisition-ecommerce input,
body.has-tube .abcdt-service-acquisition-ecommerce textarea,
body.has-tube .abcdt-service-acquisition-ecommerce select,
body.has-tube .abcdt-service-acquisition-ecommerce label,
body.has-tube .abcdt-service-acquisition-ecommerce [role="button"]{cursor:none}