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

.abcdt-service-tracking-data-marketing *, .abcdt-service-tracking-data-marketing *::before, .abcdt-service-tracking-data-marketing *::after{box-sizing:border-box}

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



.abcdt-service-tracking-data-marketing a{color:inherit}



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

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

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


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

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

.abcdt-service-tracking-data-marketing .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-tracking-data-marketing .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-tracking-data-marketing .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 « Tracking & data marketing »

   Même socle que les autres pages service : core.css pour les tokens,
   patterns.css pour les primitives, contact.css pour la conversion.

   TERRITOIRE — LE RÉVÉLÉ.

   La matière est là depuis le début, sous-exposée, presque invisible.
   Toute la page consiste à l'éclairer : un révélateur radial s'ouvre au
   hero, un double se recale, une part reste occultée dans la section
   conformité, et le révélateur revient une dernière fois sur l'audit.

   Ce qui doit rester lisible texte masqué : la BASSE LUMIÈRE et le
   CENTRE. Publicité digitale découpe des cadres orthogonaux sur champ
   clair ; Marketing automation fait courir un fil horizontal ; ici tout
   part d'un point de lumière qui s'élargit. Les compositions sont
   centrées, les bords sont doux, les filets sont fins.

   Aucun GA4, aucun dashboard, aucune courbe, aucun réseau de nœuds.

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

.abcdt-service-tracking-data-marketing .svc{ position:relative }

/* ═══════════════════════════════════════════════════════════════
   01 · HERO — LE RÉVÉLATEUR

   --rev : rayon du révélateur, de 22 % à 130 % de la diagonale.
   L'état par défaut est 130 % : sans script et sous mouvement réduit,
   le plan est entièrement révélé — la page est juste tout de suite.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .th{ position:relative;background:var(--ink) }
.abcdt-service-tracking-data-marketing .th__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-tracking-data-marketing .th__media{ position:absolute;inset:0;z-index:0 }
.abcdt-service-tracking-data-marketing .th__poster, .abcdt-service-tracking-data-marketing .th__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  /* La matière est volontairement sous-exposée : elle existe, on ne la
     lit pas encore. Le révélateur ne l'éclaire pas — il retire ce qui
     la couvre. */
  filter:grayscale(1) contrast(1.3) brightness(1.15)
}
.abcdt-service-tracking-data-marketing .th__v{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-service-tracking-data-marketing .th__v.is-lit{ opacity:1 }
.abcdt-service-tracking-data-marketing .th .tex{ z-index:2 }

/* Le révélateur — un seul dégradé radial. Opaque partout, transparent
   au centre. Pas de masque, pas de seconde copie du plan. */
.abcdt-service-tracking-data-marketing .th__rev{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(
    circle var(--rev,130%) at var(--rx,50%) var(--ry,46%),
    rgba(6,6,10,0) 0%, rgba(6,6,10,.18) 42%, rgba(6,6,10,.82) 74%, rgba(6,6,10,.97) 100%);
  transition:background .45s linear
}
.abcdt-service-tracking-data-marketing .th__veil{
  position:absolute;inset:0;z-index:4;
  background:linear-gradient(to bottom,
    rgba(6,6,10,.5) 0%, rgba(6,6,10,.1) 30%, rgba(6,6,10,.62) 74%, var(--ink) 100%)
}

.abcdt-service-tracking-data-marketing .th__copy{ position:relative;z-index:5;width:100% }
.abcdt-service-tracking-data-marketing .th__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-tracking-data-marketing .th__k i{ width:clamp(28px,6vw,64px);height:1px;background:var(--line-2);flex:none }
.abcdt-service-tracking-data-marketing .th__h{
  margin:0 0 0 -.04em;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(2.4rem,9.6vw,6.8rem);line-height:.9;color:var(--text)
}
.abcdt-service-tracking-data-marketing .th__l{
  margin:clamp(1.6rem,4vh,2.4rem) 0 0;max-width:48ch;
  color:var(--text-2);font-size:clamp(1rem,1.45vw,1.1rem);line-height:1.6
}
.abcdt-service-tracking-data-marketing .th__l em{ font-style:normal;color:var(--text) }
.abcdt-service-tracking-data-marketing .th__a{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.2rem;
  margin:clamp(1.8rem,4.5vh,2.6rem) 0 0
}

/* Les trois couches — pas de filets verticaux : sur cette page, ce qui
   sépare est un intervalle, jamais un trait. */
.abcdt-service-tracking-data-marketing .th__r{
  list-style:none;margin:0;padding-top:clamp(2.5rem,7vh,4rem);
  padding-bottom:clamp(3rem,8vh,5rem);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.4rem,4vh,2.2rem)
}
.abcdt-service-tracking-data-marketing .th__ri b{
  display:block;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.4rem);letter-spacing:-.025em;color:var(--text)
}
.abcdt-service-tracking-data-marketing .th__ri span{
  display:block;margin:.35rem 0 .6rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-tracking-data-marketing .th__ri p{ margin:0;font-size:.94rem;line-height:1.55;color:var(--text-2);max-width:36ch }
@media(min-width:768px){
  .abcdt-service-tracking-data-marketing .th__r{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,5vw,4.5rem) }
}

