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

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

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



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



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

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

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


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

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

.abcdt-sector-fintech .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-fintech .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-fintech .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-fintech{ --es:var(--e);--ds:.85s }

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-fintech .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-fintech .sh__media{ position:absolute;inset:0;z-index:0;overflow:hidden }
.abcdt-sector-fintech .sh__pa, .abcdt-sector-fintech .sh__pb{ position:absolute;inset:0;display:block;overflow:hidden }
.abcdt-sector-fintech .sh__poster, .abcdt-sector-fintech .sh__v, .abcdt-sector-fintech .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-fintech .sh__poster, .abcdt-sector-fintech .sh__v{ opacity:.95;animation:abcdtsfi_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-fintech .sh__v2{
  opacity:.4;mix-blend-mode:screen;
  animation:abcdtsfi_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-fintech .sh__v{ opacity:0;transition:opacity 1.1s var(--es) }
.abcdt-sector-fintech .sh__v.is-lit, .abcdt-sector-fintech .sh__v[data-eager]{ opacity:.95 }
.abcdt-sector-fintech .sh__v2{ transition:opacity 1.4s var(--es) }
@keyframes abcdtsfi_sh-a{ from{ transform:scale(1.05) translate3d(-1.6%,0,0) } to{ transform:scale(1.11) translate3d(1.6%,0,0) } }
@keyframes abcdtsfi_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-fintech .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-fintech .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-fintech .sh__poster, .abcdt-sector-fintech .sh__v, .abcdt-sector-fintech .sh__v2{ animation:none!important;transform:none!important;transition:none!important }
  .abcdt-sector-fintech .sh__pb{ display:none }
  .abcdt-sector-fintech .sh__fx, .abcdt-sector-fintech .sh__fx::before, .abcdt-sector-fintech .sh__fx::after, .abcdt-sector-fintech .sh__veil::before, .abcdt-sector-fintech .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-fintech .sh__media .tex{ z-index:3 }
.abcdt-sector-fintech .sh__in{ position:relative;z-index:2 }

.abcdt-sector-fintech .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-fintech .sh__k i{ width:26px;height:1px;background:var(--line-2);display:block;flex:none }
.abcdt-sector-fintech .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-fintech .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-fintech .sh__l em{ font-style:normal;color:var(--text) }
.abcdt-sector-fintech .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-fintech .sh__ref{ list-style:none;margin:clamp(2.6rem,7vh,4rem) 0 0;padding:0 }
.abcdt-sector-fintech .sh__ref li{ padding:.95rem 0;border-top:1px solid var(--line) }
.abcdt-sector-fintech .sh__ref b{
  display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;
  font-size:.95rem;color:#fff
}
.abcdt-sector-fintech .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-fintech .sh__k{ text-shadow:0 1px 14px rgba(6,6,10,.62) }
.abcdt-sector-fintech .sh__h{ text-shadow:0 2px 30px rgba(6,6,10,.72), 0 0 4px rgba(6,6,10,.45) }
.abcdt-sector-fintech .sh__l{ text-shadow:0 1px 18px rgba(6,6,10,.66), 0 0 3px rgba(6,6,10,.35) }
.abcdt-sector-fintech .sh__a{ text-shadow:0 1px 16px rgba(6,6,10,.66) }
.abcdt-sector-fintech .sh__ref b, .abcdt-sector-fintech .sh__ref span{ text-shadow:0 1px 14px rgba(6,6,10,.66) }
@media (min-width:760px){
  .abcdt-sector-fintech .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-fintech .sr__p{ margin:0 0 1.5rem;max-width:66ch;color:var(--text-2);font-size:1rem;line-height:1.72 }
.abcdt-sector-fintech .sr__p:last-child{ margin-bottom:0 }
.abcdt-sector-fintech .sr__p b{ color:#fff;font-weight:500 }
.abcdt-sector-fintech .sr__l{ margin-top:clamp(2.4rem,7vh,3.6rem) }
@media (min-width:1100px){
  .abcdt-sector-fintech .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-fintech .sr .eyebrow{ grid-column:1;grid-row:1 }
  .abcdt-sector-fintech .sr .h2{ grid-column:1;grid-row:2 }
  .abcdt-sector-fintech .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-fintech .sl__l{ list-style:none;margin:clamp(2.6rem,7vh,4rem) 0 0;padding:0;counter-reset:sl }
.abcdt-sector-fintech .sl__i{
  counter-increment:sl;position:relative;
  padding:clamp(1.7rem,4.5vh,2.6rem) 0;border-top:1px solid var(--line)
}
.abcdt-sector-fintech .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-fintech .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-fintech .sl__d{ margin:0;max-width:62ch;color:var(--text-2);font-size:.98rem;line-height:1.7 }
.abcdt-sector-fintech .sl__d b{ color:#fff;font-weight:500 }
@media (min-width:900px){
  .abcdt-sector-fintech .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-fintech .sl__i::before{ grid-column:1;grid-row:1;margin-bottom:0 }
  .abcdt-sector-fintech .sl__t{ grid-column:1;grid-row:2;margin-bottom:0 }
  .abcdt-sector-fintech .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-fintech .sp{ position:relative;isolation:isolate;background:var(--ink-2);border-top:1px solid var(--line) }
.abcdt-sector-fintech .sp .tex{ z-index:0;opacity:.07 }
.abcdt-sector-fintech .sp__in{ position:relative;z-index:1 }
.abcdt-sector-fintech .sp__hero{ margin:clamp(2.4rem,7vh,3.6rem) 0 0 }
.abcdt-sector-fintech .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-fintech .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-fintech .sp__c{ margin:.6rem 0 0;color:var(--text-3);font-size:.82rem;line-height:1.5 }
.abcdt-sector-fintech .sp__l{ list-style:none;margin:clamp(2.2rem,6vh,3.2rem) 0 0;padding:0 }
.abcdt-sector-fintech .sp__l li{ padding:1rem 0;border-top:1px solid var(--line) }
.abcdt-sector-fintech .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-fintech .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-fintech .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-fintech .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-fintech .sq__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-sector-fintech .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-fintech .sq__i b{ color:#fff;font-weight:500 }
.abcdt-sector-fintech .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-fintech .sq__no b{ color:var(--text-2);font-weight:500 }

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

/* ═══════════════════════════════════════════════════════════════════
   RÉVÉLATIONS — communes aux quatre pages
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-fintech.abc-motion [data-rv]{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--ds) var(--es),transform var(--ds) var(--es)
}
.abcdt-sector-fintech.abc-motion [data-rv].is-in{ opacity:1;transform:none }
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-fintech.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-fintech .sf__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-sector-fintech .sf__i{ padding:clamp(1.4rem,3.6vh,2rem) 0;border-top:1px solid var(--line) }
.abcdt-sector-fintech .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-fintech .sf__a{ margin:0;max-width:62ch;color:var(--text-2);font-size:.98rem;line-height:1.7 }
@media (min-width:900px){
  .abcdt-sector-fintech .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-fintech .sf__q{ margin-bottom:0 }
}


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

.abcdt-sector-fintech .sm{
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  height:var(--sm-h,clamp(7rem,20vh,13rem));
  --sm-op:.5
}
.abcdt-sector-fintech .sm__m{ position:absolute;inset:0;z-index:0 }
.abcdt-sector-fintech .sm__p, .abcdt-sector-fintech .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-fintech .sm__v{ opacity:0;transition:opacity 1.6s var(--e) }
.abcdt-sector-fintech .sm__v.is-lit{ opacity:var(--sm-op) }
.abcdt-sector-fintech .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-fintech .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-fintech .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-fintech .sm--tall{ --sm-h:clamp(10rem,34vh,20rem);--sm-op:.62 }

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

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

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

.abcdt-sector-fintech .rd{ max-width:var(--maxw);margin-inline:auto;padding:4.5rem var(--gut) }
.abcdt-sector-fintech .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 FINTECH — les 30 % propres à cette page.

   Territoire : LA CONFIANCE SOUS CONTRAINTE.
   Signature : LE CADRE — un rectangle qui se resserre autour du texte
   au défilement, sans jamais toucher au texte lui-même.

   Point capital : le message ne perd RIEN. Pas un point de contraste,
   pas un pixel de position, pas une lettre masquée. C'est le propos
   exact du secteur — la contrainte se pose autour du message, elle ne
   le dégrade pas. Un effet qui atténuerait le texte dirait le contraire
   de ce que dit la page.

   --fr : 1 = cadre large, 0 = cadre serré. Le CSS écrit 0, l'état abouti.
   ═══════════════════════════════════════════════════════════════════════ */
.abcdt-sector-fintech .fr{ position:relative;isolation:isolate;background:var(--ink-2);border-top:1px solid var(--line) }
.abcdt-sector-fintech .fr .tex{ z-index:0;opacity:.07 }
.abcdt-sector-fintech .fr__in{ position:relative;z-index:1 }

.abcdt-sector-fintech .fr__box{
  position:relative;margin:clamp(2.6rem,7vh,4rem) 0 0;
  max-width:62ch;
  padding:clamp(1.8rem,5vh,3rem) clamp(1.4rem,4vw,2.6rem)
}
/* Le cadre. Il vit dans un pseudo-élément dédié pour que son inset
   puisse déborder de la boîte sans décaler une seule ligne de texte. */
.abcdt-sector-fintech .fr__edge{
  position:absolute;pointer-events:none;
  inset:calc(var(--fr,0) * -2.4rem) calc(var(--fr,0) * -3.2rem);
  border:1px solid rgba(232,232,240,calc(.16 + (1 - var(--fr,0)) * .16));
  transition:inset 1.1s var(--e),border-color 1.1s var(--e)
}
/* Les quatre angles, marqués plus franchement : c'est ce qui fait lire
   un cadre plutôt qu'une simple boîte. */
.abcdt-sector-fintech .fr__edge::before, .abcdt-sector-fintech .fr__edge::after{
  content:'';position:absolute;width:14px;height:14px;
  border:1px solid var(--blue);opacity:.55
}
.abcdt-sector-fintech .fr__edge::before{ left:-1px;top:-1px;border-right:0;border-bottom:0 }
.abcdt-sector-fintech .fr__edge::after{ right:-1px;bottom:-1px;border-left:0;border-top:0 }

.abcdt-sector-fintech .fr__q{
  margin:0 0 1.4rem;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.35rem,3.6vw,2.15rem);color:#fff;max-width:20ch
}
.abcdt-sector-fintech .fr__a{ margin:0 0 1.2rem;color:var(--text-2);font-size:1rem;line-height:1.72 }
.abcdt-sector-fintech .fr__a:last-child{ margin-bottom:0 }

@media (min-width:1100px){
  /* Même partition que le bloc « réalité » : l'énoncé à gauche, la
     démonstration à droite. Le cadre a besoin d'air autour de lui —
     mais pas d'une demi-page vide. */
  .abcdt-sector-fintech .fr__in{
    display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    column-gap:clamp(3rem,6vw,6rem);align-items:start
  }
  .abcdt-sector-fintech .fr .eyebrow{ grid-column:1;grid-row:1 }
  .abcdt-sector-fintech .fr .h2{ grid-column:1;grid-row:2 }
  .abcdt-sector-fintech .fr__box{ grid-column:2;grid-row:1 / span 2;margin-top:.2rem;max-width:none }
}

@media (prefers-reduced-motion:reduce){
  .abcdt-sector-fintech .fr__edge{ transition:none }
}


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

   Démarre lentement, tranche au milieu, se pose franchement. Rien ici
   ne rebondit et rien ne dépasse : une page qui parle de conformité ne
   peut pas avoir un mouvement approximatif.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-fintech{ --es:cubic-bezier(.5,0,.14,1);--ds:.95s }
.abcdt-sector-fintech .fr__edge{ transition:inset 1.3s var(--es),border-color 1.3s var(--es) }

/* ── Le plan DANS le cadre ─────────────────────────────────────────
   Il est volontairement occulté sur sa partie droite par le cadre et
   par le voile : c'est ce que la contrainte fait au message. Le texte,
   lui, passe au-dessus et ne perd pas un point de contraste — c'est la
   règle non négociable de cette page. */
.abcdt-sector-fintech .fr__m{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none }
.abcdt-sector-fintech .fr__p, .abcdt-sector-fintech .fr__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;
  filter:grayscale(1) contrast(1.3) brightness(.66);
  opacity:.26;
  /* La matière n'occupe que la moitié droite de la boîte, et s'y éteint
     avant le bord : le cadre la recadre autant qu'il la contient. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%,transparent 100%);
  transform:scale(calc(1.02 + var(--fr,0) * .06));
  transition:transform 1.3s var(--es)
}
.abcdt-sector-fintech .fr__v{ opacity:0;transition:opacity 1.5s var(--es),transform 1.3s var(--es) }
.abcdt-sector-fintech .fr__v.is-lit{ opacity:.26 }
.abcdt-sector-fintech .fr__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink-2) 0%,rgba(11,11,17,.72) 46%,rgba(11,11,17,.5) 100%)
}
.abcdt-sector-fintech .fr__q, .abcdt-sector-fintech .fr__a{ position:relative;z-index:1 }
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-fintech .fr__p, .abcdt-sector-fintech .fr__v{ transition:none;transform:none }
}

/* ── HERO — PLEIN CADRE, PUIS LE CADRE ─────────────────────────────
   La transformation la plus ambitieuse des quatre. Le plan occupe la
   TOTALITÉ du hero — c'est le plan le plus vivant du dépôt, 43,5 de
   différence moyenne entre images — et le dispositif de contrainte
   passe PAR-DESSUS : un cadre qui se referme, quatre angles, deux
   filets verticaux qui découpent la largeur.

   À l'arrivée le plan est trop grand et légèrement décadré ; en trois
   secondes et demie il se recentre et se cale. La contrainte est donc
   jouée sur le mouvement, plus sur l'exposition. La vidéo est premier
   niveau, le cadre second — plus l'inverse.
   ────────────────────────────────────────────────────────────────── */
/* Le titre tient sur deux lignes. Ce n'est pas un réglage de confort :
   d'une seule ligne il court jusqu'à 91 % de la largeur et vient
   chercher le panache le plus clair de la plaque, là où le halo de
   lecture ne peut plus rien. Sur deux lignes il reste dans la colonne
   de lecture, la fenêtre de droite reste grande ouverte, et le bloc
   titre s'inscrit dans le cadre — ce que dit la page. */
.abcdt-sector-fintech .sh__h{ max-width:11ch }
.abcdt-sector-fintech .sh__media{ --set:1 }
.abcdt-sector-fintech .sh__pa, .abcdt-sector-fintech .sh__pb{ inset:0 }
.abcdt-sector-fintech .sh__poster, .abcdt-sector-fintech .sh__v{
  opacity:.95;
  filter:grayscale(1) contrast(calc(1.16 + var(--set) * .22)) brightness(calc(1.06 - var(--set) * .16));
  transform:translate3d(calc(var(--set) * 3.4%),calc(var(--set) * -1.6%),0)
            scale(calc(1.06 + var(--set) * .1));
  transition:transform 3.4s var(--es),filter 3.4s var(--es),opacity 3.4s var(--es);
  animation:abcdtsfi_fin-breathe 26s var(--es) infinite alternate
}
.abcdt-sector-fintech .sh__v.is-lit, .abcdt-sector-fintech .sh__v[data-eager]{ opacity:.95 }
.abcdt-sector-fintech .sh__v2{
  opacity:calc(.42 - var(--set) * .24);mix-blend-mode:screen;
  filter:grayscale(1) contrast(1.4) brightness(1.02);
  transform:translate3d(calc(var(--set) * -3%),0,0) scale(1.1);
  transition:transform 3.4s var(--es),opacity 3.4s var(--es)
}
@keyframes abcdtsfi_fin-breathe{ from{ margin-left:-.8% } to{ margin-left:.8% } }

/* Le cadre : deux filets verticaux qui découpent la largeur, et deux
   angles qui se referment. Tout en filets clairs sur l'image, jamais
   en aplats sombres. */
.abcdt-sector-fintech .sh__fx::before, .abcdt-sector-fintech .sh__fx::after{
  content:'';position:absolute;
  transition:inset 3.4s var(--es),opacity 3.4s var(--es),left 3.4s var(--es),right 3.4s var(--es)
}
.abcdt-sector-fintech .sh__fx::before{
  left:calc(6% + var(--set) * 5%);top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(232,232,240,.78) 14%,rgba(232,232,240,.78) 86%,transparent);
  opacity:calc(.4 + (1 - var(--set)) * .6)
}
.abcdt-sector-fintech .sh__fx::after{
  right:calc(6% + var(--set) * 5%);top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(232,232,240,.78) 14%,rgba(232,232,240,.78) 86%,transparent);
  opacity:calc(.4 + (1 - var(--set)) * .6)
}
/* Les angles, portés par le voile pour ne pas surcharger .sh__fx. */
.abcdt-sector-fintech .sh__veil::before, .abcdt-sector-fintech .sh__veil::after{
  content:'';position:absolute;width:clamp(34px,4.4vw,72px);height:clamp(34px,4.4vw,72px);
  border:1px solid var(--blue);opacity:calc(.55 + (1 - var(--set)) * .4);
  transition:inset 3.4s var(--es),opacity 3.4s var(--es),top 3.4s var(--es),bottom 3.4s var(--es)
}
.abcdt-sector-fintech .sh__veil::before{
  left:calc(6% + var(--set) * 5%);top:calc(2.6rem + var(--set) * 3%);border-right:0;border-bottom:0
}
.abcdt-sector-fintech .sh__veil::after{
  right:calc(6% + var(--set) * 5%);bottom:calc(2.6rem + var(--set) * 3%);border-left:0;border-top:0
}

/* Le voile de lecture est légèrement resserré : le texte occupe la
   moitié gauche, la matière doit rester franche à droite. */
.abcdt-sector-fintech .sh__veil{
  background:
    linear-gradient(90deg,
      rgba(6,6,10,.95) 0%, rgba(6,6,10,.92) 40%,
      rgba(6,6,10,.5) 60%, rgba(6,6,10,0) 80%),
    linear-gradient(to bottom,
      rgba(6,6,10,0) 60%, rgba(6,6,10,.48) 73%,
      rgba(6,6,10,.85) 88%, var(--ink) 100%),
    linear-gradient(to bottom,
      rgba(6,6,10,.5) 0%, rgba(6,6,10,.1) 13%, rgba(6,6,10,0) 28%)
}

@media (max-width:899px){
  .abcdt-sector-fintech .sh__fx::before, .abcdt-sector-fintech .sh__fx::after{ left:3%;right:3% }
}
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-fintech .sh__poster, .abcdt-sector-fintech .sh__v, .abcdt-sector-fintech .sh__v2{ animation:none;transition:none }
  /* Le cadre est déjà posé : pas d'arrivée, pas de resserrement. */
  .abcdt-sector-fintech .sh__media{ --set:0 }
}


/* ── 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-fintech .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-fintech .sh{ padding-top:calc(var(--nav-h) + clamp(8rem,26vh,13rem)) }
}

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

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