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

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

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



.abcdt-service-marketing-automation a{color:inherit}



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

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

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


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

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

.abcdt-service-marketing-automation .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-marketing-automation .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-marketing-automation .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 « Marketing automation »

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

   TERRITOIRE — LA CONTINUITÉ.

   Une seule matière traverse toute la page : un filament blanc sur noir,
   toujours horizontal, toujours ininterrompu. Il apparaît en pleine
   largeur dans le hero, passe derrière la conviction, court sous les
   quatre séquences, puis se réduit à un filet d'un pixel dans la
   méthode. C'est le même geste, à cinq échelles.

   Ce qui doit rester lisible texte masqué : du NOIR, très peu
   d'éléments, de larges respirations, et un trait clair qui court d'un
   bord à l'autre. Publicité digitale est faite de cadres orthogonaux
   sur champ clair ; Tracking sera une révélation en basse lumière.
   Ici, rien n'est encadré : tout coule.

   Aucun nœud, aucun diagramme de workflow, aucune fausse interface.

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

.abcdt-service-marketing-automation .svc{ position:relative }

/* ═══════════════════════════════════════════════════════════════
   01 · HERO — LE FIL
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation .mh{ position:relative;background:var(--ink) }
.abcdt-service-marketing-automation .mh__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-marketing-automation .mh__media{ position:absolute;inset:0;z-index:0 }
.abcdt-service-marketing-automation .mh__poster, .abcdt-service-marketing-automation .mh__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Dérive horizontale très lente : la matière passe, elle ne monte pas.
     C'est la différence de geste avec les autres pages du site. */
  transform:scale(1.14) translate3d(var(--hx,0px),0,0);
  filter:grayscale(1) contrast(1.04);opacity:.72
}
.abcdt-service-marketing-automation .mh__v{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-service-marketing-automation .mh__v.is-lit{ opacity:.72 }
.abcdt-service-marketing-automation .mh .tex{ z-index:2 }
.abcdt-service-marketing-automation .mh__veil{
  position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(to bottom, rgba(6,6,10,.55) 0%, rgba(6,6,10,.2) 30%, rgba(6,6,10,.72) 74%, var(--ink) 100%),
    linear-gradient(84deg, rgba(6,6,10,.86) 0%, rgba(6,6,10,.42) 42%, rgba(6,6,10,.12) 78%, rgba(6,6,10,.34) 100%)
}

/* Le fil — au-dessus du voile, en pleine densité, débordant des deux
   côtés du cadre. Il vient d'avant la page et continue après elle. */
/* Le cadre du fil est plus HAUT que le fil lui-même : la doublure
   défocalisée a besoin de place pour déborder, sinon son halo se
   couperait net et trahirait le montage. Un masque vertical très doux
   éteint ce débordement aux extrémités ; la bande nette, elle, garde
   ses arêtes franches à l'intérieur. */
.abcdt-service-marketing-automation .mh__thread{
  --band:clamp(26px,5vh,56px);
  position:absolute;z-index:4;margin:0;overflow:hidden;
  left:-6vw;right:-6vw;top:14%;
  height:clamp(140px,25vh,302px);
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-composite:intersect
}
.abcdt-service-marketing-automation .mh__thread img, .abcdt-service-marketing-automation .mh__tv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.18);
  transform:translate3d(var(--tx,0px),0,0) scale(1.05)
}
/* La doublure : le même fil, défocalisé, plus grand, plus lent. Elle ne
   se voit pas — elle se sent. C'est ce qui donne une épaisseur d'air au
   trait sans lui donner un pixel de plus. */
