/* ═══════════════════════════════════════════════════════════════════════
   ABC DIGITAL TOUCH — Page service « Stratégie d'acquisition digitale »
   Généré par scripts/build-service.py — ne pas éditer à la main.

   TOUT est scopé sous .abcdt-service-acquisition. Aucune règle ne touche html,
   body, a, button, img ni les titres globaux : header et pied de page
   Elementor, Axeptio et HubSpot ne sont pas affectés.

   Les règles html{} et body{} du prototype sont retirées du scope, mais
   leurs déclarations sont REPORTÉES ci-dessous sur le wrapper. C'est
   exactement ce qui avait manqué lors du premier déploiement de la
   homepage, où le H1 s'était retrouvé gris foncé.
   ═══════════════════════════════════════════════════════════════════════ */

.abcdt-service-acquisition{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ff-b);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  position:relative;
  isolation:isolate;
}

/* Réinitialisation locale, strictement bornée au module. */
.abcdt-service-acquisition *,
.abcdt-service-acquisition *::before,
.abcdt-service-acquisition *::after{ box-sizing:border-box }

/* Marges de flux du navigateur : elles disparaissent avec body{}, il faut
   les redonner explicitement, sinon les titres se collent. */
.abcdt-service-acquisition h1,.abcdt-service-acquisition h2,.abcdt-service-acquisition h3,.abcdt-service-acquisition h4,.abcdt-service-acquisition h5,.abcdt-service-acquisition h6,
.abcdt-service-acquisition p,.abcdt-service-acquisition ul,.abcdt-service-acquisition ol,.abcdt-service-acquisition dl,.abcdt-service-acquisition figure,.abcdt-service-acquisition blockquote{
  color:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none
}
.abcdt-service-acquisition img,.abcdt-service-acquisition video,.abcdt-service-acquisition canvas{ display:block;max-width:100% }
.abcdt-service-acquisition a{ color:inherit }
.abcdt-service-acquisition button,.abcdt-service-acquisition input,.abcdt-service-acquisition select,.abcdt-service-acquisition textarea{
  font-family:inherit;font-size:inherit;font-weight:inherit;
  font-style:inherit;line-height:normal;color:inherit;letter-spacing:inherit
}
.abcdt-service-acquisition ::selection{ background:var(--blue);color:var(--on-blue) }
.abcdt-service-acquisition :focus-visible{ outline:2px solid var(--blue-lift);outline-offset:4px;border-radius:2px }

/* ═══════════════════════════════════════════════════════════════════════
   ABC DIGITAL TOUCH — Homepage V1
   Direction A — Le Montage.

   Deux régimes :
   · par défaut   → tout est visible, le hero fait un écran. C'est ce que
                    voient les visiteurs sans JS et sous reduced-motion.
   · .js-motion   → hero en sticky sur 3 plans, révélations au scroll.

   Le bleu est rare : accents de CTA uniquement. Tout le reste est
   noir, blanc et image.
   ═══════════════════════════════════════════════════════════════════════ */

.abcdt-service-acquisition{
  --ink:#06060A;
  --ink-2:#0B0B11;
  --ink-3:#13131E;           /* fonds de survol — défini ici, jamais hérité */
  --text:#E8E8F0;
  --text-2:#B8B8C4;
  --text-3:#9A9AB4;          /* plancher texte — 7,37:1 sur --ink */
  --line:rgba(232,232,240,.12);
  --line-2:rgba(232,232,240,.26);
  --blue:#1A6FFF;
  --blue-lift:#4A8CFF;
  --on-blue:#06060A;

  --ff-d:'Syne',system-ui,sans-serif;
  --ff-b:'DM Sans',system-ui,sans-serif;

  --e:cubic-bezier(.16,1,.3,1);
  --nav-h:76px;
  --gut:1.5rem;
  --maxw:1360px;
  --hero-scroll:2600px;
}
@media(min-width:768px){ .abcdt-service-acquisition{ --gut:2.5rem } }
@media(min-width:1200px){ .abcdt-service-acquisition{ --gut:4rem } }

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

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



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



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

.abcdt-service-acquisition .skip{
  position:fixed;top:.75rem;left:.75rem;z-index:300;
  padding:.7rem 1.1rem;background:var(--blue);color:var(--on-blue);
  font-weight:500;font-size:.9rem;border-radius:4px;text-decoration:none;
  transform:translateY(-180%);transition:transform .25s var(--e)
}
.abcdt-service-acquisition .skip:focus-visible{transform:translateY(0)}

/* ── Typographie commune ───────────────────────────────────────── */
.abcdt-service-acquisition .eyebrow{
  margin:0 0 1.5rem;font-size:.7rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition .h2{
  margin:0;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.04;letter-spacing:-.032em;
  text-wrap:balance;max-width:17ch
}
.abcdt-service-acquisition .h2--lg{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch}
.abcdt-service-acquisition .h2--xl{font-size:clamp(2.3rem,6.6vw,5rem);max-width:14ch;font-weight:800}
.abcdt-service-acquisition .lede{margin:1.6rem 0 0;max-width:56ch;color:var(--text-3);font-size:1.02rem}

/* Lien typographique — remplace les boutons pleins partout sauf le skip. */
.abcdt-service-acquisition .tlink{
  display:inline-flex;align-items:center;gap:.6rem;
  background:none;border:0;padding:.35rem 0;cursor:pointer;
  font-family:var(--ff-b);font-size:1rem;font-weight:500;color:var(--text);
  text-decoration:none;letter-spacing:.005em;
  border-bottom:1px solid var(--line-2);
  transition:color .25s var(--e),border-color .25s var(--e)
}
.abcdt-service-acquisition .tlink::after{content:'→';transition:transform .3s var(--e)}
.abcdt-service-acquisition .tlink:hover{color:var(--blue-lift);border-bottom-color:var(--blue)}
.abcdt-service-acquisition .tlink:hover::after{transform:translateX(5px)}
.abcdt-service-acquisition .tlink--lg{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:-.01em}
/* Lien secondaire : plus petit, sans filet, il ne concurrence jamais
   le lien principal. Signalé par la flèche et le contraste seuls. */
.abcdt-service-acquisition .tlink--min{
  border-bottom:0;padding:0;font-size:.92rem;color:var(--text-3);letter-spacing:.01em
}
.abcdt-service-acquisition .tlink--min::after{font-size:.9em}
.abcdt-service-acquisition .tlink--min:hover{color:var(--text)}


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

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

.abcdt-service-acquisition .sec--rule{border-top:1px solid var(--line)}

/* Grain — technique reprise de Card with Noise Pattern (@Ali-Hussein-dev) :
   une turbulence SVG tuilée, posée en data-URI, sans requête réseau ni
   WebGL. C'est ce qui donne au noir sa matière plutôt qu'une couleur.
   Le même motif sert au hero et aux quatre zones retravaillées. */
.abcdt-service-acquisition .tex{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.05;mix-blend-mode:overlay;background-size:200px 200px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* Le lien de fin de chapitre respire toujours de la même façon. */
.abcdt-service-acquisition .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). */
.abcdt-service-acquisition .abc-cursor{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:0;transition:opacity .35s var(--e);contain:strict
}
.abcdt-service-acquisition .abc-cursor.is-on{opacity:1}


/* ═══════════════════════════════════════════════════════════════════════
   ABC DIGITAL TOUCH — Stratégie d'acquisition digitale
   Direction artistique : « LE SIGNAL DANS LE BRUIT »

   Le principe : la matière filmée porte la dispersion, la typographie
   porte la direction, et les deux sont composités l'un dans l'autre.
   Le film n'est jamais une illustration posée derrière du texte — il
   est vu À TRAVERS les lettres, ou découpé PAR elles.

   Ce que la page emprunte à la homepage : les tokens, la grille .wrap,
   Syne / DM Sans, le grain .tex, le curseur tube, le bleu rare, le
   lien typographique. Ce qu'elle fait autrement : elle est plus
   contrastée en rythme, et elle contient un seul passage clair — les
   livrables — qui sert de respiration.

   Aucune palette nouvelle. Le bleu apparaît trois fois dans la page.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════
   01 · HERO — typographie × vidéo
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .hv{ position:relative }

.abcdt-service-acquisition .hv__stage{
  position:relative;
  min-height:100svh;
  /* isolation : le multiply de la plaque ne doit jamais se mélanger
     avec le fond de la page, seulement avec le plan. */
  isolation:isolate;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 4vh) 0 0;
  background:var(--ink);
}

