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

.abcdt-sector-b2b *, .abcdt-sector-b2b *::before, .abcdt-sector-b2b *::after{box-sizing:border-box}

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



.abcdt-sector-b2b a{color:inherit}



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

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

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


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

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

.abcdt-sector-b2b .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-sector-b2b .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-sector-b2b .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). */


/* ═══════════════════════════════════════════════════════════════════
   SIGNATURE DE MOUVEMENT

   Quatre secteurs, quatre vitesses. Ce sont les deux seules variables
   qui les distinguent au niveau du socle — chaque page.css les redéfinit
   sur .sct, et TOUT ce qui bouge en hérite : révélations, coutures,
   plans, transitions de section.

     SaaS       traction        court, part vite, ne s'attarde pas
     Fintech    stabilisation   démarre lentement, tranche, se pose
     E-commerce concentration   longue approche, tout se passe d'un coup
     B2B        convergence     la plus lente du site, de loin

   Les valeurs par défaut sont neutres : une page qui oublierait de les
   redéfinir garderait le rythme du reste du site, pas un rythme cassé.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b{ --es:var(--e);--ds:.85s }

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sh{
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  padding:calc(var(--nav-h) + clamp(4.5rem,13vh,9rem)) 0 clamp(4rem,11vh,7.5rem)
}
/* ── LE PREMIER ÉCRAN — LA VIDÉO D'ABORD ──────────────────────────
   Hiérarchie assumée : la VIDÉO, puis la typographie, puis le système
   graphique. Ce qui précède faisait l'inverse, et le calcul le montre :
   un plan à 0,46 d'opacité et 0,62 de luminosité, sous un voile noir
   OPAQUE sur la moitié de sa surface, ne rendait que trois à dix
   niveaux sur 255 au-dessus du fond. Techniquement présent,
   visuellement inexistant.

   Ici le plan est exposé pour être vu — opacité 0,92, luminosité 1,02,
   contraste modéré — et c'est le VOILE qui devient local : dense
   derrière la colonne de lecture, nul ailleurs. Le texte est protégé
   par un écran placé sous lui, pas par un rideau tiré sur toute
   l'image.

   Les deux calques rejouent le MÊME fichier à deux secondes et deux
   vitesses différentes : deux mouvements, une seule requête.
   ────────────────────────────────────────────────────────────────── */
.abcdt-sector-b2b .sh__media{ position:absolute;inset:0;z-index:0;overflow:hidden }
.abcdt-sector-b2b .sh__pa, .abcdt-sector-b2b .sh__pb{ position:absolute;inset:0;display:block;overflow:hidden }
.abcdt-sector-b2b .sh__poster, .abcdt-sector-b2b .sh__v, .abcdt-sector-b2b .sh__v2{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(1.08)
}
/* Le calque principal porte l'image. Il est visible, point. */
.abcdt-sector-b2b .sh__poster, .abcdt-sector-b2b .sh__v{ opacity:.95;animation:abcdtsb2_sh-a 44s var(--es) infinite alternate }
/* Le second l'accompagne en fondu additif : il éclaircit les zones où
   la matière du premier est déjà claire, ce qui creuse la profondeur
   sans jamais assombrir. */
.abcdt-sector-b2b .sh__v2{
  opacity:.4;mix-blend-mode:screen;
  animation:abcdtsb2_sh-b 33s var(--es) infinite alternate-reverse
}
/* La vidéo remplace l'affiche en fondu, sur la même image : aucun saut. */
.abcdt-sector-b2b .sh__v{ opacity:0;transition:opacity 1.1s var(--es) }
.abcdt-sector-b2b .sh__v.is-lit, .abcdt-sector-b2b .sh__v[data-eager]{ opacity:.95 }
.abcdt-sector-b2b .sh__v2{ transition:opacity 1.4s var(--es) }
@keyframes abcdtsb2_sh-a{ from{ transform:scale(1.05) translate3d(-1.6%,0,0) } to{ transform:scale(1.11) translate3d(1.6%,0,0) } }
@keyframes abcdtsb2_sh-b{ from{ transform:scale(1.12) translate3d(2.2%,1%,0) } to{ transform:scale(1.04) translate3d(-2.2%,-1%,0) } }

/* Couche d'effet : chaque secteur y met ce qu'il veut — un filet qui
   balaie, une fenêtre de lumière, un cadre. Vide par défaut. */