.abcdt-service-marketing-automation .mh__back{
  filter:grayscale(1) contrast(1.06) blur(7px);
  opacity:.5;
  transform:translate3d(var(--tx2,0px),0,0) scale(1.22)
}
/* La bande nette est en retrait du cadre : c'est elle le fil. */
.abcdt-service-marketing-automation .mh__front, .abcdt-service-marketing-automation .mh__tv{ top:var(--band);bottom:var(--band);height:auto;inset-inline:0 }
.abcdt-service-marketing-automation .mh__front{ z-index:1 }
.abcdt-service-marketing-automation .mh__tv{ z-index:1;opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-service-marketing-automation .mh__tv.is-lit{ opacity:1 }
/* La glissée de lumière. Une seule tache douce qui parcourt le fil au
   défilement : la variation, pas l'épaisseur. */
.abcdt-service-marketing-automation .mh__glow{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, transparent 34%,
    rgba(232,232,240,.16) 46%, rgba(232,232,240,.05) 56%,
    transparent 68%, transparent 100%);
  transform:translate3d(var(--gl,0px),0,0);
  mix-blend-mode:screen
}

.abcdt-service-marketing-automation .mh__copy{ position:relative;z-index:5;width:100% }
.abcdt-service-marketing-automation .mh__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-marketing-automation .mh__k i{ width:clamp(28px,6vw,64px);height:1px;background:var(--line-2);flex:none }
.abcdt-service-marketing-automation .mh__h{
  margin:0 0 0 -.04em;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.048em;
  font-size:clamp(2.7rem,11.5vw,8rem);line-height:.88;color:var(--text)
}
.abcdt-service-marketing-automation .mh__l{
  margin:clamp(1.6rem,4vh,2.4rem) 0 0;max-width:52ch;
  color:var(--text-2);font-size:clamp(1rem,1.45vw,1.08rem);line-height:1.6
}
.abcdt-service-marketing-automation .mh__l em{ font-style:normal;color:var(--text) }
.abcdt-service-marketing-automation .mh__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 usages — une seule ligne de trois, sans filets verticaux :
   sur cette page rien n'est compartimenté.

   TRANSITION 1 · le fil ne s'arrête pas au bord du hero. Il se couche
   en un filet d'un pixel qui traverse les repères, allumé à droite —
   là où le fil sortait du cadre — et qui s'éteint vers la gauche. La
   même matière, aplatie, qui continue de courir pendant qu'on lit. */
.abcdt-service-marketing-automation .mh__r{
  position:relative;
  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.1rem,3vh,1.8rem)
}
.abcdt-service-marketing-automation .mh__r::before{
  content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--line) 34%, var(--line-2) 76%, rgba(232,232,240,.34) 100%)
}
.abcdt-service-marketing-automation .mh__ri b{
  display:block;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.45rem);letter-spacing:-.025em;color:var(--text)
}
.abcdt-service-marketing-automation .mh__ri span{ display:block;margin-top:.4rem;font-size:.92rem;color:var(--text-3) }
@media(min-width:768px){
  .abcdt-service-marketing-automation .mh__r{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,5vw,4rem) }
}

/* ═══════════════════════════════════════════════════════════════
   02 · CONVICTION — le fil passe derrière la phrase
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation .mc{ position:relative;padding:clamp(5rem,14vh,10rem) 0 }
.abcdt-service-marketing-automation .mc__band{ position:relative;isolation:isolate }
.abcdt-service-marketing-automation .mc__thread{
  position:absolute;z-index:0;margin:0;overflow:hidden;pointer-events:none;
  left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);
  top:50%;transform:translateY(-50%);
  height:clamp(96px,17vh,200px);opacity:.34;
  /* Le masque n'est plus symétrique : le fil est plein à droite et
     s'efface vers la gauche. Il ARRIVE de la section précédente, il n'y
     naît pas. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%)
}
.abcdt-service-marketing-automation .mc__thread img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2);
  transform:translate3d(var(--cx,0px),0,0) scale(1.08)
}
.abcdt-service-marketing-automation .mc__h{
  position:relative;z-index:1;margin:0;max-width:20ch;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.038em;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.05;color:var(--text-2);text-wrap:balance
}
.abcdt-service-marketing-automation .mc__h em{ font-style:normal;color:var(--text) }
.abcdt-service-marketing-automation .mc__body{
  margin-top:clamp(2.4rem,7vh,4rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem
}
.abcdt-service-marketing-automation .mc__p{ margin:0;max-width:60ch;color:var(--text-2);font-size:1rem;line-height:1.62 }
@media(min-width:900px){
  .abcdt-service-marketing-automation .mc__body{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem) }
  .abcdt-service-marketing-automation .mc__p{ max-width:none;font-size:.98rem }
}

/* ═══════════════════════════════════════════════════════════════
   03 · LA SÉQUENCE — la seule scène collante de la page

   --sq va de 0 à 1 sur la durée du pin, et pilote la translation de la
   piste. L'état par défaut CSS est une pile verticale : sans script et
   sous mouvement réduit, les quatre séquences sont lues normalement.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation .sq{ position:relative;padding:clamp(4rem,11vh,8rem) 0 0 }
.abcdt-service-marketing-automation .sq__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-marketing-automation .sq__track{ position:relative }
.abcdt-service-marketing-automation .sq__pin{ position:relative;isolation:isolate;overflow:hidden }

/* La bande de matière court SOUS les quatre panneaux, sans coupure.
   Elle est deux fois plus large que le cadre : elle glisse sans jamais
   découvrir de bord. */