/* ═══════════════════════════════════════════════════════════════
   02 · CONVICTION — la phrase se met au point

   --foc : 0 = détimbrée, 1 = nette. Valeur par défaut 1.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .tc{ position:relative;isolation:isolate;padding:clamp(5rem,14vh,10rem) 0 }
/* Le seul reste de matière : un halo. Aucun plan, aucune image.

   TRANSITION 1 · ce halo n'est pas posé au hasard. Il est centré à
   l'endroit exact où le révélateur du hero finit sa course — même
   abscisse, même ordonnée relative. La lumière qu'on vient d'ouvrir
   plus haut ne s'éteint pas au changement de section : elle se dilue
   dans celle-ci et éclaire encore la phrase. */
.abcdt-service-tracking-data-marketing .tc__halo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(76% 62% at 50% 4%, rgba(232,232,240,.075), transparent 68%)
}
.abcdt-service-tracking-data-marketing .tc__in{ position:relative;z-index:1 }
/* La mise au point, amplifiée — mais jamais permanente.

   Le titre arrive de plus LOIN (échelle 0,955, remonté de six pixels),
   plus écarté et plus flou, et il se recale sur une courbe qui décélère
   longtemps : c'est la tension avant la stabilisation. La netteté finale
   est totale — il n'y a aucun flou résiduel, jamais.

   L'emphase se recale une demi-seconde APRÈS le reste de la phrase :
   c'est le dernier plan à se poser, et c'est celui qu'on doit lire. */
.abcdt-service-tracking-data-marketing .tc__h{
  margin:0;max-width:21ch;
  font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.05;color:var(--text-2);text-wrap:balance;
  letter-spacing:calc(-.038em + .16em * (1 - var(--foc,1)));
  filter:blur(calc(9px * (1 - var(--foc,1))));
  transform:translate3d(0, calc(-6px * (1 - var(--foc,1))), 0)
            scale(calc(1 - .045 * (1 - var(--foc,1))));
  transform-origin:0 50%;
  transition:letter-spacing 1.5s cubic-bezier(.14,.9,.2,1),
             filter 1.4s cubic-bezier(.14,.9,.2,1),
             transform 1.6s cubic-bezier(.14,.9,.2,1)
}
.abcdt-service-tracking-data-marketing .tc__h em{
  font-style:normal;color:var(--text);
  display:inline-block;
  opacity:calc(.3 + .7 * var(--foc,1));
  filter:blur(calc(5px * (1 - var(--foc,1))));
  transition:opacity 1.1s var(--e) .45s,filter 1.2s var(--e) .45s
}
.abcdt-service-tracking-data-marketing .tc__body{
  margin-top:clamp(2.4rem,7vh,4rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem
}
.abcdt-service-tracking-data-marketing .tc__p{ margin:0;max-width:60ch;color:var(--text-2);font-size:1rem;line-height:1.62 }
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .tc__body{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem) }
  .abcdt-service-tracking-data-marketing .tc__p{ max-width:none;font-size:.98rem }
}

/* ═══════════════════════════════════════════════════════════════
   03 · LE DOUBLE — la seule scène collante de la page

   --cv : 0 = les deux copies sont décalées, 1 = elles n'en font plus
   qu'une. L'état par défaut est 1 : sans script, il n'y a qu'une seule
   image, nette. La scène ne dépend pas du mouvement pour être juste.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .db{ position:relative;background:var(--ink) }
.abcdt-service-tracking-data-marketing .db__track{ position:relative }
.abcdt-service-tracking-data-marketing .db__pin{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,8vh,5rem)
}
.abcdt-service-tracking-data-marketing .db__set{ position:absolute;inset:0;z-index:0 }
.abcdt-service-tracking-data-marketing .db__f{
  position:absolute;inset:0;margin:0;overflow:hidden
}
/* Le plan est ramené en basse lumière : sur cette page rien n'est
   éclatant, tout se lit dans la pénombre. */