.abcdt-sector-b2b .sh__fx{ position:absolute;inset:0;z-index:1;pointer-events:none }

/* ── LE VOILE, LOCAL ──────────────────────────────────────────────
   Un écran dense sous la colonne de lecture, dégradé jusqu'à zéro vers
   la droite ; un raccord vers le noir en bas pour rejoindre la section
   suivante ; et rien d'autre. Sur les deux tiers droits du hero, la
   vidéo n'est atténuée que de vingt pour cent.

   Mesure : plan à 70 de luminance moyenne × 1,02 × 0,92 × 0,8 ≈ 52
   niveaux dans la zone ouverte, contre 3 à 10 auparavant. Derrière le
   texte, le même calcul donne ≈ 12 : le blanc à 232 garde un rapport
   de contraste très large. */
.abcdt-sector-b2b .sh__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* 1 · la colonne de lecture, dense à gauche, nulle passé les 70 % */
    linear-gradient(90deg,
      rgba(6,6,10,.94) 0%, rgba(6,6,10,.91) 40%,
      rgba(6,6,10,.52) 60%, rgba(6,6,10,0) 80%),
    /* 2 · le bandeau des repères, en bas, sur toute la largeur */
    linear-gradient(to bottom,
      rgba(6,6,10,0) 60%, rgba(6,6,10,.5) 73%,
      rgba(6,6,10,.86) 88%, var(--ink) 100%),
    /* 3 · le raccord avec l'en-tête, en haut */
    linear-gradient(to bottom,
      rgba(6,6,10,.55) 0%, rgba(6,6,10,.12) 13%, rgba(6,6,10,0) 28%)
}

/* La fenêtre ouverte — droite du hero, entre 13 % et 60 % de sa hauteur —
   ne subit qu'un pour cent d'atténuation. C'est là que la matière se
   voit franchement. Derrière le texte, l'écran monte à 0,88 et la même
   matière retombe à une douzaine de niveaux : le blanc garde plus de
   dix pour un de rapport de contraste. */

/* Sous mouvement réduit : plus de dérive, et le second calque disparaît
   — à l'arrêt, deux plans superposés ne sont plus qu'une image sale.
   L'affiche reste, pleinement exposée, et la composition reste. */
/* Mouvement refusé : on fige, on n'efface pas. Le second plan disparaît
   (deux images superposées immobiles ne disent plus rien), le système
   graphique du secteur RESTE — filets, cadre, fenêtre de lumière,
   horizon. C'est une affiche, pas un hero amputé. */
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-b2b .sh__poster, .abcdt-sector-b2b .sh__v, .abcdt-sector-b2b .sh__v2{ animation:none!important;transform:none!important;transition:none!important }
  .abcdt-sector-b2b .sh__pb{ display:none }
  .abcdt-sector-b2b .sh__fx, .abcdt-sector-b2b .sh__fx::before, .abcdt-sector-b2b .sh__fx::after, .abcdt-sector-b2b .sh__veil::before, .abcdt-sector-b2b .sh__veil::after{ animation:none!important;transition:none!important }
}

/* Le grain, au-dessus du voile ; la colonne de texte, au-dessus de tout.
   `.sh__media` porte z-index 0 et crée son propre contexte : rien de ce
   qu'il contient ne peut passer devant `.sh__in`. */
.abcdt-sector-b2b .sh__media .tex{ z-index:3 }
.abcdt-sector-b2b .sh__in{ position:relative;z-index:2 }