.abcdt-service-marketing-automation .sq__ribbon{
  position:absolute;z-index:0;margin:0;overflow:hidden;
  left:0;right:0;bottom:0;
  height:clamp(150px,26vh,280px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 88%,transparent 100%)
}
.abcdt-service-marketing-automation .sq__ribbon img, .abcdt-service-marketing-automation .sq__rv{
  position:absolute;top:50%;left:50%;
  /* Une fois et demie la largeur du cadre — pas deux. À 200 % le plan
     source (1280 px de large) était affiché sur 2880 px, soit 2,25× sa
     résolution : mou. À 150 % il tombe à 1,7×, et la course restante
     suffit largement au glissement, que le script plafonne désormais sur
     le débordement réel.
     max-width:none lève le plafond posé par core.css sur img et video. */
  width:150%;max-width:none;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.16);opacity:.5;
  transform:translate3d(calc(-50% - var(--rx,0px)),-50%,0)
}
.abcdt-service-marketing-automation .sq__rv{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-service-marketing-automation .sq__rv.is-lit{ opacity:.5 }
.abcdt-service-marketing-automation .sq .tex{ z-index:1 }

.abcdt-service-marketing-automation .sq__rail{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr)
}
.abcdt-service-marketing-automation .sq__p{
  padding:clamp(2rem,6vh,3rem) var(--gut);
  border-top:1px solid var(--line)
}
.abcdt-service-marketing-automation .sq__p:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-marketing-automation .sq__t{
  margin:0 0 .8rem;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-marketing-automation .sq__n{
  margin:0 0 1rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1.06;color:var(--text)
}
.abcdt-service-marketing-automation .sq__d{ margin:0;color:var(--text-2);font-size:.98rem;line-height:1.62;max-width:52ch }
.abcdt-service-marketing-automation .sq__s{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;gap:.55rem;max-width:52ch
}
.abcdt-service-marketing-automation .sq__s li{
  position:relative;padding-left:1.3rem;
  font-size:.9rem;line-height:1.5;color:var(--text-3)
}
/* Un trait, pas une puce : le motif de la page jusque dans les listes. */
.abcdt-service-marketing-automation .sq__s li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:.7rem;height:1px;background:var(--line-2)
}