.abcdt-service-tracking-data-marketing .db__f img, .abcdt-service-tracking-data-marketing .db__f video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.24) brightness(.78)
}
.abcdt-service-tracking-data-marketing .db__f video{ opacity:0;transition:opacity 1.2s var(--e) }
.abcdt-service-tracking-data-marketing .db__f video.is-lit{ opacity:1 }
/* Le décalage de registre.

   La seconde copie ne couvre que la MOITIÉ BASSE du cadre, et elle est
   décalée horizontalement. Le plan est donc coupé en deux : la même
   image, au même instant, mais les deux moitiés ne se rejoignent pas.

   C'est plus lisible qu'une superposition fantôme, qui se perdrait dans
   une matière diffuse : ici l'erreur se voit à la ligne de rupture, et
   la correction se voit quand elle disparaît. C'est très exactement ce
   qu'est une attribution cassée.

   À --cv = 1 le décalage est nul : il n'y a plus qu'une seule image
   continue. C'est l'état par défaut, sans script comme sous mouvement
   réduit. */
.abcdt-service-tracking-data-marketing .db__f--ghost{
  clip-path:inset(50% 0 0 0);
  /* L'écart est plus franc — dix pour cent de la largeur — et il se
     referme plus VITE qu'il ne s'est ouvert : une erreur d'attribution
     met longtemps à se voir et se corrige d'un coup. La courbe est une
     seule sortante, sans dépassement : pas de glitch, pas de saccade. */
  transform:translate3d(calc(10% * (1 - var(--cv,1))),0,0);
  transition:transform .55s cubic-bezier(.2,1,.24,1)
}
/* La ligne de rupture. Elle n'existe que tant que l'écart existe, mais
   tant qu'il existe elle est FRANCHE : un trait clair, doublé d'une
   ombre portée vers le bas — la moitié basse est décollée, elle ne
   flotte pas. */
.abcdt-service-tracking-data-marketing .db__set::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;z-index:1;
  background:rgba(232,232,240,calc(.62 * (1 - var(--cv,1))));
  box-shadow:0 6px 16px -4px rgba(6,6,10,calc(.85 * (1 - var(--cv,1))));
  pointer-events:none;
  transition:background .55s linear,box-shadow .55s linear
}
.abcdt-service-tracking-data-marketing .db .tex{ z-index:2 }
.abcdt-service-tracking-data-marketing .db__pin::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,6,10,.6) 0%, rgba(6,6,10,.22) 20%, rgba(6,6,10,.64) 48%,
    rgba(6,6,10,.92) 78%, var(--ink) 100%)
}
.abcdt-service-tracking-data-marketing .db__copy{ position:relative;z-index:3;width:100% }
.abcdt-service-tracking-data-marketing .db .eyebrow{ color:var(--text-2) }
.abcdt-service-tracking-data-marketing .db__h{
  margin:.6rem 0 0;max-width:20ch;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(1.8rem,5.4vw,3.9rem);line-height:.98;color:var(--text)
}
.abcdt-service-tracking-data-marketing .db__h span{ display:block }
/* padding-block seul : .wrap porte déjà les gouttières. */
.abcdt-service-tracking-data-marketing .db__after{ padding-block:clamp(3rem,8vh,5rem) clamp(4rem,10vh,7rem) }
.abcdt-service-tracking-data-marketing .db__p{ margin:0;max-width:62ch;color:var(--text-2);font-size:1rem;line-height:1.62 }
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing.abc-motion .db__track{ height:190svh }
  .abcdt-service-tracking-data-marketing.abc-motion .db__pin{ position:sticky;top:0;height:100svh;min-height:0 }
}

/* ═══════════════════════════════════════════════════════════════
   04 · LES TROIS DIMENSIONS — lecture plate
   ═══════════════════════════════════════════════════════════════ */
/* TRANSITION 2 · la ligne de fracture du double ne disparaît pas avec
   la scène : elle se pose en haut de cette section, horizontale, encore
   allumée au centre — là où elle coupait l'image — et s'éteint vers les
   bords. Ce qui séparait devient ce qui ordonne. */
.abcdt-service-tracking-data-marketing .dm{ position:relative;padding:clamp(4.5rem,12vh,9rem) 0 }
.abcdt-service-tracking-data-marketing .dm::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:var(--gut);right:var(--gut);top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--line) 22%, rgba(232,232,240,.3) 50%, var(--line) 78%, transparent 100%)
}
.abcdt-service-tracking-data-marketing .dm__head, .abcdt-service-tracking-data-marketing .dm__l{ position:relative;z-index:1 }
.abcdt-service-tracking-data-marketing .dm__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
/* Le filet est porté par les ITEMS, pas par la liste : posé sur la
   liste il traverserait aussi les gouttières de .wrap. */