.abcdt-sector-b2b .sh__k{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:0 0 clamp(1.6rem,5vh,2.6rem);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-sector-b2b .sh__k i{ width:26px;height:1px;background:var(--line-2);display:block;flex:none }
.abcdt-sector-b2b .sh__h{
  margin:0 0 0 -.035em;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(2.1rem,6.6vw,4.8rem);color:var(--text);max-width:14ch
}
.abcdt-sector-b2b .sh__l{
  margin:clamp(1.8rem,5vh,2.8rem) 0 0;max-width:58ch;
  color:var(--text-2);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.62
}
.abcdt-sector-b2b .sh__l em{ font-style:normal;color:var(--text) }
.abcdt-sector-b2b .sh__a{
  display:flex;align-items:center;gap:clamp(1.4rem,4vw,2.6rem);flex-wrap:wrap;
  margin:clamp(2.2rem,6vh,3.4rem) 0 0
}

/* Les repères du secteur : quatre notions que le lecteur reconnaît
   immédiatement comme les siennes. Ce ne sont PAS des cartes : une
   simple rangée de définitions séparées par des filets. */
.abcdt-sector-b2b .sh__ref{ list-style:none;margin:clamp(2.6rem,7vh,4rem) 0 0;padding:0 }
.abcdt-sector-b2b .sh__ref li{ padding:.95rem 0;border-top:1px solid var(--line) }
.abcdt-sector-b2b .sh__ref b{
  display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;
  font-size:.95rem;color:#fff
}
.abcdt-sector-b2b .sh__ref span{ display:block;margin-top:.2rem;color:var(--text-3);font-size:.82rem }

/* ── L'écran de lecture, à l'échelle de la lettre ───────────────────
   La vidéo est pleine page et elle traverse des phases très claires.
   Plutôt que de refermer le voile sur toute la largeur — ce qui
   supprimerait la fenêtre ouverte à droite, donc l'effet même qu'on
   cherche — chaque texte porte son propre halo sombre. Il ne se voit
   pas sur les zones déjà noires, et il ne se lève que là où la matière
   passe sous les glyphes. C'est l'écran local demandé : il protège le
   texte, il ne masque pas l'image. */
.abcdt-sector-b2b .sh__k{ text-shadow:0 1px 14px rgba(6,6,10,.62) }
.abcdt-sector-b2b .sh__h{ text-shadow:0 2px 30px rgba(6,6,10,.72), 0 0 4px rgba(6,6,10,.45) }
.abcdt-sector-b2b .sh__l{ text-shadow:0 1px 18px rgba(6,6,10,.66), 0 0 3px rgba(6,6,10,.35) }
.abcdt-sector-b2b .sh__a{ text-shadow:0 1px 16px rgba(6,6,10,.66) }
.abcdt-sector-b2b .sh__ref b, .abcdt-sector-b2b .sh__ref span{ text-shadow:0 1px 14px rgba(6,6,10,.66) }
@media (min-width:760px){
  .abcdt-sector-b2b .sh__ref{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1.2rem,3vw,2.4rem) }
}