/* Repli garanti : si ni la vidéo ni le poster ne chargent, il reste une
   matière grise sous la plaque, donc des lettres visibles. Sans ce
   filet, un multiply sur du noir pur rendrait le H1 invisible. */
.abcdt-service-acquisition .hv__media{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 60% at 34% 44%,#3a3a46,#0d0d14 76%)
}
.abcdt-service-acquisition .hv__v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:34% 50%;
  /* Mécanique C : le plan est sur-cadré et se resserre au défilement.
     --hp est écrit par le script, 0 → 1 sur la traversée du hero. */
  transform:scale(calc(1.12 - var(--hp,0) * .07)) translate3d(0,calc(var(--hp,0) * -4vh),0);
  transform-origin:34% 50%;
  will-change:transform;
  /* Les noirs du plan sont relevés et le contraste abaissé : sous
     multiply, une zone de fumée trop sombre rendrait la lettre
     illisible. Le H1 ne descend jamais sous un gris moyen. */
  filter:grayscale(1) contrast(.86) brightness(1.42);
}

/* La plaque d'encre. Noir pur au centre — là où sont les lettres — et
   très légèrement relevée aux bords, pour que la fumée reste devinée
   en périphérie plutôt que supprimée. */
.abcdt-service-acquisition .hv__cut{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:flex-start;
  /* Le titre occupe la moitié haute ; la moitié basse est réservée au
     calque lisible. Les deux ne se croisent jamais. */
  padding-top:calc(var(--nav-h) + 12vh);
  mix-blend-mode:multiply;
  /* Noir franc sur toute la zone du titre : le film n'existe que dans
     les lettres. La matière ne remonte que dans les angles, très peu,
     pour que le cadre ait un fond et non un vide. */
  background:radial-gradient(135% 96% at 30% 40%,
    #06060A 0%, #06060A 52%, #0b0b12 74%, #16161e 100%);
}
.abcdt-service-acquisition .hv__cut > .wrap{ width:100% }
.abcdt-service-acquisition .hv__h1{
  margin:0 0 0 -.055em;
  font-family:var(--ff-d);font-weight:800;
  /* Plancher : la ligne large tient dans la gouttière à 320px.
     Palier haut atteint dès 1137px — au-delà, l'échelle ne bouge plus. */
  font-size:clamp(1.72rem,8.6vw,5.4rem);
  line-height:.94;letter-spacing:-.042em;
  /* Blanc pur : c'est lui qui laisse passer le film. */
  color:#fff;
}
.abcdt-service-acquisition .hv__h1 span{ display:block;overflow:hidden }
.abcdt-service-acquisition .hv__h1 i{ display:block;font-style:normal }

/* Lever de rideau, ligne à ligne. */
.abcdt-service-acquisition.abc-motion .hv__h1 i{ transform:translateY(104%) }
.abcdt-service-acquisition.abc-motion .hv.is-in .hv__h1 i{
  transform:none;transition:transform 1.15s cubic-bezier(.2,1,.32,1)
}
.abcdt-service-acquisition.abc-motion .hv.is-in .hv__h1 span:nth-child(2) i{ transition-delay:.1s }
.abcdt-service-acquisition.abc-motion .hv.is-in .hv__h1 span:nth-child(3) i{ transition-delay:.2s }

/* Le calque non mélangé : tout ce qui doit rester lisible. Son fond est
   la scène déjà noircie par la plaque, donc le contraste est franc. */
.abcdt-service-acquisition .hv__over{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  flex:1;padding-bottom:clamp(2rem,5vh,3.5rem);
  /* Réserve : sous cette ligne, le titre n'arrive jamais. Elle suit la
     hauteur réelle du H1, qui est trois fois plus courte au téléphone —
     sans quoi le premier écran s'ouvre sur un trou. */
  padding-top:clamp(10.5rem,34vh,15rem);
  pointer-events:none;
}
.abcdt-service-acquisition .hv__over a{ pointer-events:auto }

.abcdt-service-acquisition .hv__grid{ margin-top:auto }
.abcdt-service-acquisition .hv__k{
  display:flex;align-items:center;gap:.9rem;margin:0 0 clamp(1.4rem,4vh,2.4rem)
}
.abcdt-service-acquisition .hv__k i{ display:block;width:clamp(24px,4vw,46px);height:1px;background:var(--line-2);flex:none }
.abcdt-service-acquisition .hv__lead{
  margin:0;max-width:46ch;color:var(--text-2);
  font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.6
}
.abcdt-service-acquisition .hv__acts{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.4rem,3vw,2.8rem);margin:clamp(1.8rem,4vh,2.6rem) 0 0
}
.abcdt-service-acquisition .hv__scroll{ display:none }

@media(min-width:900px){
  .abcdt-service-acquisition .hv__grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(3rem,7vw,6.5rem);align-items:end
  }
  .abcdt-service-acquisition .hv__k{ grid-column:1 / -1 }
  .abcdt-service-acquisition .hv__col{ grid-column:2 }
  .abcdt-service-acquisition .hv__over{ position:relative;padding-top:clamp(15rem,44vh,26rem) }
  .abcdt-service-acquisition .hv__scroll{
    display:flex;align-items:center;gap:.7rem;
    margin:clamp(1.6rem,4vh,2.4rem) var(--gut) 0 auto;
    font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3)
  }
  .abcdt-service-acquisition .hv__scroll i{
    display:block;width:1px;height:34px;background:var(--line-2);
    transform-origin:top;animation:abcdtsvc_hvDrop 2.4s var(--e) infinite
  }
}
@keyframes abcdtsvc_hvDrop{ 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }

/* ═══════════════════════════════════════════════════════════════
   02 · DIRECTION — le moment signature
   Séquence épinglée. Le Canvas occupe toute la scène ; le texte réel
   vit au-dessus, en petit, sur un fond assombri.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .dir{ position:relative;background:var(--ink) }
.abcdt-service-acquisition .dir__track{ position:relative }
.abcdt-service-acquisition .dir__stage{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 6vh) 0 clamp(2.5rem,6vh,4rem);
}
/* Sans mouvement, la séquence n'est qu'une section : pas de piste
   longue, pas d'épinglage, le mot est déjà convergé. */