.abcdt-service-tracking-data-marketing .dm__l{
  list-style:none;margin:0 auto;counter-reset:dm;
  display:grid;grid-template-columns:minmax(0,1fr)
}
.abcdt-service-tracking-data-marketing .dm__i{
  counter-increment:dm;
  padding:clamp(1.8rem,5vh,2.6rem) 0;border-top:1px solid var(--line)
}
.abcdt-service-tracking-data-marketing .dm__i:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .dm__i::before{
  content:counter(dm,decimal-leading-zero);
  display:block;margin-bottom:1rem;
  font-family:var(--ff-d);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;color:var(--text-3)
}
.abcdt-service-tracking-data-marketing .dm__t{
  margin:0 0 .9rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.028em;
  font-size:clamp(1.2rem,2.8vw,1.6rem);line-height:1.1;color:var(--text)
}
.abcdt-service-tracking-data-marketing .dm__p{ margin:0;color:var(--text-2);font-size:.98rem;line-height:1.62;max-width:44ch }
.abcdt-service-tracking-data-marketing .dm__s{
  list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.5rem
}
.abcdt-service-tracking-data-marketing .dm__s li{
  position:relative;padding-left:1.2rem;
  font-size:.88rem;line-height:1.5;color:var(--text-3)
}
.abcdt-service-tracking-data-marketing .dm__s li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)
}
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .dm__l{
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem)
  }
  .abcdt-service-tracking-data-marketing .dm__i{ border-bottom:0;padding-bottom:0 }
}

/* ═══════════════════════════════════════════════════════════════
   05 · CONFORMITÉ — la part occultée

   Une bande de matière dont un pan est franchement couvert. Arête
   nette, aucun dégradé : ce n'est pas une ombre, c'est une absence.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .cf{ position:relative;padding:clamp(4rem,11vh,8rem) 0 }
.abcdt-service-tracking-data-marketing .cf__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
/* La bande est calée sur la COLONNE DE LECTURE, pas sur la fenêtre :
   ses bords tombent exactement sur ceux du texte. Moins de surface
   utile, plus de noir autour — et un plan affiché à 1,6× sa résolution
   native au lieu de 2,2×. */
.abcdt-service-tracking-data-marketing .cf__band{
  position:relative;isolation:isolate;overflow:hidden;
  width:calc(100% - var(--gut) * 2);
  max-width:calc(var(--maxw) - var(--gut) * 2);
  margin:0 auto clamp(2.5rem,7vh,4rem);
  height:clamp(170px,26vh,270px);background:var(--ink-2)
}
/* Ramené au niveau du reste de la page : la matière se lit, elle
   n'éclaire pas. */
.abcdt-service-tracking-data-marketing .cf__poster, .abcdt-service-tracking-data-marketing .cf__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.78);opacity:.76
}
.abcdt-service-tracking-data-marketing .cf__v{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-service-tracking-data-marketing .cf__v.is-lit{ opacity:.76 }

/* La surface ne se révèle JAMAIS totalement. Même la part visible garde
   un reste de voile : on ne voit pas tout, on ne verra pas tout. */
.abcdt-service-tracking-data-marketing .cf__band::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(6,6,10,.17)
}
/* La lumière s'arrête net. Le dégradé ne meurt pas dans le noir : il
   court jusqu'au bord de la coupe et s'y interrompt d'un coup. */
.abcdt-service-tracking-data-marketing .cf__band::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,6,10,0) 0%,
    rgba(6,6,10,0) calc(88% - var(--cut,34%)),
    rgba(6,6,10,.62) calc(100% - var(--cut,34%)),
    rgba(6,6,10,.62) 100%);
  transition:background 1.2s var(--e)
}
/* La coupe est un objet, pas une ombre : arête claire d'un pixel côté
   matière, et une pression sombre qui déborde vers la gauche — la
   surface est plaquée contre l'absence. */
.abcdt-service-tracking-data-marketing .cf__cut{
  position:absolute;top:0;bottom:0;right:0;z-index:3;
  width:var(--cut,34%);background:var(--ink);
  box-shadow:inset 1px 0 0 rgba(232,232,240,.42),
             -22px 0 30px -10px rgba(6,6,10,.96);
  transition:width 1.25s cubic-bezier(.22,1,.28,1)
}
.abcdt-service-tracking-data-marketing .cf__cols{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;
  margin-bottom:clamp(2.5rem,7vh,3.6rem)
}
.abcdt-service-tracking-data-marketing .cf__p{ margin:0;max-width:60ch;color:var(--text-2);font-size:1rem;line-height:1.62 }
.abcdt-service-tracking-data-marketing .cf__l{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--line)
}
.abcdt-service-tracking-data-marketing .cf__i{ padding:1.3rem 0;border-bottom:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .cf__n{
  margin:0 0 .5rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1rem,2.2vw,1.16rem);color:var(--text)
}
.abcdt-service-tracking-data-marketing .cf__i p{ margin:0;font-size:.92rem;line-height:1.58;color:var(--text-3);max-width:46ch }
.abcdt-service-tracking-data-marketing .cf__note{
  margin:clamp(2rem,5vh,3rem) 0 0;max-width:66ch;
  color:var(--text-2);font-size:.95rem;line-height:1.62
}
.abcdt-service-tracking-data-marketing .cf__note .tlink{ margin-top:.6rem }
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .cf__cols{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem) }
  .abcdt-service-tracking-data-marketing .cf__p{ max-width:none;font-size:.95rem }
  .abcdt-service-tracking-data-marketing .cf__l{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem) }
  .abcdt-service-tracking-data-marketing .cf__i:nth-last-child(-n+2){ border-bottom:0 }
}