/* ═══════════════════════════════════════════════════════════════════
   LA RÉALITÉ DU SECTEUR — un raisonnement, pas une liste
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sr__p{ margin:0 0 1.5rem;max-width:66ch;color:var(--text-2);font-size:1rem;line-height:1.72 }
.abcdt-sector-b2b .sr__p:last-child{ margin-bottom:0 }
.abcdt-sector-b2b .sr__p b{ color:#fff;font-weight:500 }
.abcdt-sector-b2b .sr__l{ margin-top:clamp(2.4rem,7vh,3.6rem) }
@media (min-width:1100px){
  .abcdt-sector-b2b .sr .wrap{
    display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start
  }
  .abcdt-sector-b2b .sr .eyebrow{ grid-column:1;grid-row:1 }
  .abcdt-sector-b2b .sr .h2{ grid-column:1;grid-row:2 }
  .abcdt-sector-b2b .sr__l{ grid-column:2;grid-row:1 / span 2;margin-top:.2rem }
}

/* ═══════════════════════════════════════════════════════════════════
   LES LEVIERS — trois blocs numérotés, sans carte ni icône
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sl__l{ list-style:none;margin:clamp(2.6rem,7vh,4rem) 0 0;padding:0;counter-reset:sl }
.abcdt-sector-b2b .sl__i{
  counter-increment:sl;position:relative;
  padding:clamp(1.7rem,4.5vh,2.6rem) 0;border-top:1px solid var(--line)
}
.abcdt-sector-b2b .sl__i::before{
  content:counter(sl,decimal-leading-zero);
  display:block;margin-bottom:.9rem;
  font-family:var(--ff-d);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--text-3)
}
.abcdt-sector-b2b .sl__t{
  margin:0 0 .9rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.25rem,3vw,1.72rem);color:#fff;max-width:20ch
}
.abcdt-sector-b2b .sl__d{ margin:0;max-width:62ch;color:var(--text-2);font-size:.98rem;line-height:1.7 }
.abcdt-sector-b2b .sl__d b{ color:#fff;font-weight:500 }
@media (min-width:900px){
  .abcdt-sector-b2b .sl__i{
    display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
    column-gap:clamp(2rem,4.5vw,4rem);align-items:start
  }
  .abcdt-sector-b2b .sl__i::before{ grid-column:1;grid-row:1;margin-bottom:0 }
  .abcdt-sector-b2b .sl__t{ grid-column:1;grid-row:2;margin-bottom:0 }
  .abcdt-sector-b2b .sl__d{ grid-column:2;grid-row:1 / span 2 }
}

/* ═══════════════════════════════════════════════════════════════════
   LA PREUVE — Bold Stats @uilayout.contact

   Un chiffre domine, les autres le contextualisent. Chaque valeur est
   datée et attribuée : elle vient de export/proof-registry.json.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sp{ position:relative;isolation:isolate;background:var(--ink-2);border-top:1px solid var(--line) }
.abcdt-sector-b2b .sp .tex{ z-index:0;opacity:.07 }
.abcdt-sector-b2b .sp__in{ position:relative;z-index:1 }
.abcdt-sector-b2b .sp__hero{ margin:clamp(2.4rem,7vh,3.6rem) 0 0 }
.abcdt-sector-b2b .sp__v{
  margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.055em;line-height:.86;
  font-size:clamp(3.4rem,13vw,8rem);color:#fff
}
.abcdt-sector-b2b .sp__m{ margin:1rem 0 0;max-width:30ch;color:var(--text);font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.45 }
.abcdt-sector-b2b .sp__c{ margin:.6rem 0 0;color:var(--text-3);font-size:.82rem;line-height:1.5 }
.abcdt-sector-b2b .sp__l{ list-style:none;margin:clamp(2.2rem,6vh,3.2rem) 0 0;padding:0 }
.abcdt-sector-b2b .sp__l li{ padding:1rem 0;border-top:1px solid var(--line) }
.abcdt-sector-b2b .sp__l b{
  display:block;font-family:var(--ff-d);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(1.5rem,4vw,2rem);color:#fff
}
.abcdt-sector-b2b .sp__l span{ display:block;margin-top:.35rem;color:var(--text-3);font-size:.84rem;line-height:1.45 }
@media (min-width:900px){
  .abcdt-sector-b2b .sp__hero{
    display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);
    column-gap:clamp(2.5rem,5vw,4.5rem);align-items:end
  }
  /* auto-fit : le bloc de preuve accepte deux ou trois valeurs de
     contexte selon ce que le registre contient pour ce client. On
     n'invente pas un troisième chiffre pour remplir une colonne. */
  .abcdt-sector-b2b .sp__l{
    grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
    gap:0 clamp(1.6rem,3.4vw,3rem)
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LES PROFILS — qualification honnête, y compris par la négative
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sq__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-sector-b2b .sq__i{ padding:1.15rem 0;border-top:1px solid var(--line);max-width:74ch;
        color:var(--text-2);font-size:.98rem;line-height:1.68 }
.abcdt-sector-b2b .sq__i b{ color:#fff;font-weight:500 }
.abcdt-sector-b2b .sq__no{
  margin:clamp(2rem,5vh,2.8rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--line);
  max-width:66ch;color:var(--text-3);font-size:.9rem;line-height:1.62
}
.abcdt-sector-b2b .sq__no b{ color:var(--text-2);font-weight:500 }

/* ═══════════════════════════════════════════════════════════════════
   COMMENT NOUS TRAVAILLONS — quatre temps, en filet
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sw__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-sector-b2b .sw__i{ padding:clamp(1.2rem,3.2vh,1.7rem) 0;border-top:1px solid var(--line) }
.abcdt-sector-b2b .sw__w{ margin:0 0 .5rem;font-family:var(--ff-d);font-weight:700;font-size:.92rem;color:#fff;letter-spacing:-.02em }
.abcdt-sector-b2b .sw__d{ margin:0;max-width:60ch;color:var(--text-2);font-size:.94rem;line-height:1.66 }
@media (min-width:900px){
  .abcdt-sector-b2b .sw__l{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1.4rem,3vw,2.6rem) }
  .abcdt-sector-b2b .sw__i{ padding-top:1.5rem }
  .abcdt-sector-b2b .sw__w{ font-size:.86rem;margin-bottom:.75rem }
  .abcdt-sector-b2b .sw__d{ font-size:.9rem }
}

/* ═══════════════════════════════════════════════════════════════════
   RÉVÉLATIONS — communes aux quatre pages
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b.abc-motion [data-rv]{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--ds) var(--es),transform var(--ds) var(--es)
}
.abcdt-sector-b2b.abc-motion [data-rv].is-in{ opacity:1;transform:none }
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-b2b.abc-motion [data-rv]{ opacity:1;transform:none;transition:none }
}

/* ═══════════════════════════════════════════════════════════════════
   LES QUESTIONS — commun aux quatre pages Industrie.

   Pas d'accordéon : sur une page dont l'enjeu est la crédibilité, une
   réponse qu'il faut cliquer pour lire est une réponse qu'on ne lit pas.
   Tout est ouvert, tout est indexable, tout est lisible sans JavaScript.

   Aucun balisage FAQPage : le brief interdit d'inventer des données
   structurées, et une FAQ balisée engage sur un format d'affichage dans
   les résultats de recherche — c'est une décision éditoriale séparée.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sf__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-sector-b2b .sf__i{ padding:clamp(1.4rem,3.6vh,2rem) 0;border-top:1px solid var(--line) }
.abcdt-sector-b2b .sf__q{
  margin:0 0 .8rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.028em;
  line-height:1.15;font-size:clamp(1.05rem,2.4vw,1.32rem);color:#fff;max-width:26ch
}
.abcdt-sector-b2b .sf__a{ margin:0;max-width:62ch;color:var(--text-2);font-size:.98rem;line-height:1.7 }
@media (min-width:900px){
  .abcdt-sector-b2b .sf__i{
    display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    column-gap:clamp(2rem,4.5vw,4rem);align-items:start
  }
  .abcdt-sector-b2b .sf__q{ margin-bottom:0 }
}


/* ═══════════════════════════════════════════════════════════════════
   COUTURES — elles adoptent la vitesse du secteur
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .sm__line{ transition:transform calc(var(--ds) * 2.2) var(--es) }
.abcdt-sector-b2b .sm__v{ transition:opacity calc(var(--ds) * 1.9) var(--es) }
/* Dernier passage : le cadrage le plus serré de la page. */
.abcdt-sector-b2b .sm__p--tight{ transform:scale(1.85);filter:grayscale(1) contrast(1.45) brightness(.62) }

.abcdt-sector-b2b .sm{
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  height:var(--sm-h,clamp(7rem,20vh,13rem));
  --sm-op:.5
}
.abcdt-sector-b2b .sm__m{ position:absolute;inset:0;z-index:0 }
.abcdt-sector-b2b .sm__p, .abcdt-sector-b2b .sm__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.25) brightness(.72);
  opacity:var(--sm-op);
  /* La matière n'a ni début ni fin : elle sort du noir et y retourne. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 46%,#000 54%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 46%,#000 54%,transparent 100%)
}
.abcdt-sector-b2b .sm__v{ opacity:0;transition:opacity 1.6s var(--e) }
.abcdt-sector-b2b .sm__v.is-lit{ opacity:var(--sm-op) }
.abcdt-sector-b2b .sm .tex{ z-index:1;opacity:.06 }

/* Le filet traverse la bande : c'est lui qui fait le lien entre ce qui
   précède et ce qui suit, plus que le plan. */
.abcdt-sector-b2b .sm__line{
  position:absolute;left:0;right:0;top:50%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent 0%,var(--line-2) 18%,var(--line-2) 82%,transparent 100%);
  transform:scaleX(var(--cross,1));transform-origin:left center;
  transition:transform 1.6s var(--e)
}