/* La piste est plus courte au pouce qu'à la molette : la séquence
   garde ses quatre états, mais demande deux écrans de moins. */
.abcdt-service-acquisition.abc-motion .dir__track{ height:230svh }
@media(min-width:768px){ .abcdt-service-acquisition.abc-motion .dir__track{ height:290svh } }
.abcdt-service-acquisition.abc-motion .dir__stage{
  position:sticky;top:0;height:100svh;min-height:0
}

/* ── Traitement tonal du voile ────────────────────────────────────
   plan-03 est un négatif : de l'encre sombre sur fond blanc. Posé tel
   quel à faible opacité, il ne donne qu'un voile gris qui éteint le
   noir — c'était le défaut. On l'INVERSE : les filaments d'encre
   deviennent de la lumière sur du noir. On peut alors monter
   franchement le niveau sans perdre le fond.

   Le plan reste intact — c'est un étalonnage, pas un remplacement.
   Et l'inversion ne concerne que le voile CSS : le Canvas lit la
   vidéo brute, donc la matière DANS les lettres est inchangée.

   Trois niveaux, réglés ici et nulle part ailleurs. Pour comparer :
   ajouter .dir--ton-a ou .dir--ton-c sur la section, ou charger la
   page avec ?ton=a / ?ton=b / ?ton=c. */
.abcdt-service-acquisition .dir{
  /* B — BALANCED (par défaut) : la matière est franchement lisible,
     le fond reste noir. */
  --v-op:.30;
  --v-bright:1.06;
  --v-contrast:1.20;
  --v-veil:.46;
}
.abcdt-service-acquisition .dir--ton-a{                 /* A — SUBTIL : un cran au-dessus de l'ancien. */
  --v-op:.19; --v-bright:1.0; --v-contrast:1.28; --v-veil:.52
}
.abcdt-service-acquisition .dir--ton-c{                 /* C — CINEMATIC : matière très présente. */
  --v-op:.46; --v-bright:1.14; --v-contrast:1.10; --v-veil:.40
}

/* Le plan est visible dès le départ : l'élément <video> peint son
   poster, donc gater son opacité sur le décodage revenait à masquer
   AUSSI le repli. Une section n'est jamais vide, quel que soit l'état
   du réseau. */
.abcdt-service-acquisition .dir__v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;z-index:0;
  opacity:var(--v-op);transition:opacity 1.2s var(--e);
  filter:invert(1) grayscale(1)
         brightness(var(--v-bright)) contrast(var(--v-contrast));
  /* plan-03 a une masse noire en bas de cadre : inversée, elle devient
     une plaque pâle qui inonderait la moitié basse. On dissout donc le
     voile avant elle. La bande de texte reçoit ainsi de la matière en
     haut et du noir franc en bas, sans avoir à renoircir l'image. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.35) 58%,transparent 74%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.35) 58%,transparent 74%);
}
/* Le même plan, concentré dans les lettres et dilué derrière — le
   signal et le bruit sont de la même étoffe. */

/* Voile LOCAL, sous la bande de texte uniquement. On ne renoircit
   jamais toute l'image pour sauver la lisibilité : on pose une ombre
   là où le texte se trouve, et elle s'arrête avant le mot. */
.abcdt-service-acquisition .dir__scrim{
  position:absolute;inset:auto 0 0 0;height:62%;z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(6,6,10,calc(var(--v-veil) * .45)) 34%,
    rgba(6,6,10,var(--v-veil)) 68%,
    rgba(6,6,10,calc(var(--v-veil) * .92)) 100%)
}
.abcdt-service-acquisition .dir__c{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;pointer-events:none
}
.abcdt-service-acquisition .dir .tex{ z-index:3 }

/* La bande réservée à la phrase : elle commence sous le mot. Au
   téléphone le mot est plus court, et surtout la phrase et les deux
   paragraphes prennent plus de lignes : la réserve est réduite pour
   que tout tienne dans l'écran épinglé, sans rien couper. */
.abcdt-service-acquisition .dir__ui{ position:relative;z-index:4;margin:46svh 0 auto }
@media(min-width:900px){ .abcdt-service-acquisition .dir__ui{ margin:42svh 0 auto } }
.abcdt-service-acquisition .dir__k{ margin:0 0 clamp(1.2rem,3vh,1.8rem) }
.abcdt-service-acquisition .dir__h{
  margin:0;max-width:20ch;
  font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.3;letter-spacing:-.018em;
  color:var(--text-2);text-wrap:balance
}
/* Le bloc reste posé pendant toute la séquence épinglée.

   Il s'effaçait auparavant au milieu du défilement (--dp) puis revenait
   au climax (.is-end) : dans un écran épinglé de 340 svh, le lecteur le
   voyait donc apparaître, disparaître, puis réapparaître — soit DEUX
   lectures du même contenu. C'était la cause de la duplication.
   Une seule occurrence dans le DOM, désormais une seule à l'écran. */

/* La retombée : en flux, après la piste épinglée. */
.abcdt-service-acquisition .dir__foot{
  position:relative;z-index:4;
  padding:clamp(3rem,9vh,6rem) 0 clamp(4rem,11vh,7rem)
}
.abcdt-service-acquisition .dir__fgrid{ display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.9rem,2.2vh,1.8rem) }
.abcdt-service-acquisition .dir__p{
  margin:0;max-width:52ch;color:var(--text-3);
  font-size:clamp(.9rem,1.1vw,.98rem);line-height:1.6
}

@media(min-width:900px){
  .abcdt-service-acquisition .dir__fgrid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(3rem,7vw,6.5rem)
  }
}

/* ═══════════════════════════════════════════════════════════════
   03 · CE QUE ÇA RÉSOUT — trois territoires, une seule scène

   Une scène épinglée pour les trois situations (230 svh au lieu de
   3 × 172). Ce qui porte la section n'est plus le texte qui se
   déplace : c'est un plan vidéo vu à travers trois masques, un par
   territoire, qui se referment à mesure que la résolution arrive.

   Deux variables écrites par le script :
     --p   progression dans la situation courante   0 → 1
     et une classe .is-a / .is-b / .is-c sur la scène.

   Les masques sont imbriqués — enveloppe sur .si__media, motif sur
   .si__v — plutôt que composés avec mask-composite, dont la syntaxe
   diverge encore entre WebKit et le standard.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .si{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0 0 }
.abcdt-service-acquisition .si__head{ margin-bottom:clamp(2.5rem,7vh,4rem) }
.abcdt-service-acquisition .si__track{ position:relative }
.abcdt-service-acquisition .si__stage{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);
  display:flex;align-items:center;
  padding:clamp(3rem,8vh,5rem) 0
}

/* ── La matière ─────────────────────────────────────────────────
   Elle occupe la moitié gauche et déborde du cadre : elle n'est pas
   un rectangle posé derrière le texte, c'est un pan de l'écran. */
.abcdt-service-acquisition .si__media{
  position:absolute;left:0;top:0;bottom:0;width:min(58%,760px);
  z-index:0;overflow:hidden
}
.abcdt-service-acquisition .si__v{
  position:absolute;inset:-6% -4%;width:108%;height:112%;
  object-fit:cover;object-position:32% 50%;
  filter:grayscale(1) contrast(1.05) brightness(1.16);
  opacity:.9;transition:opacity 1.1s var(--e)
}