/* ═══════════════════════════════════════════════════════════════
   06 · LA STACK — compact
   ═══════════════════════════════════════════════════════════════ */
/* TRANSITION 3 · ce n'est pas un trait qui survit, c'est une ABSENCE.

   La coupe de la section précédente occupe le tiers droit de la bande.
   Ici, ce même tiers droit reste dans l'ombre en haut de section, et
   l'ombre se dissipe en descendant. La part qu'on n'a pas le droit de
   mesurer ne s'arrête pas au bord de la section : elle continue un
   moment, puis se referme.

   Écrit comme une ZONE et non comme une ligne, exprès : Publicité
   digitale prolonge ses sections par des arêtes verticales, c'est sa
   grammaire. Ici la grammaire est la lumière et son manque — deux
   pages ne peuvent pas faire le même geste. */
/* Pas d'overflow:hidden ici : .st__head est collant sur grand écran, et
   un ancêtre à débordement masqué annulerait le sticky. La zone d'ombre
   est bornée par ses propres dimensions, elle n'a pas besoin d'être
   rognée. */
.abcdt-service-tracking-data-marketing .st{ position:relative;padding:clamp(4rem,10vh,7rem) 0;border-top:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .st::before{
  content:'';position:absolute;z-index:0;pointer-events:none;display:none;
  right:0;top:0;width:34%;height:clamp(180px,30vh,340px);
  background:linear-gradient(to bottom, rgba(6,6,10,.92), rgba(6,6,10,0));
  box-shadow:inset 1px 0 0 rgba(232,232,240,.1)
}
@media(min-width:900px){ .abcdt-service-tracking-data-marketing .st::before{ display:block } }
.abcdt-service-tracking-data-marketing .st__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem)
}
.abcdt-service-tracking-data-marketing .st__l{ list-style:none;margin:0;padding:0 }
.abcdt-service-tracking-data-marketing .st__i{ padding:1.3rem 0;border-top:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .st__i:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .st__k{
  margin:0 0 .4rem;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-tracking-data-marketing .st__n{
  margin:0 0 .55rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1rem,2.2vw,1.16rem);color:var(--text)
}
.abcdt-service-tracking-data-marketing .st__p{ margin:0;font-size:.93rem;line-height:1.58;color:var(--text-2);max-width:62ch }
.abcdt-service-tracking-data-marketing .st__p .tlink{ margin-top:.5rem }
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .st__in{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:clamp(3rem,7vw,6rem);align-items:start }
  .abcdt-service-tracking-data-marketing .st__head{ position:sticky;top:calc(var(--nav-h) + 2rem) }
}