/* Variante étroite, pour une simple respiration entre deux chapitres. */
.abcdt-sector-b2b .sm--thin{ --sm-h:clamp(4.5rem,12vh,7.5rem);--sm-op:.34 }
/* Variante haute, pour une vraie entrée en matière. */
.abcdt-sector-b2b .sm--tall{ --sm-h:clamp(10rem,34vh,20rem);--sm-op:.62 }

@media (prefers-reduced-motion:reduce){
  .abcdt-sector-b2b .sm__line{ transition:none }
  .abcdt-sector-b2b .sm__v{ transition:none }
}

.abcdt-sector-b2b .sx{ position:relative;background:var(--ink) }
.abcdt-sector-b2b .sx__l{ list-style:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 5rem }
.abcdt-sector-b2b .sx__l li{ border-top:1px solid var(--line) }
.abcdt-sector-b2b .sx__l a{
  display:grid;gap:.35rem;padding:1.3rem 0;text-decoration:none;
  transition:padding-left .5s var(--e)
}
.abcdt-sector-b2b .sx__l a:hover{ padding-left:.8rem }
.abcdt-sector-b2b .sx__l b{
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em;font-size:1.02rem;color:#fff
}
.abcdt-sector-b2b .sx__l span{ color:var(--text-3);font-size:.86rem;line-height:1.5 }