/* A · DISPERSION — des fentes désynchronisées qui se rejoignent.
   Chaque fente montre un fragment du même plan : plusieurs signaux,
   aucun alignement. En fin de course elles se touchent : un cadre. */
.abcdt-service-acquisition .si__stage.is-a .si__v{
  -webkit-mask-image:repeating-linear-gradient(97deg,
    #000 0 calc(2.5% + var(--p,0) * 10%),
    transparent calc(2.5% + var(--p,0) * 10%) 12.5%);
  mask-image:repeating-linear-gradient(97deg,
    #000 0 calc(2.5% + var(--p,0) * 10%),
    transparent calc(2.5% + var(--p,0) * 10%) 12.5%)
}
.abcdt-service-acquisition .si__stage.is-a .si__media{
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%);
  mask-image:linear-gradient(to right,#000 62%,transparent 100%)
}

/* B · FLOU / FOCUS — une ouverture hors axe, molle et trop grande,
   qui se recentre et se resserre. Pas de blur : c'est le CADRAGE qui
   est instable, pas l'image. */
.abcdt-service-acquisition .si__stage.is-b .si__v{
  -webkit-mask-image:radial-gradient(
    calc(86% - var(--p,0) * 26%) calc(104% - var(--p,0) * 14%)
    at calc(22% + var(--p,0) * 24%) calc(34% + var(--p,0) * 14%),
    #000 calc(18% + var(--p,0) * 46%), transparent calc(66% + var(--p,0) * 28%));
  mask-image:radial-gradient(
    calc(86% - var(--p,0) * 26%) calc(104% - var(--p,0) * 14%)
    at calc(22% + var(--p,0) * 24%) calc(34% + var(--p,0) * 14%),
    #000 calc(18% + var(--p,0) * 46%), transparent calc(66% + var(--p,0) * 28%));
  object-position:calc(46% - var(--p,0) * 14%) 50%
}
.abcdt-service-acquisition .si__stage.is-b .si__media{ -webkit-mask-image:none;mask-image:none }

/* C · FRAGILITÉ → SYSTÈME — des modules isolés, tous différents,
   qui deviennent une répétition complète et régulière. */
.abcdt-service-acquisition .si__stage.is-c .si__v{
  -webkit-mask-image:repeating-linear-gradient(to right,
    #000 0 calc(3.5% + var(--p,0) * 8.5%),
    transparent calc(3.5% + var(--p,0) * 8.5%) 12%);
  mask-image:repeating-linear-gradient(to right,
    #000 0 calc(3.5% + var(--p,0) * 8.5%),
    transparent calc(3.5% + var(--p,0) * 8.5%) 12%)
}
.abcdt-service-acquisition .si__stage.is-c .si__media{
  -webkit-mask-image:linear-gradient(to bottom,
    transparent calc(26% - var(--p,0) * 26%), #000 calc(34% - var(--p,0) * 34%),
    #000 calc(66% + var(--p,0) * 34%), transparent calc(74% + var(--p,0) * 26%));
  mask-image:linear-gradient(to bottom,
    transparent calc(26% - var(--p,0) * 26%), #000 calc(34% - var(--p,0) * 34%),
    #000 calc(66% + var(--p,0) * 34%), transparent calc(74% + var(--p,0) * 26%))
}

/* Le raccord entre la matière et le texte : une ombre portée, pas un
   bord net. Sans elle la vidéo découperait un rectangle. */
.abcdt-service-acquisition .si__edge{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(6,6,10,.72) 0%, rgba(6,6,10,.1) 26%,
                    rgba(6,6,10,.6) 44%, var(--ink) 62%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 16%,
                    transparent 84%, var(--ink) 100%)
}
.abcdt-service-acquisition .si .tex{ z-index:2 }

/* ── Le texte ───────────────────────────────────────────────────── */
.abcdt-service-acquisition .si__in{ position:relative;z-index:3;width:100% }
.abcdt-service-acquisition .si__l{ list-style:none;margin:0;padding:0;position:relative }
.abcdt-service-acquisition .si__i{
  display:grid;gap:.9rem;
  grid-column:1;grid-row:1
}
.abcdt-service-acquisition .si__k{
  margin:0;font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition .si__t{
  margin:0;max-width:17ch;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(1.55rem,3.6vw,2.9rem);line-height:1.06;color:var(--text);
  text-wrap:balance
}
.abcdt-service-acquisition .si__p{
  margin:0;max-width:42ch;color:var(--text-2);
  font-size:.98rem;line-height:1.6
}
.abcdt-service-acquisition .si__to{
  margin:clamp(1.2rem,3.5vh,2rem) 0 0;display:grid;gap:.55rem;
  padding-top:clamp(1.2rem,3.5vh,2rem);
  border-top:1px solid var(--line-2)
}
.abcdt-service-acquisition .si__lab{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition .si__fix{
  font-family:var(--ff-d);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(1.1rem,2.2vw,1.6rem);line-height:1.22;color:var(--text);
  max-width:24ch
}

/* ── Régime épinglé ─────────────────────────────────────────────── */
@media(min-width:900px){
  .abcdt-service-acquisition.abc-motion .si__track{ height:230svh }
  .abcdt-service-acquisition.abc-motion .si__stage{
    position:sticky;top:0;height:100svh;padding:0
  }
  .abcdt-service-acquisition .si__in{ display:grid;grid-template-columns:minmax(0,1fr) }
  .abcdt-service-acquisition .si__l{ display:grid;margin-left:auto;width:min(46%,520px) }
  /* Les trois textes occupent la même case : ils se substituent au
     lieu de se suivre. C'est ce qui permet une scène unique. */
  /* La sortie est plus courte que l'entrée, et l'entrée attend que la
     sortie soit finie : sans ce décalage les deux textes se croisent à
     mi-opacité et deviennent illisibles. */
  .abcdt-service-acquisition.abc-motion .si__i{
    opacity:0;transform:translate3d(0,1.2rem,0);
    transition:opacity .22s var(--e),transform .3s var(--e);
    pointer-events:none
  }
  .abcdt-service-acquisition.abc-motion .si__i.is-on{
    opacity:1;transform:none;pointer-events:auto;
    transition:opacity .42s var(--e) .2s,transform .55s var(--e) .2s
  }
}

/* ── Au pouce : la matière reste, la scène se déroule ───────────── */
@media(max-width:899px){
  .abcdt-service-acquisition .si__stage{ display:block;padding:0 }
  .abcdt-service-acquisition .si__media{
    position:relative;width:100%;height:clamp(220px,42svh,340px);
    inset:auto
  }
  .abcdt-service-acquisition .si__stage .si__v{ opacity:.9 }
  .abcdt-service-acquisition .si__edge{
    background:linear-gradient(to bottom, rgba(6,6,10,.55) 0%,
      transparent 34%, transparent 62%, var(--ink) 100%)
  }
  .abcdt-service-acquisition .si__in{ padding-top:clamp(2rem,6vh,3rem) }
  .abcdt-service-acquisition .si__l{ display:grid;gap:0 }
  .abcdt-service-acquisition .si__i{
    grid-column:auto;grid-row:auto;
    padding:clamp(2rem,6vh,3rem) 0;border-top:1px solid var(--line)
  }
  .abcdt-service-acquisition .si__i:first-child{ border-top:0;padding-top:0 }
  .abcdt-service-acquisition .si__i:last-child{ padding-bottom:0 }
}

/* ═══════════════════════════════════════════════════════════════
   04 · APPROCHE — quatre états d'une même scène
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .mth{ position:relative;padding:clamp(5rem,13vh,9.5rem) 0;border-top:1px solid var(--line) }
.abcdt-service-acquisition .mth__in{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,6vh,4rem);margin-top:clamp(3rem,8vh,5rem)
}
.abcdt-service-acquisition .mth__side{ display:none }
.abcdt-service-acquisition .mth__l{ list-style:none;margin:0;padding:0 }
.abcdt-service-acquisition .mth__i{ padding:clamp(1.8rem,4.5vh,2.8rem) 0;border-top:1px solid var(--line) }
.abcdt-service-acquisition .mth__i:last-child{ border-bottom:1px solid var(--line) }
/* Le libellé ne répète plus le rang : le chiffre géant de la colonne
   de gauche le porte déjà. Un seul index par étape, pas deux. */
.abcdt-service-acquisition .mth__n{
  margin:0 0 .8rem;font-family:var(--ff-d);font-weight:700;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3)
}
.abcdt-service-acquisition .mth__t{
  margin:0;max-width:24ch;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.026em;
  font-size:clamp(1.15rem,2.3vw,1.65rem);line-height:1.2;color:var(--text);
  text-wrap:balance
}
.abcdt-service-acquisition .mth__p{
  margin:.9rem 0 0;max-width:56ch;color:var(--text-3);
  font-size:.98rem;line-height:1.62
}

@media(min-width:960px){
  .abcdt-service-acquisition .mth__in{
    grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
    column-gap:clamp(3rem,7vw,6.5rem);align-items:start
  }
  .abcdt-service-acquisition .mth__side{ display:block;position:sticky;top:calc(var(--nav-h) + 14vh) }
  /* Le chiffre géant, en creux. Un seul à la fois, même case. */
  /* Calibré sur « 01 » à 2,01 x la taille de police : au-delà, le
     chiffre mordrait sur la gouttière de la colonne de droite. */
  .abcdt-service-acquisition .mth__stage{ position:relative;height:1em;font-size:clamp(5rem,12vw,10rem) }
  /* Le chiffre était en contour 1px à 26 % : à cette échelle il se
     perdait dans le fond pendant le défilement. Il garde son
     traitement en creux — c'est la DA — mais gagne trois choses :
     un remplissage très bas qui lui donne un corps, un contour deux
     fois et demie plus présent, et une lueur large et douce qui le
     décolle du noir sans jamais devenir néon. */
  .abcdt-service-acquisition .mth__g{
    position:absolute;inset:0;display:block;
    font-family:var(--ff-d);font-weight:800;font-size:1em;line-height:1;
    letter-spacing:-.055em;font-variant-numeric:tabular-nums;
    color:rgba(232,232,240,.055);
    -webkit-text-stroke:1.5px rgba(232,232,240,.34);
    opacity:0;transform:translateY(.1em) scale(.97);
    transition:opacity .6s var(--e),transform .6s var(--e)
  }
  /* Seul le chiffre de l'étape en cours est visible : c'est lui qui
     doit être franc. */
  .abcdt-service-acquisition .mth__g.is-on{
    opacity:1;transform:none;
    color:rgba(232,232,240,.11);
    -webkit-text-stroke:1.5px rgba(232,232,240,.66);
    filter:drop-shadow(0 0 26px rgba(232,232,240,.13))
  }
  .abcdt-service-acquisition:not(.abc-motion) .mth__g{ opacity:1;transform:none }
  .abcdt-service-acquisition:not(.abc-motion) .mth__g + .mth__g{ display:none }
  .abcdt-service-acquisition .mth__rail{
    position:relative;height:2px;margin-top:clamp(2rem,5vh,3rem);
    background:var(--line);overflow:hidden
  }
  .abcdt-service-acquisition .mth__rail i{
    position:absolute;inset:0 auto 0 0;display:block;width:0;
    background:var(--text);transition:width .3s linear
  }
  .abcdt-service-acquisition .mth__i{ padding-block:clamp(2.6rem,7vh,4rem) }
  .abcdt-service-acquisition .mth__i:first-child{ border-top:0;padding-top:0 }
  /* L'étape lue reprend sa pleine valeur ; les autres reculent. */
  .abcdt-service-acquisition.abc-motion .mth__i{ opacity:.36;transition:opacity .5s var(--e) }
  .abcdt-service-acquisition.abc-motion .mth__i.is-read{ opacity:1 }
}

/* ═══════════════════════════════════════════════════════════════
   05 · LIVRABLES — trois panneaux, une composition

   Direction « verre » abandonnée. Ici aucune transparence, aucun
   backdrop-filter : les surfaces de lecture sont pleines, le texte
   est posé sur du noir relevé, le contraste ne dépend de rien.

   La richesse vient de trois formats et trois places différentes —
   pas d'un effet de matière.

   Références regardées pour cette section : Project Card
   (@ravikatiyar162) pour la bande de texte solide sous un média ;
   Bento Grid / casestudy-5 (@shadcnblockscom) pour la hiérarchie
   irrégulière d'une grille ; Editorial Collage Hero
   (@felipemenezes098) pour le décalage de deux surfaces ;
   Condition Grid (@uilayout.contact) pour les portées de colonnes
   alternées ; ScrollTiltedGrid (@ruixen.ui) pour l'entrée décalée ;
   Elite Plan Card (@ruixen.ui), Showcase Card (@jatin-yadav05),
   Gradient Card Showcase (@minhxthanh), Glowing Card
   (@ravikatiyar162), 3D cards Slider (@dhileepkumargm), Text Reveal
   Card (@nexus-ui) et Credit Card Hero (@ruixen.ui) — écartés :
   dégradés, lueurs, verre, 3D, tout ce qui rend le texte instable.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .pn{
  position:relative;
  padding:clamp(5rem,13vh,9.5rem) 0;
  border-top:1px solid var(--line);
  background:var(--ink)
}
.abcdt-service-acquisition .pn__head{ margin-bottom:clamp(3rem,8vh,5rem) }
.abcdt-service-acquisition .pn__grid{ display:grid;gap:clamp(1.4rem,4vh,2.2rem) }

.abcdt-service-acquisition .pn__i{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  /* Surface pleine. Le noir est relevé juste assez pour se détacher du
     fond de page sans devenir gris. */
  background:#0C0C13;
  display:grid;grid-template-rows:auto 1fr
}
.abcdt-service-acquisition .pn__i:hover, .abcdt-service-acquisition .pn__i:focus-within{ border-color:var(--line-2) }
.abcdt-service-acquisition .pn__i{ transition:border-color .4s var(--e) }

/* Le média. Emplacement assumé tant que le plan n'existe pas : on voit
   qu'il manque quelque chose, on ne voit pas un rush recyclé. */
.abcdt-service-acquisition .pn__media{
  position:relative;overflow:hidden;background:#08080D;
  border-bottom:1px solid var(--line)
}
/* Le média. Trois animations réelles, rendues par un moteur commun :
   même palette, même grain, même lumière, même vitesse. Ce n'est plus
   un emplacement en attente. */
.abcdt-service-acquisition .pn__c{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:transform .7s var(--e)
}
.abcdt-service-acquisition .pn__i:hover .pn__c, .abcdt-service-acquisition .pn__i:focus-within .pn__c{ transform:scale(1.025) }

.abcdt-service-acquisition .pn__body{
  padding:clamp(1.4rem,3.2vw,2.2rem);
  display:grid;gap:.55rem;align-content:start
}
.abcdt-service-acquisition .pn__k{
  margin:0;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-3)
}
.abcdt-service-acquisition .pn__t{
  margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.026em;
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.14;color:var(--text);
  max-width:22ch;text-wrap:balance
}
.abcdt-service-acquisition .pn__p{
  margin:0;max-width:46ch;color:var(--text-2);
  font-size:.96rem;line-height:1.6
}
/* Le filet bleu du panneau survolé : le seul bleu de la section. */
.abcdt-service-acquisition .pn__i::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e)
}
.abcdt-service-acquisition .pn__i:hover::after, .abcdt-service-acquisition .pn__i:focus-within::after{ transform:scaleX(1) }

