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

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

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



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



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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

   Territoire : LA DEMANDE ET LE TEMPS.
   Signature : L'ANNÉE N'EST PAS PLATE — douze mois posés en typographie,
   dont le corps traduit la concentration de la demande.

   Ce bloc ne doit surtout PAS être confondu avec la page service
   « Acquisition e-commerce », qui traite du dispositif (leviers, marge,
   objet). Ici, le sujet est le CALENDRIER : quand la demande arrive, et
   ce que ça impose au budget.

   Ce n'est pas un graphique : aucune valeur n'est mesurée, aucune échelle
   n'est prétendue. C'est une échelle typographique qui énonce un principe.
   ═══════════════════════════════════════════════════════════════════════ */
.abcdt-sector-ecommerce .dm{ background:var(--ink);border-top:1px solid var(--line) }

.abcdt-sector-ecommerce .dm__y{
  list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.35rem clamp(.5rem,2vw,1.4rem);
  margin:clamp(2.6rem,7vh,4rem) 0 0;padding:0 0 clamp(1.4rem,3.5vh,2rem);
  border-bottom:1px solid var(--line)
}
.abcdt-sector-ecommerce .dm__m{
  font-family:var(--ff-d);letter-spacing:-.04em;line-height:.92;
  /* Trois régimes, trois poids. Le creux reste lisible — il n'est pas
     effacé, il est simplement calme. */
  font-weight:500;font-size:clamp(1rem,2.6vw,1.6rem);color:var(--text-3)
}
.abcdt-sector-ecommerce .dm__m[data-w="1"]{ font-weight:700;font-size:clamp(1.4rem,4.2vw,2.8rem);color:var(--text-2) }
.abcdt-sector-ecommerce .dm__m[data-w="2"]{ font-weight:800;font-size:clamp(2.1rem,7vw,4.8rem);color:#fff }

.abcdt-sector-ecommerce .dm__g{ margin:clamp(2rem,5vh,3rem) 0 0 }
.abcdt-sector-ecommerce .dm__p{ margin:0 0 1.4rem;max-width:60ch;color:var(--text-2);font-size:1rem;line-height:1.72 }
.abcdt-sector-ecommerce .dm__p:last-child{ margin-bottom:0 }
.abcdt-sector-ecommerce .dm__p b{ color:#fff;font-weight:500 }

@media (min-width:900px){
  .abcdt-sector-ecommerce .dm__y{ flex-wrap:nowrap;justify-content:space-between;gap:0 }
  .abcdt-sector-ecommerce .dm__g{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4rem) }
  .abcdt-sector-ecommerce .dm__p{ margin-bottom:0 }
}

/* Les mois se posent de gauche à droite. Douze délais courts : c'est le
   seul endroit de la page où l'ordre d'apparition porte du sens. */
.abcdt-sector-ecommerce.abc-motion .dm__y.is-in .dm__m{ animation:abcdtsec_dm-in .5s var(--e) backwards }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(1){ animation-delay:.00s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(2){ animation-delay:.04s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(3){ animation-delay:.08s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(4){ animation-delay:.12s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(5){ animation-delay:.16s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(6){ animation-delay:.20s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(7){ animation-delay:.24s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(8){ animation-delay:.28s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(9){ animation-delay:.32s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(10){ animation-delay:.36s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(11){ animation-delay:.40s }
.abcdt-sector-ecommerce.abc-motion .dm__y .dm__m:nth-child(12){ animation-delay:.44s }
@keyframes abcdtsec_dm-in{ from{ opacity:0;transform:translate3d(0,10px,0) } }
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-ecommerce.abc-motion .dm__y.is-in .dm__m{ animation:none }
}


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

   Longue approche presque plate, puis tout se passe d'un coup, puis
   plus rien. C'est la courbe d'une saison commerciale, appliquée au
   mouvement de la page.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-sector-ecommerce{ --es:cubic-bezier(.86,0,.12,1);--ds:.72s }

/* ── La matière suit le calendrier ─────────────────────────────────
   Une bande derrière les douze mois, presque absente à gauche et dense
   à droite : la densité lumineuse dit la même chose que le corps des
   caractères. --peak resserre la concentration ; sa valeur par défaut,
   1, est déjà la valeur concentrée. */
.abcdt-sector-ecommerce .dm{ position:relative;isolation:isolate;overflow:hidden }
.abcdt-sector-ecommerce .dm .wrap{ position:relative;z-index:1 }
/* Le calendrier : la bande et les douze mois occupent le même espace,
   la matière passe DERRIÈRE les caractères. */
.abcdt-sector-ecommerce .dm__cal{ position:relative;margin:clamp(2.6rem,7vh,4rem) 0 0 }
.abcdt-sector-ecommerce .dm__band{
  position:absolute;left:0;right:0;top:-12%;bottom:-12%;
  z-index:0;pointer-events:none;overflow:hidden;
  --peak:1
}
.abcdt-sector-ecommerce .dm__bp, .abcdt-sector-ecommerce .dm__bv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.4) brightness(.8);
  opacity:.34;mix-blend-mode:screen;
  /* Presque rien jusqu'en septembre, tout en novembre et décembre. */
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,calc(.06 * (2 - var(--peak)))) 0%,
    rgba(0,0,0,calc(.10 * (2 - var(--peak)))) 34%,
    rgba(0,0,0,calc(.30 * (2 - var(--peak)))) 62%,
    #000 84%,#000 100%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,calc(.06 * (2 - var(--peak)))) 0%,
    rgba(0,0,0,calc(.10 * (2 - var(--peak)))) 34%,
    rgba(0,0,0,calc(.30 * (2 - var(--peak)))) 62%,
    #000 84%,#000 100%);
  transform:scale(calc(1.06 - var(--peak) * .06));
  transition:transform 1.4s var(--es)
}
.abcdt-sector-ecommerce .dm__bv{ opacity:0;transition:opacity 1.5s var(--es),transform 1.4s var(--es) }
.abcdt-sector-ecommerce .dm__bv.is-lit{ opacity:.34 }
.abcdt-sector-ecommerce .dm__y{ position:relative;z-index:1;margin-top:0 }
@media (prefers-reduced-motion:reduce){
  .abcdt-sector-ecommerce .dm__bp, .abcdt-sector-ecommerce .dm__bv{ transition:none;transform:none }
}

/* ── HERO — LA LUMIÈRE QUI TRAVERSE L'ANNÉE ────────────────────────
   Le plan couvre tout le hero. La fenêtre de lumière ne le recouvre
   plus : elle l'ÉCLAIRE. En fondu additif, elle traverse l'écran en
   seize secondes, vite sur les mois creux, puis ralentit et
   s'immobilise sur le quart droit. Là où elle passe, la matière est
   deux fois plus lisible qu'ailleurs — c'est la saison, dite en
   lumière plutôt qu'en ombre.

   Le second calque rejoue la même matière à 1,5 × : deux pulsations
   décalées, la sensation de flux.
   ────────────────────────────────────────────────────────────────── */
.abcdt-sector-ecommerce .sh__pa, .abcdt-sector-ecommerce .sh__pb{ inset:0 }
.abcdt-sector-ecommerce .sh__poster, .abcdt-sector-ecommerce .sh__v{
  opacity:.9;object-position:50% 42%;
  filter:grayscale(1) contrast(1.2) brightness(1.0);
  animation:abcdtsec_ecom-pan 30s var(--es) infinite alternate
}
.abcdt-sector-ecommerce .sh__v.is-lit, .abcdt-sector-ecommerce .sh__v[data-eager]{ opacity:.9 }
.abcdt-sector-ecommerce .sh__v2{
  opacity:.44;mix-blend-mode:screen;
  filter:grayscale(1) contrast(1.5) brightness(1.06);
  animation:abcdtsec_ecom-pan 17s var(--es) infinite alternate-reverse
}
@keyframes abcdtsec_ecom-pan{ from{ transform:scale(1.12) translate3d(-2.8%,0,0) } to{ transform:scale(1.04) translate3d(2.8%,0,0) } }

/* La fenêtre de lumière, en fondu ADDITIF : elle ajoute, elle ne
   retranche pas. On anime background-position, pas une variable
   personnalisée : une variable non déclarée avec @property saute d'un
   palier à l'autre au lieu de glisser. */
.abcdt-sector-ecommerce .sh__fx{
  mix-blend-mode:screen;
  background:radial-gradient(26% 118% at 50% 54%,
    rgba(232,232,240,.42) 0%, rgba(232,232,240,.16) 40%, transparent 74%);
  background-size:250% 100%;background-repeat:no-repeat;
  animation:abcdtsec_ecom-light 16s cubic-bezier(.86,0,.12,1) infinite
}
@keyframes abcdtsec_ecom-light{
  0%      { background-position:-8% 0 }
  44%     { background-position:56% 0 }
  72%,100%{ background-position:106% 0 }
}
/* Un filet d'horizon marque le bas du hero, là où le calendrier commence. */
.abcdt-sector-ecommerce .sh__veil::after{
  content:'';position:absolute;left:0;right:0;bottom:clamp(3rem,9vh,5.5rem);height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,232,240,.22) 22%,rgba(232,232,240,.22) 78%,transparent)
}

@media (prefers-reduced-motion:reduce){
  .abcdt-sector-ecommerce .sh__poster, .abcdt-sector-ecommerce .sh__v, .abcdt-sector-ecommerce .sh__v2, .abcdt-sector-ecommerce .sh__fx{ 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-ecommerce .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-ecommerce .sh{ padding-top:calc(var(--nav-h) + clamp(8rem,26vh,13rem)) }
}

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

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