@media (min-width:900px){
  .abcdt-sector-b2b .sx__l{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem }
}
@media (min-width:1200px){
  .abcdt-sector-b2b .sx__l{ grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2.5rem }
}

.abcdt-sector-b2b .rd{ max-width:var(--maxw);margin-inline:auto;padding:4.5rem var(--gut) }
.abcdt-sector-b2b .rd__h{
  margin:1.1rem 0 0;font-family:var(--ff-d);font-weight:800;
  letter-spacing:-.04em;line-height:1.04;font-size:clamp(1.85rem,7vw,3.3rem);
  color:#fff;max-width:20ch;text-wrap:balance
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTEUR B2B SERVICES — les 30 % propres à cette page.

   Territoire : LE TEMPS LONG.
   Signature : LA DISTANCE — une seule ligne tracée sur toute la largeur
   de la fenêtre, trois repères très espacés, et beaucoup de vide entre
   eux.

   Le vide EST le message. C'est la période pendant laquelle rien n'est
   attribuable et pendant laquelle le dispositif doit quand même tenir.
   Aucune autre page du site ne se permet un intervalle aussi large :
   c'est ce qui rend celle-ci reconnaissable au premier coup d'œil.

   --dst : 1 = ligne entière (état par défaut, donc sans script).
   ═══════════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b .lg{ background:var(--ink);border-top:1px solid var(--line);overflow:hidden }

/* ── Mobile : LA DISTANCE EST VERTICALE ────────────────────────────
   Trois étiquettes ne tiennent pas côte à côte sous 760px, et les
   comprimer produirait exactement ce qu'il faut éviter : une version
   écrasée du desktop. La distance devient donc une descente — c'est la
   même idée, dite avec l'axe dont on dispose. --at sert de `top`. */
.abcdt-sector-b2b .lg__line{
  position:relative;margin:clamp(2.4rem,7vh,3.6rem) auto 0;
  max-width:var(--maxw);padding:0 var(--gut);
  height:15rem
}
.abcdt-sector-b2b .lg__rail{
  /* Les décalages d'un enfant absolu partent du bord INTÉRIEUR du
     padding : left:0 tombe donc déjà sur la gouttière. */
  position:absolute;left:0;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,var(--line-2) 0%,var(--line-2) 84%,transparent 100%);
  transform:scaleY(var(--dst,1));transform-origin:top center;
  transition:transform 2s var(--e)
}
.abcdt-sector-b2b .lg__mk{
  position:absolute;left:0;top:var(--at);
  display:flex;align-items:center;gap:.75rem
}
.abcdt-sector-b2b .lg__mk i{ display:block;width:clamp(1.1rem,5vw,1.8rem);height:1px;background:var(--line-2);margin:0;flex:none }
.abcdt-sector-b2b .lg__mk b{
  display:block;width:max-content;
  font-family:var(--ff-d);font-weight:600;letter-spacing:.02em;
  font-size:.76rem;color:var(--text-3);white-space:nowrap
}

.abcdt-sector-b2b .lg__g{ margin:clamp(2.4rem,6vh,3.4rem) 0 0 }
.abcdt-sector-b2b .lg__p{ margin:0 0 1.4rem;max-width:58ch;color:var(--text-2);font-size:1rem;line-height:1.72 }
.abcdt-sector-b2b .lg__p:last-child{ margin-bottom:0 }
.abcdt-sector-b2b .lg__p b{ color:#fff;font-weight:500 }

/* ── À partir de 760px : LA DISTANCE EST HORIZONTALE ───────────────
   La largeur devient disponible : le vide entre les repères se lit
   alors comme une durée qu'on traverse, ce que la version verticale ne
   dit pas aussi bien. */
@media (min-width:760px){
  .abcdt-sector-b2b .lg__line{ margin-top:clamp(3rem,9vh,5rem);height:clamp(6rem,15vh,8.5rem) }
  .abcdt-sector-b2b .lg__rail{
    left:0;right:0;top:50%;width:auto;height:1px;
    background:linear-gradient(90deg,var(--line-2) 0%,var(--line-2) 84%,transparent 100%);
    transform:scaleX(var(--dst,1));transform-origin:left center
  }
  .abcdt-sector-b2b .lg__mk{
    left:var(--at);top:50%;width:0;
    display:block;transform:translateY(-50%)
  }
  .abcdt-sector-b2b .lg__mk i{ width:1px;height:clamp(2rem,5.5vh,3.2rem);margin:0 0 .7rem }
  /* Le repère du milieu est centré sur son trait, celui de droite
     repart vers l'intérieur : sans cela l'étiquette sort du cadre. */
  .abcdt-sector-b2b .lg__mk:nth-child(3) b{ transform:translateX(-50%) }
  .abcdt-sector-b2b .lg__mk:last-child b{ transform:translateX(-100%) }
}
@media (min-width:900px){
  .abcdt-sector-b2b .lg__mk b{ font-size:.78rem }
  .abcdt-sector-b2b .lg__g{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4rem) }
  .abcdt-sector-b2b .lg__p{ margin-bottom:0 }
}
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-b2b .lg__rail{ transition:none }
}