/* ── Composition : trois formats, trois places ─────────────────── */
@media(min-width:860px){
  .abcdt-service-acquisition .pn__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(1.4rem,2.6vw,2.2rem);
    row-gap:clamp(1.4rem,4vh,2.4rem);
    align-items:start
  }
  /* Le dominant : paysage large, il donne l'échelle. */
  .abcdt-service-acquisition .pn__i--lead{ grid-column:1 / span 8 }
  .abcdt-service-acquisition .pn__i--lead .pn__media{ aspect-ratio:16 / 9 }
  .abcdt-service-acquisition .pn__i--lead .pn__t{ font-size:clamp(1.5rem,2.9vw,2.2rem) }

  /* Le vertical : étroit, décalé vers le bas, il crée le contretemps. */
  .abcdt-service-acquisition .pn__i--tall{ grid-column:9 / span 4;margin-top:clamp(2.5rem,7vh,5rem) }
  .abcdt-service-acquisition .pn__i--tall .pn__media{ aspect-ratio:3 / 4 }

  /* L'horizontal : il rattrape la largeur et ferme la composition. */
  .abcdt-service-acquisition .pn__i--wide{ grid-column:1 / span 8;margin-top:calc(-1 * clamp(1rem,3vh,2rem)) }
  .abcdt-service-acquisition .pn__i--wide{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:1fr }
  .abcdt-service-acquisition .pn__i--wide .pn__media{ aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line) }
  .abcdt-service-acquisition .pn__i--wide .pn__body{ align-content:center }
}
@media(max-width:859px){
  .abcdt-service-acquisition .pn__i--lead .pn__media{ aspect-ratio:16 / 10 }
  .abcdt-service-acquisition .pn__i--tall .pn__media{ aspect-ratio:4 / 3 }
  .abcdt-service-acquisition .pn__i--wide .pn__media{ aspect-ratio:16 / 9 }
}