@media(min-width:900px){
  .abcdt-service-marketing-automation.abc-motion .sq__track{ height:340svh }
  /* Les panneaux sont centrés dans la moitié haute ; la bande de matière
     court en bas, sous eux. Le texte n'est jamais posé sur le plan —
     c'est la même matière, mais elle passe DESSOUS. */
  .abcdt-service-marketing-automation.abc-motion .sq__pin{
    position:sticky;top:0;height:100svh;
    display:flex;align-items:center;
    padding-bottom:clamp(160px,26vh,280px)
  }
  /* La piste : quatre panneaux côte à côte, tirés vers la gauche.
     grid-auto-columns et non repeat(minmax(0,…)) — sinon les colonnes
     se laissent écraser au lieu de tenir leur largeur.
     La réserve à droite vaut une demi-fenêtre : elle garantit que le
     quatrième panneau atteint bien le centre du cadre. */
  .abcdt-service-marketing-automation.abc-motion .sq__rail{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:clamp(320px,30vw,460px);
    column-gap:clamp(2.5rem,5vw,5rem);
    padding-left:var(--gut);padding-right:38vw;
    width:max-content;
    transform:translate3d(calc(var(--sq,0) * -1 * var(--run,0px)),0,0)
  }
  .abcdt-service-marketing-automation.abc-motion .sq__p{
    border:0;padding:0;
    /* Quatre états, pas deux — c'est ce qui donne la sensation d'un
       déplacement continu plutôt que d'un défilé de blocs :

       · loin      : reculé, flou, presque effacé ;
       · à venir   : il approche, il s'éclaircit déjà ;
       · au centre : net, et légèrement AVANCÉ vers le lecteur ;
       · passé     : il garde une trace — il ne s'éteint pas, il s'éloigne.

       Aucun rebond, aucun ressort : une seule courbe, la même partout. */
    opacity:.26;filter:blur(1.6px);
    transform:translate3d(0,1.4rem,0) scale(.985);
    transition:opacity .7s var(--e),filter .7s var(--e),transform .7s var(--e)
  }
  .abcdt-service-marketing-automation.abc-motion .sq__p.is-next{ opacity:.5;filter:blur(.9px);transform:translate3d(0,.8rem,0) scale(.99) }
  .abcdt-service-marketing-automation.abc-motion .sq__p.is-past{ opacity:.42;filter:blur(.7px);transform:translate3d(0,.4rem,0) scale(.995) }
  /* La trace du panneau qui vient de passer : un filet à gauche, qui
     reste allumé un moment après lui. */
  .abcdt-service-marketing-automation.abc-motion .sq__p.is-past .sq__t::before{
    content:'';position:absolute;left:-1.1rem;top:.1em;bottom:-.2em;width:1px;
    background:linear-gradient(to bottom, var(--line-2), transparent)
  }
  .abcdt-service-marketing-automation.abc-motion .sq__t{ position:relative }
  /* Dans la piste, la colonne est étroite : le texte se resserre pour
     que chaque panneau tienne dans la hauteur du cadre. */
  .abcdt-service-marketing-automation.abc-motion .sq__d{ font-size:.94rem;max-width:none }
  .abcdt-service-marketing-automation.abc-motion .sq__s{ margin-top:1.1rem;max-width:none }
  .abcdt-service-marketing-automation.abc-motion .sq__s li{ font-size:.86rem }
  /* Le panneau courant avance d'un cran vers le lecteur. Un cran, pas
     un bond : 1,5 % d'échelle et six pixels. */
  .abcdt-service-marketing-automation.abc-motion .sq__p.is-near{
    opacity:1;filter:none;transform:translate3d(0,-.35rem,0) scale(1.015)
  }
}

/* ═══════════════════════════════════════════════════════════════
   04 · LES OUTILS — respiration, aucun média
   ═══════════════════════════════════════════════════════════════ */
/* TRANSITION 2 · le ruban de la séquence s'aplatit. Le filet qui ferme
   l'en-tête des outils est allumé à GAUCHE — exactement là où la bande
   de matière quittait la scène précédente — puis s'éteint vers la
   droite. C'est le même trait, posé à plat. */