/* ═══════════════════════════════════════════════════════════════════
   SIGNATURE DE MOUVEMENT — LA CONVERGENCE

   La plus lente des quatre pages, et de loin : 1,7 s là où le SaaS met
   0,5 s. Rien n'y est rapide, y compris les révélations de texte. C'est
   le seul moyen de faire ressentir un cycle de douze mois à quelqu'un
   qui passe quarante secondes sur la page.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-b2b{ --es:cubic-bezier(.22,.55,.14,1);--ds:1.7s }

/* ── La profondeur ─────────────────────────────────────────────────
   Le plan le plus lent du site — un tiers de la vitesse nominale — et
   le seul qui converge sur toute la hauteur d'une section. --conv part
   de 1 (état abouti, convergé) ; le script le fait venir de loin. */
.abcdt-sector-b2b .lg{ position:relative;isolation:isolate }
.abcdt-sector-b2b .lg__deep{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;
  --conv:1
}
.abcdt-sector-b2b .lg__dp, .abcdt-sector-b2b .lg__dv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:grayscale(1) contrast(1.3) brightness(.66);
  /* Très en retrait : cette page se lit d'abord, elle s'admire ensuite.
     La matière se concentre sous la ligne de distance, jamais sur le
     titre ni sur les étiquettes. */
  opacity:.15;mix-blend-mode:screen;
  transform:scale(calc(1.16 - var(--conv) * .16)) translate3d(0,calc((1 - var(--conv)) * 3%),0);
  transition:transform 3.2s cubic-bezier(.22,.55,.14,1),opacity 2.4s cubic-bezier(.22,.55,.14,1);
  -webkit-mask-image:radial-gradient(94% 56% at 50% 74%,#000 4%,transparent 74%);
  mask-image:radial-gradient(94% 56% at 50% 74%,#000 4%,transparent 74%)
}
.abcdt-sector-b2b .lg__dv{ opacity:0 }
.abcdt-sector-b2b .lg__dv.is-lit{ opacity:.15 }
.abcdt-sector-b2b .lg__veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--ink) 0%,rgba(6,6,10,.78) 34%,rgba(6,6,10,.55) 100%)
}
.abcdt-sector-b2b .lg .wrap, .abcdt-sector-b2b .lg__line{ position:relative;z-index:1 }
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-b2b .lg__dp, .abcdt-sector-b2b .lg__dv{ transition:none;transform:none }
}

/* ── HERO — LA PROFONDEUR, VISIBLE ────────────────────────────────
   Lent ne veut pas dire invisible. Le plan couvre tout le hero, exposé
   franchement, avec un contraste plus dur que sur les trois autres
   pages : c'est ce qui donne la profondeur et détache la matière du
   fond.

   Deux mouvements se superposent. Le premier est PERCEPTIBLE dès les
   premières secondes : la matière du plan elle-même, 26,9 de différence
   moyenne entre images, qui vit en permanence. Le second est la dérive
   d'échelle sur soixante-dix secondes — la couche lente, celle qui dit
   le temps long, et qui ne porte plus seule la charge de prouver que
   quelque chose bouge.

   Une vignette resserre l'attention vers le centre bas, là où
   l'horizon se trace.
   ────────────────────────────────────────────────────────────────── */