/* Entrée : un décalage vertical court et net, rien de spectaculaire. */
.abcdt-service-acquisition.abc-motion .pn__i{ opacity:0;transform:translate3d(0,2rem,0) }
.abcdt-service-acquisition.abc-motion .pn__i.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--e),transform .9s var(--e)
}
.abcdt-service-acquisition.abc-motion .pn__i--tall.is-in{ transition-delay:.08s }
.abcdt-service-acquisition.abc-motion .pn__i--wide.is-in{ transition-delay:.16s }

@media(prefers-reduced-motion:reduce){
  .abcdt-service-acquisition .pn__i, .abcdt-service-acquisition .pn__c, .abcdt-service-acquisition .pn__i::after{ transition:none }
}

/* ═══════════════════════════════════════════════════════════════
   06 · PREUVES — les chiffres en matière, les verbatims en éditorial
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .prf{ border-top:1px solid var(--line) }
.abcdt-service-acquisition .prf__f{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.8rem,5vh,2.6rem);margin:clamp(3rem,8vh,5rem) 0 0
}
.abcdt-service-acquisition .prf__fi{ display:grid;gap:.2rem }
.abcdt-service-acquisition .prf__f dt{ margin:0 }
.abcdt-service-acquisition .prf__f dt b{
  display:block;font-family:var(--ff-d);font-weight:800;
  font-size:clamp(3.2rem,11vw,7.5rem);line-height:.86;letter-spacing:-.055em;
  color:var(--text);font-variant-numeric:tabular-nums
}
.abcdt-service-acquisition .prf__f dd{
  margin:0;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3)
}

.abcdt-service-acquisition .prf__l{
  list-style:none;margin:clamp(3.5rem,9vh,6rem) 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,7vh,4.5rem)
}
.abcdt-service-acquisition .prf__i figure{ margin:0 }
.abcdt-service-acquisition .prf__q{ margin:0;padding:0;border:0;position:relative }
.abcdt-service-acquisition .prf__q p{
  margin:0;font-family:var(--ff-d);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.1rem,2.1vw,1.42rem);line-height:1.34;color:var(--text-2);
  text-wrap:pretty
}
/* Le guillemet est une marque, pas un ornement : il tient la colonne. */
.abcdt-service-acquisition .prf__q::before{
  content:'«';display:block;margin:0 0 .5rem -.06em;
  font-family:var(--ff-d);font-weight:700;font-size:2rem;line-height:1;
  color:var(--line-2)
}
.abcdt-service-acquisition .prf__by{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;
  margin-top:clamp(1.2rem,3vh,1.8rem)
}
.abcdt-service-acquisition .prf__by b{ font-family:var(--ff-d);font-weight:600;font-size:.95rem;color:var(--text) }
.abcdt-service-acquisition .prf__by span{ font-size:.8rem;letter-spacing:.06em;color:var(--text-3) }

@media(min-width:768px){
  .abcdt-service-acquisition .prf__f{ grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem) }
  .abcdt-service-acquisition .prf__l{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,6vw,5rem) }
}

/* ═══════════════════════════════════════════════════════════════
   07 · POUR QUI — mise en tension
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .qua__l{ list-style:none;margin:clamp(3rem,8vh,5rem) 0 0;padding:0 }
.abcdt-service-acquisition .qua__i{
  position:relative;padding:clamp(1.8rem,5vh,2.8rem) 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem
}
.abcdt-service-acquisition .qua__i:last-child{ border-bottom:1px solid var(--line) }
.abcdt-service-acquisition .qua__t{
  margin:0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.026em;
  font-size:clamp(1.2rem,2.6vw,1.85rem);line-height:1.16;color:var(--text);
  max-width:28ch;text-wrap:balance
}
.abcdt-service-acquisition .qua__p{
  margin:0;max-width:48ch;color:var(--text-3);font-size:.98rem;line-height:1.6
}
@media(min-width:860px){
  /* Plus de colonne d'index : c'est le décrochement de la colonne de
     droite et le filet qui structurent, pas un chiffre. */
  .abcdt-service-acquisition .qua__i{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,6vw,5rem);align-items:baseline;gap:0
  }
  .abcdt-service-acquisition .qua__p{ padding-top:.35rem }
  /* Le filet du haut se tend et le chiffre se remplit. Détail seulement :
     aucune information n'y est cachée. */
  .abcdt-service-acquisition .qua__i::after{
    content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
    background:var(--text);transition:width .7s var(--e)
  }
  .abcdt-service-acquisition .qua__i:hover::after, .abcdt-service-acquisition .qua__i:focus-within::after{ width:100% }
}