.abcdt-service-marketing-automation .ot{ position:relative;padding:clamp(4.5rem,12vh,9rem) 0 }
.abcdt-service-marketing-automation .ot__head{ position:relative;margin-bottom:clamp(2.5rem,7vh,4rem);padding-bottom:clamp(2rem,5vh,3rem) }
.abcdt-service-marketing-automation .ot__head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(232,232,240,.34) 0%, var(--line-2) 22%, var(--line) 60%, transparent 100%)
}
/* 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-marketing-automation .ot__l{
  list-style:none;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr)
}
.abcdt-service-marketing-automation .ot__i{ padding:clamp(1.5rem,4vh,2.2rem) 0;border-top:1px solid var(--line) }
.abcdt-service-marketing-automation .ot__i:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-marketing-automation .ot__k{
  margin:0 0 .6rem;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-marketing-automation .ot__n{
  margin:0 0 .8rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.12;color:var(--text)
}
.abcdt-service-marketing-automation .ot__p{ margin:0;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:56ch }
.abcdt-service-marketing-automation .ot__p .tlink{ margin-top:.6rem }
@media(min-width:900px){
  .abcdt-service-marketing-automation .ot__l{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,6vw,5rem) }
  /* La deuxième colonne est décalée d'un demi-pas : la lecture descend
     en quinconce, elle ne tombe pas en grille. */
  .abcdt-service-marketing-automation .ot__i:nth-child(even){ transform:translateY(clamp(1.5rem,4vh,2.6rem)) }
}

/* ═══════════════════════════════════════════════════════════════
   05 · LA RÉACTIVATION — la matière dort, puis se réveille

   --wk : 0 = éteint et arrêté, 1 = réveillé. L'état par défaut est 1.
   Le script le met à 0 au chargement, puis à 1 au passage.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation .rv{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(6rem,17vh,12rem) 0
}
.abcdt-service-marketing-automation .rv__media{ position:absolute;inset:0;z-index:0 }
/* Le réveil est long et il ne franchit qu'un seuil à la fois : la
   lumière d'abord, le contraste ensuite, la profondeur en dernier. Les
   trois durées sont volontairement différentes — c'est ce décalage qui
   fait qu'on sent quelque chose se rallumer au lieu de voir un fondu.
   La vitesse de la matière, elle, est tenue par le script. */
.abcdt-service-marketing-automation .rv__poster, .abcdt-service-marketing-automation .rv__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(calc(.92 + .36 * var(--wk,1)))
         brightness(calc(.22 + .8 * var(--wk,1)));
  opacity:calc(.26 + .56 * var(--wk,1));
  transform:scale(calc(1.015 + .075 * var(--wk,1)));
  transition:opacity 2.2s var(--e),filter 3.4s var(--e),transform 5s var(--e)
}
/* Tant que le plan dort, c'est le poster qu'on voit ; la vidéo ne prend
   le relais qu'au réveil. */