.abcdt-sector-b2b .sh__pa, .abcdt-sector-b2b .sh__pb{ inset:0 }
.abcdt-sector-b2b .sh__poster, .abcdt-sector-b2b .sh__v{
  opacity:.9;object-position:50% 54%;
  filter:grayscale(1) contrast(1.34) brightness(1.02);
  animation:abcdtsb2_b2b-far 70s linear infinite alternate
}
.abcdt-sector-b2b .sh__v.is-lit, .abcdt-sector-b2b .sh__v[data-eager]{ opacity:.9 }
.abcdt-sector-b2b .sh__v2{
  opacity:.34;mix-blend-mode:screen;
  filter:grayscale(1) contrast(1.5) brightness(1.0);
  animation:abcdtsb2_b2b-farther 100s linear infinite alternate-reverse
}
@keyframes abcdtsb2_b2b-far{ from{ transform:scale(1.16) translate3d(-3.4%,0,0) } to{ transform:scale(1.02) translate3d(3.4%,0,0) } }
@keyframes abcdtsb2_b2b-farther{ from{ transform:scale(1.04) translate3d(2.6%,1.2%,0) } to{ transform:scale(1.18) translate3d(-2.6%,-1.2%,0) } }

/* La vignette : elle creuse la profondeur sans assombrir le centre. */
.abcdt-sector-b2b .sh__fx{
  background:radial-gradient(78% 66% at 56% 58%,
    transparent 0%, transparent 30%, rgba(6,6,10,.42) 62%, rgba(6,6,10,.9) 100%)
}

/* L'horizon se trace une fois, en quatre secondes. */
.abcdt-sector-b2b .sh__veil::before{
  content:'';position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.4rem,3.4vh,2.4rem);
  height:1px;background:linear-gradient(90deg,rgba(232,232,240,.4) 0%,rgba(232,232,240,.4) 72%,transparent 100%);
  transform-origin:left center;
  animation:abcdtsb2_b2b-draw 4s cubic-bezier(.22,.55,.14,1) both
}
@keyframes abcdtsb2_b2b-draw{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
/* Trois repères qui s'allument l'un après l'autre, très lentement. */
.abcdt-sector-b2b .sh__veil::after{
  content:'';position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.4rem,3.4vh,2.4rem);
  height:clamp(1rem,2.6vh,1.7rem);
  background:
    linear-gradient(rgba(232,232,240,.4),rgba(232,232,240,.4)) 2% 0/1px 100% no-repeat,
    linear-gradient(rgba(232,232,240,.4),rgba(232,232,240,.4)) 46% 0/1px 100% no-repeat,
    linear-gradient(rgba(232,232,240,.4),rgba(232,232,240,.4)) 88% 0/1px 100% no-repeat;
  animation:abcdtsb2_b2b-marks 9s cubic-bezier(.22,.55,.14,1) both
}
@keyframes abcdtsb2_b2b-marks{
  0%  { opacity:0;background-size:1px 0%,1px 0%,1px 0% }
  34% { opacity:1;background-size:1px 100%,1px 0%,1px 0% }
  62% { background-size:1px 100%,1px 100%,1px 0% }
  100%{ opacity:1;background-size:1px 100%,1px 100%,1px 100% }
}

@media (prefers-reduced-motion:reduce){
  .abcdt-sector-b2b .sh__poster, .abcdt-sector-b2b .sh__v, .abcdt-sector-b2b .sh__v2{ animation:none }
  .abcdt-sector-b2b .sh__veil::before, .abcdt-sector-b2b .sh__veil::after{ animation:none }
}


/* ── Mobile ────────────────────────────────────────────────────────
   La colonne de lecture occupe toute la largeur : l'écran de
   protection ne peut plus être latéral, il devient vertical. Le tiers
   haut du hero reste franchement ouvert — c'est là qu'on voit la
   matière bouger — et l'écran se densifie sous le titre.
   Le hero mobile ne devient donc pas une affiche fixe.  */
@media (max-width:899px){
  .abcdt-sector-b2b .sh__veil{
    background:linear-gradient(to bottom,
      rgba(6,6,10,.2) 0%, rgba(6,6,10,.12) 19%,
      rgba(6,6,10,.66) 33%, rgba(6,6,10,.86) 62%, var(--ink) 100%)
  }
  .abcdt-sector-b2b .sh{ padding-top:calc(var(--nav-h) + clamp(8rem,26vh,13rem)) }
}

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

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