/* ═══════════════════════════════════════════════════════════════
   07 · L'APPROCHE — quatre temps

   CORRECTIF. La version précédente déclarait une grille à DEUX colonnes
   sur `.mt__i` alors que l'élément contient QUATRE items de grille : le
   pseudo-élément ::before du numéro, le titre, le paragraphe et les
   étiquettes. Le placement automatique remplissait donc (1,1) avec le
   numéro, (1,2) avec le titre, puis renvoyait le PARAGRAPHE en (2,1) —
   c'est-à-dire dans la colonne de 4 rem réservée au numéro. Le texte de
   chaque étape était rendu sur 64 px de large et 711 px de haut, un ou
   deux mots par ligne, pendant que les deux tiers droits restaient
   vides. Illisible à toutes les largeurs ≥ 900 px, correct en dessous —
   d'où un défaut qui ne se voyait qu'au bureau.

   Deux décisions, pas une :

   1 · le numéro sort du flux. Un pseudo-élément positionné en absolu
       n'est plus une cellule de grille : la panne ne peut pas revenir.
       Il devient une RÉSERVE typographique très faible, calée en bas à
       gauche, à moitié enfoncée sous le filet. C'est la piste « numéro
       géant en arrière-plan » — mais il n'occupe plus aucune largeur.

   2 · les trois enfants réels sont placés EXPLICITEMENT. Plus aucun
       placement automatique, donc plus aucune dérive possible si l'on
       ajoute un jour un quatrième enfant.

   La lecture passe avant le graphisme : le texte n'est jamais atténué,
   quel que soit l'état d'exposition. Seuls le filet et le numéro
   réagissent.

   --ex : 0 = l'étape n'est pas encore exposée, 1 = elle l'est. Valeur
   par défaut 1 — sans script et sous mouvement réduit, tout est exposé.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .mt{ position:relative;padding:clamp(4.5rem,12vh,9rem) 0 }
.abcdt-service-tracking-data-marketing .mt__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-tracking-data-marketing .mt__l{ list-style:none;margin:0 auto;counter-reset:mt }

.abcdt-service-tracking-data-marketing .mt__i{
  counter-increment:mt;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.7rem,4.2vh,2.6rem) 0
}
/* Le dernier filet ferme la liste sans ajouter d'élément. */
.abcdt-service-tracking-data-marketing .mt__l .mt__i:last-child{ box-shadow:inset 0 -1px 0 var(--line) }

/* Le filet de tête se TRACE de gauche à droite quand l'étape s'expose.
   C'est la ligne de révélation qui progresse d'une étape à l'autre :
   un seul segment à la fois, jamais une barre de progression. */
.abcdt-service-tracking-data-marketing .mt__i::after{
  content:'';position:absolute;left:0;top:0;height:1px;width:100%;z-index:2;
  background:linear-gradient(90deg,
    rgba(232,232,240,.46) 0%, var(--line-2) 22%, var(--line) 64%, var(--line) 100%);
  transform:scaleX(var(--ex,1));transform-origin:left center;
  transition:transform 1.15s var(--e)
}

/* ── Régime étroit : une pile, et rien d'autre.

   Le numéro reste une étiquette normale dans le flux. Une réserve
   typographique géante n'a aucun sens ici : elle passerait sous la
   colonne de texte, qui occupe toute la largeur. Ce n'est donc pas la
   solution du bureau comprimée — c'est une autre solution. ── */
.abcdt-service-tracking-data-marketing .mt__i::before{
  content:counter(mt,decimal-leading-zero);
  display:block;margin-bottom:.9rem;
  font-family:var(--ff-d);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;color:var(--text-3)
}
.abcdt-service-tracking-data-marketing .mt__t{
  margin:0 0 .8rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.15rem,2.6vw,1.55rem);line-height:1.14;color:var(--text)
}
.abcdt-service-tracking-data-marketing .mt__p{ margin:0;color:var(--text-2);font-size:.98rem;line-height:1.62;max-width:62ch }
.abcdt-service-tracking-data-marketing .mt__k{ display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:1rem 0 0 }
.abcdt-service-tracking-data-marketing .mt__k i{
  font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:.3rem .55rem;box-shadow:inset 0 0 0 1px var(--line)
}

@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .mt__i{
    display:grid;
    grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
    column-gap:clamp(2rem,4.5vw,4rem);
    align-items:start;
    padding:clamp(2.2rem,5vh,3.2rem) 0
  }
  /* Placement EXPLICITE des trois enfants réels. Rien n'est laissé au
     placement automatique : c'est ce qui a cassé la section. */
  .abcdt-service-tracking-data-marketing .mt__t{ grid-column:1;grid-row:1;position:relative;z-index:1;margin-bottom:0 }
  .abcdt-service-tracking-data-marketing .mt__p{ grid-column:2;grid-row:1;position:relative;z-index:1 }
  .abcdt-service-tracking-data-marketing .mt__k{ grid-column:2;grid-row:2;position:relative;z-index:1;margin-top:1.2rem }

  /* Le numéro en réserve. Hors flux, hors grille, sous le texte, calé
     dans la cellule (2,1) que rien n'occupe. Il ne peut plus contraindre
     aucune largeur. */
  .abcdt-service-tracking-data-marketing .mt__i::before{
    position:absolute;z-index:0;pointer-events:none;
    left:-.05em;bottom:-.12em;margin:0;
    font-size:clamp(4.6rem,10.5vw,9rem);font-weight:800;
    letter-spacing:-.06em;line-height:.78;
    color:rgba(232,232,240,calc(.03 + .06 * var(--ex,1)));
    transition:color 1.3s var(--e)
  }
  /* Le titre reste au-dessus de la réserve, jamais dedans. */
  .abcdt-service-tracking-data-marketing .mt__t{ font-size:clamp(1.3rem,2vw,1.6rem);max-width:18ch }
}