.abcdt-service-marketing-automation .rv__v{ opacity:0 }
.abcdt-service-marketing-automation .rv__v.is-lit{ opacity:calc(.3 + .5 * var(--wk,1)) }
.abcdt-service-marketing-automation .rv__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.5) 26%, rgba(6,6,10,.6) 72%, var(--ink) 100%),
    linear-gradient(88deg, rgba(6,6,10,.9) 0%, rgba(6,6,10,.44) 46%, rgba(6,6,10,.1) 100%)
}
.abcdt-service-marketing-automation .rv .tex{ z-index:1 }
.abcdt-service-marketing-automation .rv__in{ position:relative;z-index:2 }
.abcdt-service-marketing-automation .rv__h{
  margin:0;max-width:19ch;
  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-marketing-automation .rv__p{
  margin:clamp(1.4rem,3.5vh,2rem) 0 0;max-width:58ch;
  color:var(--text-2);font-size:1rem;line-height:1.62
}

/* ═══════════════════════════════════════════════════════════════
   06 · L'APPROCHE — le fil devient un filet

   --fill : la part du trait déjà parcourue. Le motif horizontal de la
   page se redresse ici en vertical : c'est le seul endroit où il change
   d'axe, et c'est ce qui marque la fin du chapitre.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation .ap{ position:relative;padding:clamp(4.5rem,12vh,9rem) 0 }
.abcdt-service-marketing-automation .ap__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-marketing-automation .ap__grid{ position:relative;display:grid;grid-template-columns:minmax(0,1fr) }
/* Le filet est calé sur la gouttière, pas sur le bord du bloc : il
   tombe exactement sous le surtitre de la section.

   TRANSITION 3 · il ne commence pas à zéro. Son sommet est déjà allumé,
   et une lueur très faible le prolonge vers le haut, vers la section de
   réactivation : c'est la lumière qu'on vient d'y rallumer qui descend
   alimenter la méthode. */
.abcdt-service-marketing-automation .ap{ isolation:isolate }
.abcdt-service-marketing-automation .ap::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;top:0;height:clamp(120px,20vh,220px);
  background:radial-gradient(46% 100% at var(--gut) 0%, rgba(232,232,240,.06), transparent 72%)
}
.abcdt-service-marketing-automation .ap__head, .abcdt-service-marketing-automation .ap__grid{ position:relative;z-index:1 }
.abcdt-service-marketing-automation .ap__line{
  position:absolute;left:var(--gut);top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom, var(--line-2) 0%, var(--line) 14%, var(--line) 100%);
  pointer-events:none
}
.abcdt-service-marketing-automation .ap__line i{
  position:absolute;left:0;top:0;width:1px;
  height:calc(var(--fill,1) * 100%);
  background:linear-gradient(to bottom, var(--line-2), rgba(232,232,240,.5));
  transition:height .25s linear
}
.abcdt-service-marketing-automation .ap__l{ list-style:none;margin:0;padding:0 0 0 clamp(1.4rem,4vw,3rem);counter-reset:ap }
.abcdt-service-marketing-automation .ap__i{ counter-increment:ap;padding:0 0 clamp(2.2rem,6vh,3.4rem) }
.abcdt-service-marketing-automation .ap__i:last-child{ padding-bottom:0 }
.abcdt-service-marketing-automation .ap__i::before{
  content:counter(ap,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-marketing-automation .ap__t{
  margin:0 0 .8rem;font-family:var(--ff-d);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.14;color:var(--text)
}
.abcdt-service-marketing-automation .ap__p{ margin:0;color:var(--text-2);font-size:.98rem;line-height:1.62;max-width:62ch }
.abcdt-service-marketing-automation .ap__k{ display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:1rem 0 0 }
.abcdt-service-marketing-automation .ap__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)
}
.abcdt-service-marketing-automation .ap__p .tlink{ margin-top:.6rem }

/* ═══════════════════════════════════════════════════════════════
   07 · CE QUE ÇA PRODUIT — résolution
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation .pd__cols{
  margin-top:clamp(2.4rem,6vh,3.4rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem
}
.abcdt-service-marketing-automation .pd__p{ margin:0;color:var(--text-2);font-size:1rem;line-height:1.62;max-width:58ch }
.abcdt-service-marketing-automation .pd__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-marketing-automation .pd__li{ padding:1.3rem 0;border-top:1px solid var(--line) }
.abcdt-service-marketing-automation .pd__li:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-marketing-automation .pd__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-marketing-automation .pd__li p{ margin:0;font-size:.92rem;line-height:1.58;color:var(--text-3);max-width:42ch }
@media(min-width:900px){
  .abcdt-service-marketing-automation .pd__cols{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem) }
  .abcdt-service-marketing-automation .pd__p{ max-width:none;font-size:.95rem }
  /* Correction issue de la revue croisée : les trois pages fermaient leur
     chapitre sur la même grille de trois colonnes séparées par des filets
     verticaux. Sur cette page, rien n'est jamais compartimenté — les
     livrables restent donc une suite, décalée en quinconce comme les
     outils, sans un seul trait vertical. */
  .abcdt-service-marketing-automation .pd__l{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2.5rem,6vw,5rem)
  }
  .abcdt-service-marketing-automation .pd__li:nth-child(even){ transform:translateY(clamp(1.5rem,4vh,2.6rem)) }
  .abcdt-service-marketing-automation .pd__li:last-child{ border-bottom:0 }
  .abcdt-service-marketing-automation .pd__li p{ max-width:46ch }
}