/* ═══════════════════════════════════════════════════════════════
   08 · NOS EXPERTISES — marquee vertical

   Base : « CTA with Text Marquee » (@lyanchouss), variante
   cta-with-vertical-marquee-left.

   Mécanique reprise : deux pistes identiques qui défilent en continu,
   la seconde aria-hidden pour que le lecteur d'écran n'entende la
   liste qu'une fois ; pause au survol et au focus ; deux vignettes
   qui mangent le haut et le bas ; opacité par distance au centre.

   Transformé pour ABC : Syne à l'échelle monumentale, de vrais liens,
   une description par intitulé, colonne éditoriale à gauche.
   Supprimé : boutons à dégradé, arrondis, hover:scale.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .mq{
  position:relative;padding:clamp(5rem,13vh,9.5rem) 0;
  border-top:1px solid var(--line);background:var(--ink)
}
.abcdt-service-acquisition .mq__in{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,7vh,4rem);align-items:center
}
/* L'axe. Une seule ligne, à la hauteur du centre du marquee, qui part
   du bloc éditorial et va jusqu'à lui. C'est le lien graphique entre
   ce qui ne bouge pas et ce qui défile — sans flèche, sans schéma. */
.abcdt-service-acquisition .mq__lede{
  margin:clamp(1.4rem,4vh,2rem) 0 0;max-width:42ch;
  color:var(--text-3);font-size:1rem;line-height:1.6
}

/* Le cadre du marquee. C'est lui qui borne le mouvement : hors de ce
   cadre, rien ne bouge dans la page. */
.abcdt-service-acquisition .mq__view{
  position:relative;overflow:hidden;
  height:clamp(420px,64svh,680px)
}
/* Un vrai fondu, pas un voile posé : la piste elle-même se dissout
   en haut et en bas. Les vignettes ne servent plus qu'à raccorder au
   noir de la page. */
.abcdt-service-acquisition .mq__track{
  display:flex;flex-direction:column;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%)
}
.abcdt-service-acquisition .mq__set{
  list-style:none;margin:0;padding:0;flex:none;
  /* 38 s = 37 px/s sur une piste de 1424 px : chaque expertise tient
     ~5,4 s au centre — le temps de lire le nom et sa description, plus
     une respiration. À 34 s (42 px/s) ça devient pressé ; à 46 s
     (31 px/s) ça traîne. Valeur calculée, pas observée : voir la note
     du rapport. */
  animation:abcdtsvc_mqUp var(--mq-dur,38s) linear infinite
}
@keyframes abcdtsvc_mqUp{ to{ transform:translateY(-100%) } }
/* Pause au survol ET au focus clavier : sans la seconde, un lecteur
   au clavier verrait le lien lui échapper. */
/* Le survol ralentit d'abord — un simple passage de souris ne doit pas
   casser net le mouvement. L'arrêt franc est réservé au survol d'un
   intitulé et au focus clavier, qui sont des gestes intentionnels. */
.abcdt-service-acquisition .mq__view:hover .mq__set{ animation-duration:calc(var(--mq-dur,38s) * 2.6) }
.abcdt-service-acquisition .mq__i:hover ~ .mq__i, .abcdt-service-acquisition .mq__view:has(.mq__a:hover) .mq__set, .abcdt-service-acquisition .mq__view:focus-within .mq__set{ animation-play-state:paused }

/* --o est écrit par le script (1 au centre du cadre, 0 aux bords).
   L'intitulé garde un plancher de 0,46 : à cette valeur, Syne en
   grande taille reste au-dessus du seuil AA pour le grand texte. */
.abcdt-service-acquisition .mq__i{
  padding:clamp(.7rem,2.2vh,1.4rem) 0;
  opacity:calc(.46 + var(--o,1) * .54)
}
.abcdt-service-acquisition .mq__a{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(.3rem,1vh,.6rem) 0
}
.abcdt-service-acquisition .mq__n{
  display:block;font-family:var(--ff-d);font-weight:800;
  /* Le tracking se resserre à l'approche du centre : l'intitulé actif
     se tend, les autres restent ouverts. */
  letter-spacing:calc(-.042em - var(--o,1) * .009em);
  line-height:.9;
  /* Calibré sur « Acquisition », le mot le plus long : au-delà, il
     déborde de la colonne. Pas de scale sur l'état actif — un
     agrandissement, même de 2 %, suffisait à le faire sortir du
     cadre. La tension vient du tracking et de la couleur. */
  font-size:clamp(2.2rem,6.2vw,4.5rem);
  color:var(--text);
  overflow-wrap:anywhere
}
.abcdt-service-acquisition .mq__l{ display:block }
/* Un mot seul peut porter plus grand : c'est ce qui donne au marquee
   son rythme, sans changer de système. */
.abcdt-service-acquisition .mq__l--solo{ font-size:1.18em;letter-spacing:-.05em }

/* Trois variantes d'assise, en rotation. Le retrait est minime — il
   crée une respiration, pas un festival. */
.abcdt-service-acquisition .mq__i--v2 .mq__n{ padding-left:clamp(.6rem,2.4vw,2.2rem) }
.abcdt-service-acquisition .mq__i--v3 .mq__n{ padding-left:clamp(.3rem,1.2vw,1.1rem) }
.abcdt-service-acquisition .mq__i--v2 .mq__d, .abcdt-service-acquisition .mq__i--v3 .mq__d{ padding-left:clamp(.3rem,1.2vw,1.1rem) }
/* La description n'existe que dans la bande centrale : soit elle est
   pleinement lisible, soit elle n'est pas là. Jamais entre les deux. */
.abcdt-service-acquisition .mq__d{
  display:block;margin-top:.6rem;max-width:38ch;
  color:var(--text-2);font-size:.92rem;line-height:1.5;
  opacity:calc(max(var(--o,1) - .42, 0) / .34)
}
.abcdt-service-acquisition .mq__here{
  display:inline-block;margin-top:.5rem;
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue-lift)
}
.abcdt-service-acquisition .mq__i--here .mq__n{ color:var(--text-2) }

/* Le lien actif se signale par un filet bleu qui se tend sous le nom —
   pas seulement par une couleur. */
.abcdt-service-acquisition .mq__a{ position:relative }

/* La seule barre bleue de la section : une progression sous
   l'expertise active, dont la longueur suit la proximité du centre.
   Le bleu redevient un accent rare — plus d'axe, plus de repère
   central, plus de second trait au survol. */
.abcdt-service-acquisition .mq__i .mq__a::before{
  content:'';position:absolute;left:0;bottom:-.22rem;height:1.5px;
  width:calc(max(var(--o,0) - .5, 0) / .5 * clamp(44px,14%,132px));
  background:var(--blue);opacity:.62
}
.abcdt-service-acquisition a.mq__a:hover .mq__d, .abcdt-service-acquisition a.mq__a:focus-visible .mq__d{ color:var(--text-2) }

/* Les vignettes : le texte naît et meurt dans le noir, il n'est jamais
   coupé net par un bord. */