/* ═══════════════════════════════════════════════════════════════
   08 · L'AUDIT — le révélateur revient
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .ad{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(6rem,17vh,12rem) 0
}
.abcdt-service-tracking-data-marketing .ad__media{ position:absolute;inset:0;z-index:0 }
.abcdt-service-tracking-data-marketing .ad__poster, .abcdt-service-tracking-data-marketing .ad__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);filter:grayscale(1) contrast(1.28) brightness(1.1)
}
.abcdt-service-tracking-data-marketing .ad__v{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-service-tracking-data-marketing .ad__v.is-lit{ opacity:1 }
.abcdt-service-tracking-data-marketing .ad__rev{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(
    circle var(--rev,120%) at 34% 50%,
    rgba(6,6,10,0) 0%, rgba(6,6,10,.3) 44%, rgba(6,6,10,.88) 76%, rgba(6,6,10,.98) 100%);
  transition:background .45s linear
}
.abcdt-service-tracking-data-marketing .ad__veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.42) 26%, rgba(6,6,10,.5) 70%, var(--ink) 100%)
}
.abcdt-service-tracking-data-marketing .ad .tex{ z-index:3 }
.abcdt-service-tracking-data-marketing .ad__in{ position:relative;z-index:4 }
.abcdt-service-tracking-data-marketing .ad__h{
  margin:0;max-width:20ch;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.8rem,4.8vw,3.4rem);line-height:1.05;color:var(--text);text-wrap:balance
}
.abcdt-service-tracking-data-marketing .ad__p{
  margin:clamp(1.4rem,3.5vh,2rem) 0 0;max-width:62ch;
  color:var(--text-2);font-size:1rem;line-height:1.62
}

/* ═══════════════════════════════════════════════════════════════
   09 · CE QUE ÇA PRODUIT — résolution
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .pt__cols{
  margin-top:clamp(2.4rem,6vh,3.4rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem
}
.abcdt-service-tracking-data-marketing .pt__p{ margin:0;color:var(--text-2);font-size:1rem;line-height:1.62;max-width:58ch }
.abcdt-service-tracking-data-marketing .pt__l{
  list-style:none;margin:clamp(2.4rem,6vh,3.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr)
}
.abcdt-service-tracking-data-marketing .pt__li{ padding:1.3rem 0;border-top:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .pt__li:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .pt__li h3{
  margin:0 0 .5rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1rem,2.2vw,1.14rem);color:var(--text)
}
.abcdt-service-tracking-data-marketing .pt__li p{ margin:0;font-size:.92rem;line-height:1.58;color:var(--text-3);max-width:42ch }
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .pt__cols{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem) }
  .abcdt-service-tracking-data-marketing .pt__p{ max-width:none;font-size:.95rem }
  .abcdt-service-tracking-data-marketing .pt__l{ grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line) }
  .abcdt-service-tracking-data-marketing .pt__li{
    padding:clamp(1.4rem,3vh,2rem) clamp(1rem,2vw,1.6rem);
    border-top:0;border-left:1px solid var(--line)
  }
  .abcdt-service-tracking-data-marketing .pt__li:first-child{ padding-left:0;border-left:0 }
  .abcdt-service-tracking-data-marketing .pt__li:last-child{ border-bottom:0;padding-right:0 }
}

/* ═══════════════════════════════════════════════════════════════
   10 · AUTOUR DU TRACKING — maillage interne

   Structure alignée sur « Autour du SEO » (section .sx de la page
   Référencement naturel) pour que la fusion soit mécanique.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing .rx{ position:relative;padding:clamp(4rem,10vh,7rem) 0;border-top:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .rx__head{ margin-bottom:clamp(2rem,5vh,3rem) }
.abcdt-service-tracking-data-marketing .rx__h{
  margin:0;max-width:22ch;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.08;color:var(--text)
}
.abcdt-service-tracking-data-marketing .rx__l{ list-style:none;margin:0 auto }
.abcdt-service-tracking-data-marketing .rx__l li{ border-top:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .rx__l li:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-tracking-data-marketing .rx__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-tracking-data-marketing .rx__l a b{
  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-tracking-data-marketing .rx__l a span{
  grid-column:1/-1;font-size:.84rem;color:var(--text-3);transition:color .25s var(--e)
}
.abcdt-service-tracking-data-marketing .rx__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-tracking-data-marketing .rx__l a:hover b, .abcdt-service-tracking-data-marketing .rx__l a:focus-visible b{ color:var(--blue-lift) }
.abcdt-service-tracking-data-marketing .rx__l a:hover span, .abcdt-service-tracking-data-marketing .rx__l a:focus-visible span{ color:var(--text-2) }
.abcdt-service-tracking-data-marketing .rx__l a:hover::after, .abcdt-service-tracking-data-marketing .rx__l a:focus-visible::after{ transform:translateX(5px);color:var(--blue-lift) }
@media(min-width:900px){
  .abcdt-service-tracking-data-marketing .rx__l a{ grid-template-columns:minmax(0,18rem) minmax(0,1fr) auto }
  .abcdt-service-tracking-data-marketing .rx__l a span{ grid-column:2;grid-row:1 }
  .abcdt-service-tracking-data-marketing .rx__l a::after{ grid-column:3 }
}

/* ═══════════════════════════════════════════════════════════════
   RÉVÉLATIONS COMMUNES — même convention que les autres pages.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-tracking-data-marketing.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.4rem,0) }
.abcdt-service-tracking-data-marketing.abc-motion [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--e),transform .95s var(--e)
}
.abcdt-service-tracking-data-marketing.abc-motion .dm__i, .abcdt-service-tracking-data-marketing.abc-motion .mt__i, .abcdt-service-tracking-data-marketing.abc-motion .st__i{ opacity:0;transform:translate3d(0,2rem,0) }
.abcdt-service-tracking-data-marketing.abc-motion .dm__i.is-in, .abcdt-service-tracking-data-marketing.abc-motion .mt__i.is-in, .abcdt-service-tracking-data-marketing.abc-motion .st__i.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--e),transform 1s var(--e)
}
.abcdt-service-tracking-data-marketing.abc-motion .db__h span{ opacity:0;transform:translate3d(0,.5em,0) }
.abcdt-service-tracking-data-marketing.abc-motion .db__pin.is-in .db__h span{
  opacity:1;transform:none;transition:opacity .8s var(--e),transform .9s var(--e)
}
.abcdt-service-tracking-data-marketing.abc-motion .db__pin.is-in .db__h span:nth-child(2){ transition-delay:.09s }
.abcdt-service-tracking-data-marketing.abc-motion .db__pin.is-in .db__h span:nth-child(3){ transition-delay:.18s }
.abcdt-service-tracking-data-marketing.abc-motion .db__pin.is-in .db__h span:nth-child(4){ transition-delay:.27s }

/* ═══════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT

   Aucune vidéo, aucun révélateur, aucun double, aucune scène collante.
   Les états par défaut du CSS étant déjà les états aboutis, il suffit
   de couper le mouvement : le plan est entièrement visible, il n'y a
   qu'une seule image, et le titre est net.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .abcdt-service-tracking-data-marketing .th__v, .abcdt-service-tracking-data-marketing .db__v, .abcdt-service-tracking-data-marketing .cf__v, .abcdt-service-tracking-data-marketing .ad__v{ display:none }
  .abcdt-service-tracking-data-marketing .th__rev, .abcdt-service-tracking-data-marketing .ad__rev, .abcdt-service-tracking-data-marketing .tc__h, .abcdt-service-tracking-data-marketing .tc__h em, .abcdt-service-tracking-data-marketing .db__f--ghost, .abcdt-service-tracking-data-marketing .db__set::after, .abcdt-service-tracking-data-marketing .cf__cut, .abcdt-service-tracking-data-marketing .cf__band::after, .abcdt-service-tracking-data-marketing .mt__i::after, .abcdt-service-tracking-data-marketing .mt__i::before, .abcdt-service-tracking-data-marketing .rx__l a, .abcdt-service-tracking-data-marketing .rx__l a b, .abcdt-service-tracking-data-marketing .rx__l a span, .abcdt-service-tracking-data-marketing .rx__l a::after{ transition:none }
  .abcdt-service-tracking-data-marketing .tc__h{ transform:none }
  .abcdt-service-tracking-data-marketing .th__poster, .abcdt-service-tracking-data-marketing .ad__poster{ transform:none }
}

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

@media (prefers-reduced-motion: reduce){
  .abcdt-service-tracking-data-marketing .end__v, .abcdt-service-tracking-data-marketing .end__cta{ transition:none }
  .abcdt-service-tracking-data-marketing .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-tracking-data-marketing,
body.has-tube .abcdt-service-tracking-data-marketing a,
body.has-tube .abcdt-service-tracking-data-marketing button,
body.has-tube .abcdt-service-tracking-data-marketing summary,
body.has-tube .abcdt-service-tracking-data-marketing input,
body.has-tube .abcdt-service-tracking-data-marketing textarea,
body.has-tube .abcdt-service-tracking-data-marketing select,
body.has-tube .abcdt-service-tracking-data-marketing label,
body.has-tube .abcdt-service-tracking-data-marketing [role="button"]{cursor:none}