/* ═══════════════════════════════════════════════════════════════
   08 · AUTOUR DE L'AUTOMATION — 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-marketing-automation .rx{ position:relative;padding:clamp(4rem,10vh,7rem) 0;border-top:1px solid var(--line) }
.abcdt-service-marketing-automation .rx__head{ margin-bottom:clamp(2rem,5vh,3rem) }
.abcdt-service-marketing-automation .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-marketing-automation .rx__l{ list-style:none;margin:0 auto }
.abcdt-service-marketing-automation .rx__l li{ border-top:1px solid var(--line) }
.abcdt-service-marketing-automation .rx__l li:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-marketing-automation .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-marketing-automation .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-marketing-automation .rx__l a span{
  grid-column:1/-1;font-size:.84rem;color:var(--text-3);transition:color .25s var(--e)
}
.abcdt-service-marketing-automation .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-marketing-automation .rx__l a:hover b, .abcdt-service-marketing-automation .rx__l a:focus-visible b{ color:var(--blue-lift) }
.abcdt-service-marketing-automation .rx__l a:hover span, .abcdt-service-marketing-automation .rx__l a:focus-visible span{ color:var(--text-2) }
.abcdt-service-marketing-automation .rx__l a:hover::after, .abcdt-service-marketing-automation .rx__l a:focus-visible::after{ transform:translateX(5px);color:var(--blue-lift) }
@media(min-width:900px){
  .abcdt-service-marketing-automation .rx__l a{ grid-template-columns:minmax(0,18rem) minmax(0,1fr) auto }
  .abcdt-service-marketing-automation .rx__l a span{ grid-column:2;grid-row:1 }
  .abcdt-service-marketing-automation .rx__l a::after{ grid-column:3 }
}

/* ═══════════════════════════════════════════════════════════════
   RÉVÉLATIONS COMMUNES — même convention que les autres pages.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-marketing-automation.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.4rem,0) }
.abcdt-service-marketing-automation.abc-motion [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--e),transform .95s var(--e)
}
.abcdt-service-marketing-automation.abc-motion .ap__i, .abcdt-service-marketing-automation.abc-motion .ot__i{ opacity:0;transform:translate3d(0,2rem,0) }
.abcdt-service-marketing-automation.abc-motion .ap__i.is-in, .abcdt-service-marketing-automation.abc-motion .ot__i.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--e),transform 1s var(--e)
}
/* En quinconce, la révélation ne doit pas annuler le décalage. */
@media(min-width:900px){
  .abcdt-service-marketing-automation.abc-motion .ot__i:nth-child(even){ transform:translate3d(0,calc(2rem + clamp(1.5rem,4vh,2.6rem)),0) }
  .abcdt-service-marketing-automation.abc-motion .ot__i:nth-child(even).is-in{ transform:translateY(clamp(1.5rem,4vh,2.6rem)) }
}

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

   Aucune vidéo, aucune transition, aucune scène collante, aucune piste
   horizontale. Les états par défaut du CSS étant déjà les états
   aboutis, il suffit de couper le mouvement.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .abcdt-service-marketing-automation .mh__v, .abcdt-service-marketing-automation .mh__tv, .abcdt-service-marketing-automation .sq__rv, .abcdt-service-marketing-automation .rv__v{ display:none }
  /* La doublure et la glissée de lumière ne servent qu'au mouvement :
     sans mouvement elles n'ont pas de raison d'être. */
  .abcdt-service-marketing-automation .mh__back, .abcdt-service-marketing-automation .mh__glow{ display:none }
  .abcdt-service-marketing-automation .mh__poster, .abcdt-service-marketing-automation .mc__thread img, .abcdt-service-marketing-automation .sq__ribbon img, .abcdt-service-marketing-automation .mh__front{ transform:none }
  .abcdt-service-marketing-automation .rv__poster, .abcdt-service-marketing-automation .ap__line i, .abcdt-service-marketing-automation .sq__p, .abcdt-service-marketing-automation .rx__l a, .abcdt-service-marketing-automation .rx__l a b, .abcdt-service-marketing-automation .rx__l a span, .abcdt-service-marketing-automation .rx__l a::after{ transition:none }
  .abcdt-service-marketing-automation .rv__poster{ filter:grayscale(1) contrast(1.25) brightness(1);opacity:.8;transform:none }
  .abcdt-service-marketing-automation .ap__line i{ height:100% }
}

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

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