.abcdt-service-acquisition .mq__vig{
  position:absolute;left:0;right:0;height:clamp(90px,22%,190px);
  pointer-events:none;z-index:2;display:block
}
.abcdt-service-acquisition .mq__vig--t{ top:0;background:linear-gradient(to bottom,var(--ink) 6%,rgba(6,6,10,.6) 46%,transparent) }
.abcdt-service-acquisition .mq__vig--b{ bottom:0;background:linear-gradient(to top,var(--ink) 6%,rgba(6,6,10,.6) 46%,transparent) }

@media(min-width:960px){
  .abcdt-service-acquisition .mq__in{
    grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
    column-gap:clamp(3.5rem,8vw,7.5rem)
  }
  .abcdt-service-acquisition .mq__n{ font-size:clamp(2.4rem,4.2vw,4.4rem) }
  /* Le bloc éditorial s'aligne sur l'axe, pas sur le milieu du bloc :
     il répond au marquee au lieu de flotter à côté. */
  .abcdt-service-acquisition .mq__col{ position:relative;z-index:2;padding-right:clamp(1rem,3vw,2.5rem) }
  .abcdt-service-acquisition .mq__col .h2{ max-width:14ch }
  .abcdt-service-acquisition .mq__lede{ max-width:34ch }
}

/* Au pouce : titre fixe en haut, marquee dessous, plus lent. Aucune
   dépendance au survol — chaque intitulé est un lien qu'on peut
   toucher, et la piste se met en pause à l'appui. */
@media(max-width:959px){
  .abcdt-service-acquisition .mq__view{ height:clamp(380px,58svh,520px);--mq-dur:56s }
  .abcdt-service-acquisition .mq__view:active .mq__set{ animation-play-state:paused }
  .abcdt-service-acquisition .mq__n{ font-size:clamp(2rem,9vw,3.2rem) }
  .abcdt-service-acquisition .mq__d{ font-size:.88rem }
}

/* Sans mouvement : la piste ne défile pas, la seconde sort du flux, et
   la liste se lit d'un bloc. */
.abcdt-service-acquisition:not(.abc-motion) .mq__set{ animation:none }
.abcdt-service-acquisition:not(.abc-motion) .mq__i, .abcdt-service-acquisition:not(.abc-motion) .mq__d{ opacity:1 }
.abcdt-service-acquisition:not(.abc-motion) .mq__set[aria-hidden]{ display:none }
.abcdt-service-acquisition:not(.abc-motion) .mq__view{ height:auto;overflow:visible }
.abcdt-service-acquisition:not(.abc-motion) .mq__vig{ display:none }

@media(prefers-reduced-motion:reduce){
  .abcdt-service-acquisition .mq__set{ animation:none }
  .abcdt-service-acquisition .mq__i, .abcdt-service-acquisition .mq__d{ opacity:1 }
  .abcdt-service-acquisition .mq__set[aria-hidden]{ display:none }
  .abcdt-service-acquisition .mq__view{ height:auto;overflow:visible }
  .abcdt-service-acquisition .mq__vig{ display:none }
}

/* ═══════════════════════════════════════════════════════════════
   09 · CONVERSION — la matière revient, recadrée
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition .end{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(6rem,17vh,12rem) 0 clamp(5rem,13vh,8rem);
  background:var(--ink)
}
.abcdt-service-acquisition .end__media{ position:absolute;inset:0;z-index:0 }
.abcdt-service-acquisition .end__v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  /* Recadré sur le tiers droit du plan : celui qui est presque noir.
     Le même rush, une surface complètement différente. */
  object-position:88% 50%;
  filter:grayscale(1) contrast(1.2);
  opacity:.6;transition:opacity 1.4s var(--e);
  transform:scale(1.14)
}
.abcdt-service-acquisition .end__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(6,6,10,.5) 28%, rgba(6,6,10,.68) 72%, var(--ink) 100%),
    radial-gradient(70% 60% at 18% 42%, rgba(26,111,255,.09), transparent 72%)
}
.abcdt-service-acquisition .end .tex{ z-index:1 }
.abcdt-service-acquisition .end__in{ position:relative;z-index:2 }
.abcdt-service-acquisition .end__h{
  margin:0 0 0 -.045em;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.046em;
  /* Deux lignes fixes, coupées après « Posons les ». La ligne large est
     « fondations. » : le plancher tient dans la gouttière à 320px. */
  font-size:clamp(2rem,8.6vw,7rem);line-height:.9;color:var(--text)
}
.abcdt-service-acquisition .end__grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,7vh,4rem);margin-top:clamp(2.5rem,7vh,4rem)
}
.abcdt-service-acquisition .end__p{
  margin:0 0 1.2rem;max-width:52ch;color:var(--text-2);
  font-size:1rem;line-height:1.62
}
.abcdt-service-acquisition .end__p:last-child{ margin-bottom:0 }
.abcdt-service-acquisition .end__re{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin:0 0 clamp(1.4rem,3.5vh,2rem);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-service-acquisition .end__re i{ width:16px;height:1px;background:var(--line-2);display:block;flex:none }
/* Aimantation légère du CTA — écrite par le script, plafonnée à 6px. */
.abcdt-service-acquisition .end__cta{
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:transform .35s var(--e),color .25s var(--e),border-color .25s var(--e)
}
@media(min-width:900px){
  .abcdt-service-acquisition .end__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(3rem,7vw,6.5rem);align-items:start
  }
  /* La colonne est divisée par deux : le titre est recalibré sur cette
     demi-largeur, pas sur la largeur de page. */
  .abcdt-service-acquisition .end__h{ font-size:clamp(2.4rem,4.4vw,4rem) }
  .abcdt-service-acquisition .end__act{ padding-top:.4rem }
}

/* ═══════════════════════════════════════════════════════════════
   RÉVÉLATIONS COMMUNES
   Masque + montée. Jamais un fade seul, jamais la même durée
   partout — l'ordre de lecture est porté par le décalage.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition.abc-motion [data-rv]{ opacity:0;transform:translate3d(0,1.4rem,0) }
.abcdt-service-acquisition.abc-motion [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--e),transform .95s var(--e)
}
.abcdt-service-acquisition.abc-motion .qua__i{ opacity:0;transform:translate3d(0,2rem,0) }
.abcdt-service-acquisition.abc-motion .qua__i.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--e),transform 1s var(--e)
}

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

   Rien n'est masqué, rien ne dépend du survol, aucune étape n'attend
   le défilement. La séquence DIRECTION devient une section normale :
   le Canvas est dessiné une fois, mot déjà convergé, et aucune vidéo
   n'est chargée.
   ═══════════════════════════════════════════════════════════════ */
.abcdt-service-acquisition:not(.abc-motion) .mth__side, .abcdt-service-acquisition:not(.abc-motion) .hv__scroll{ display:none }

@media (prefers-reduced-motion: reduce){
  .abcdt-service-acquisition .hv__v, .abcdt-service-acquisition .dir__v, .abcdt-service-acquisition .end__v, .abcdt-service-acquisition .mth__g, .abcdt-service-acquisition .mth__rail i, .abcdt-service-acquisition .end__cta, .abcdt-service-acquisition .si__v, .abcdt-service-acquisition .si__i{ transition:none }
  .abcdt-service-acquisition .hv__scroll i{ animation:none;transform:scaleY(1) }
  .abcdt-service-acquisition .dir__v, .abcdt-service-acquisition .end__v{ opacity:0 }
}