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

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

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



.abcdt-methode a{color:inherit}



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

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

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


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

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

.abcdt-methode .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-methode .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-methode .after-cta{margin-top:clamp(2.5rem,7vh,4.5rem)}

/* ── Curseur personnalisé ───────────────────────────────────────
   Canvas 2D plein écran, hors du flux, sans coût de mise en page.
   Ces deux règles sont volontairement HORS du scope .abchome : la
   couche suit le pointeur sur toute la fenêtre. Elles ne s'appliquent
   que si le script a réellement démarré le canvas (classe .has-tube
   posée sur <body> à ce moment-là, jamais au chargement). */


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

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

.abcdt-methode .rd{ max-width:var(--maxw);margin-inline:auto;padding:4.5rem var(--gut) }
.abcdt-methode .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
}

.abcdt-methode .sm{
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  height:var(--sm-h,clamp(7rem,20vh,13rem));
  --sm-op:.5
}
.abcdt-methode .sm__m{ position:absolute;inset:0;z-index:0 }
.abcdt-methode .sm__p, .abcdt-methode .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-methode .sm__v{ opacity:0;transition:opacity 1.6s var(--e) }
.abcdt-methode .sm__v.is-lit{ opacity:var(--sm-op) }
.abcdt-methode .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-methode .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-methode .sm--thin{ --sm-h:clamp(4.5rem,12vh,7.5rem);--sm-op:.34 }
/* Variante haute, pour une vraie entrée en matière. */
.abcdt-methode .sm--tall{ --sm-h:clamp(10rem,34vh,20rem);--sm-op:.62 }

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

/* ═══════════════════════════════════════════════════════════════════════
   ABC DIGITAL TOUCH — Page « Méthode d'acquisition digitale »

   Signature de la page : L'ÉCART QUI SE REFERME.
   Un mot dédoublé, flou, décalé — plusieurs réponses possibles — qui se
   résout en une seule ligne nette. C'est la même variable --sp partout :
   l'écartement des fantômes. --sp:0 = résolu.

   RÈGLE D'ÉTAT PAR DÉFAUT : toute valeur écrite ici est l'ÉTAT ABOUTI.
   Sans JavaScript et sous mouvement réduit, la page est déjà lisible,
   nette et complète ; le script ne fait que reculer temporairement.

   Un seul élément collant sur la page : .lp__stage (au-dessus de 900px).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Signature de mouvement ────────────────────────────────────────
   La page de la méthode converge : long freinage, rien de brusque, rien
   qui rebondit. C'est la courbe la plus proche du socle du site — cette
   page EST le socle, elle n'a pas à se singulariser par la vitesse.  */
.abcdt-methode{ --es:cubic-bezier(.16,1,.3,1);--ds:.85s }

/* ── L'écart ───────────────────────────────────────────────────────
   Deux fantômes portés par les pseudo-éléments du même mot : aucun
   nœud supplémentaire dans le DOM, rien à lire pour un lecteur d'écran.
   --sp vaut 0 par défaut : les fantômes sont exactement sous le mot,
   invisibles. Le script le monte à 1 puis le laisse retomber. */
.abcdt-methode .ec{
  position:relative;display:inline-block;
  --sp:0
}
.abcdt-methode .ec::before, .abcdt-methode .ec::after{
  content:attr(data-ec);
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;
  color:var(--text);
  opacity:calc(var(--sp) * .34);
  filter:blur(calc(var(--sp) * 7px));
  transition:opacity .9s var(--e),filter .9s var(--e),transform .9s var(--e)
}
.abcdt-methode .ec::before{ transform:translate3d(calc(var(--sp) * -.16em), calc(var(--sp) * -.06em), 0) }
.abcdt-methode .ec::after{  transform:translate3d(calc(var(--sp) *  .19em), calc(var(--sp) *  .07em), 0) }

@media (prefers-reduced-motion:reduce){
  .abcdt-methode .ec::before, .abcdt-methode .ec::after{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════
   01 · HERO
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .mh{
  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)
}
/* ── LES TROIS FENÊTRES ────────────────────────────────────────────
   Une grille de trois colonnes qui occupe la moitié droite du hero et
   toute sa hauteur. --hsp écarte les fenêtres, les décale verticalement
   et désaccorde leurs contrastes ; à 0 elles n'en font plus qu'une.

   La bande est masquée à gauche pour que le titre la traverse : le
   média participe à la composition, il n'est pas posé derrière. */
.abcdt-methode .mh__media{
  position:absolute;right:0;top:0;bottom:0;
  width:min(58%,760px);z-index:0;
  display:grid;grid-template-columns:.28fr .24fr .34fr;
  gap:calc(var(--hsp) * 26px);
  --hsp:0;--par:0
}
.abcdt-methode .mh__w{
  position:relative;overflow:hidden;display:block;
  transition:transform 2.4s var(--e),filter 2.4s var(--e),opacity 2.4s var(--e)
}
.abcdt-methode .mh__w--1{ transform:translate3d(0,calc(var(--hsp) * -3.4%),0);filter:contrast(calc(1.15 + var(--hsp) * .5)) brightness(calc(.98 - var(--hsp) * .34)) }
.abcdt-methode .mh__w--2{ transform:translate3d(0,calc(var(--hsp) *  4.6%),0);filter:contrast(calc(1.15 + var(--hsp) * .8)) brightness(calc(1.12 - var(--hsp) * .5)) }
.abcdt-methode .mh__w--3{ transform:translate3d(0,calc(var(--hsp) * -6.2%),0);filter:contrast(calc(1.15 + var(--hsp) * .35)) brightness(calc(.86 - var(--hsp) * .26)) }

.abcdt-methode .mh__poster, .abcdt-methode .mh__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:grayscale(1);
  /* La dérive permanente : trente-quatre secondes pour parcourir 4 %,
     en va-et-vient. C'est lent, mais un œil posé cinq secondes le voit.
     Elle tourne sans défilement, sans survol, sans interaction. */
  animation:abcdtme_mh-drift 34s var(--e) infinite alternate
}
.abcdt-methode .mh__w--2 .mh__poster, .abcdt-methode .mh__w--2 .mh__v{ animation-duration:41s;animation-direction:alternate-reverse }
.abcdt-methode .mh__w--3 .mh__poster, .abcdt-methode .mh__w--3 .mh__v{ animation-duration:28s }
@keyframes abcdtme_mh-drift{
  from{ transform:translate3d(-2%,0,0) scale(1.06) }
  to{   transform:translate3d( 2%,0,0) scale(1.10) }
}
.abcdt-methode .mh__v{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-methode .mh__v.is-lit{ opacity:1 }

/* Le voile : il dégrade la bande vers le noir à gauche, pour que le
   titre passe dessus sans jamais perdre de contraste, et l'éteint en
   bas pour rejoindre la section suivante. */
.abcdt-methode .mh__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(6,6,10,.62) 16%, rgba(6,6,10,.06) 46%, rgba(6,6,10,.22) 100%),
    linear-gradient(to bottom, rgba(6,6,10,.3) 0%, rgba(6,6,10,.04) 36%, rgba(6,6,10,.5) 84%, var(--ink) 100%)
}
.abcdt-methode .mh__in{ position:relative;z-index:2 }
@media (min-width:900px){
  /* Le titre déborde sur la bande : c'est lui qui la révèle. */
  .abcdt-methode .mh__h{ max-width:min(15ch,62%) }
  .abcdt-methode .mh__l{ max-width:min(52ch,50%) }
}

/* ── Mobile ────────────────────────────────────────────────────────
   Une seule fenêtre, en bandeau haut, pleine largeur, avec la même
   dérive. Le hero mobile garde donc une vraie matière en mouvement :
   ce n'est pas un titre posé sur une image fixe. */
@media (max-width:899px){
  .abcdt-methode .mh__media{
    position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;
    height:min(46vh,340px);grid-template-columns:1fr;gap:0
  }
  .abcdt-methode .mh__w--2, .abcdt-methode .mh__w--3{ display:none }
  .abcdt-methode .mh__w--1{ filter:contrast(1.3) brightness(.72) }
  .abcdt-methode .mh{ padding-top:calc(var(--nav-h) + min(46vh,340px) - 2rem) }
  .abcdt-methode .mh__veil{
    background:linear-gradient(to bottom, rgba(6,6,10,.28) 0%, rgba(6,6,10,.5) 52%, var(--ink) 100%)
  }
}

.abcdt-methode .mh__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-methode .mh__k i{ width:26px;height:1px;background:var(--line-2);display:block;flex:none }

.abcdt-methode .mh__h{
  margin:0 0 0 -.035em;
  font-family:var(--ff-d);font-weight:800;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(2.05rem,6.4vw,4.7rem);color:var(--text);
  max-width:17ch
}
.abcdt-methode .mh__h .ec{ display:block }

.abcdt-methode .mh__l{
  margin:clamp(1.8rem,5vh,2.8rem) 0 0;max-width:60ch;
  color:var(--text-2);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6
}
.abcdt-methode .mh__l em{ font-style:normal;color:var(--text) }

.abcdt-methode .mh__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
}

/* ═══════════════════════════════════════════════════════════════════
   02 · LE CONSTAT
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .cst__l{ margin:clamp(2.4rem,7vh,3.6rem) 0 0 }
.abcdt-methode .cst__i{
  margin:0;padding:clamp(1.3rem,3.4vh,1.9rem) 0;
  border-top:1px solid var(--line);
  max-width:74ch;color:var(--text-2);font-size:1rem;line-height:1.68
}
.abcdt-methode .cst__i b{ color:#fff;font-weight:500 }
.abcdt-methode .cst__x{
  margin:clamp(2rem,5vh,3rem) 0 0;
  font-family:var(--ff-d);font-weight:600;letter-spacing:-.028em;line-height:1.18;
  font-size:clamp(1.25rem,3.1vw,2rem);color:var(--text);max-width:24ch
}
@media (min-width:1100px){
  /* Le titre tient la colonne gauche, les trois constats la droite :
     même partition que la boucle, la page garde un seul rythme. */
  .abcdt-methode .cst .wrap{
    display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);
    column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start
  }
  .abcdt-methode .cst .eyebrow{ grid-column:1;grid-row:1 }
  .abcdt-methode .cst .h2{ grid-column:1;grid-row:2 }
  .abcdt-methode .cst__l{ grid-column:2;grid-row:1 / span 3;margin-top:.2rem }
  .abcdt-methode .cst__i:first-child{ border-top:0;padding-top:0 }
  .abcdt-methode .cst__x{ grid-column:1;grid-row:3;margin-top:clamp(2rem,5vh,3rem) }
}

/* ═══════════════════════════════════════════════════════════════════
   03 · LA BOUCLE — l'unique collant
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .lp{ position:relative;background:var(--ink);padding:clamp(5rem,13vh,9.5rem) 0 0;border-top:1px solid var(--line) }
.abcdt-methode .lp__head .lede{ max-width:62ch }

.abcdt-methode .lp__grid{ margin-top:clamp(3rem,9vh,5.5rem) }

/* Scène : sous 900px elle est posée une seule fois, sans collage, mais
   EN PLEINE LARGEUR. Une scène rognée dans la gouttière ne serait plus
   une scène — ce serait une vignette. Le plan déborde donc de la
   colonne de texte, comme les coutures. */
.abcdt-methode .lp__stage{ position:relative;margin-bottom:clamp(2.2rem,6vh,3rem) }
@media (max-width:899px){
  .abcdt-methode .lp__stage{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)
  }
  .abcdt-methode .lp__plate{ aspect-ratio:16/10;border-left:0;border-right:0 }
}

.abcdt-methode .lp__rule{ display:none }

/* ── LA SCÈNE ──────────────────────────────────────────────────────
   Un seul plan, quatre régimes. Les classes is-s1 à is-s4 sont posées
   par le script sur .lp__stage au fil des mouvements. Aucun élément
   n'est ajouté d'un régime à l'autre : c'est la même vidéo, masquée,
   recadrée et éclairée autrement.

   --frag  écartement des fentes du masque (signal fragmenté)
   --gro   agrandissement (action)
   --drift dérive horizontale (action)
   --lum   luminosité
   L'état écrit par défaut est celui du RETOUR : recomposé, calme, net.
   C'est donc lui qu'on voit sans script.
   ────────────────────────────────────────────────────────────────── */
.abcdt-methode .lp__plate{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:16/9;border:1px solid var(--line);background:var(--ink-2);
  --frag:0px;--gro:1;--drift:0%;--lum:.86;--sat:1
}
.abcdt-methode .lp__poster, .abcdt-methode .lp__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(var(--sat)) contrast(1.24) brightness(var(--lum));
  transform:translate3d(var(--drift),0,0) scale(var(--gro));
  /* Les fentes : un seul dégradé répété. À --frag:0 le masque est plein,
     donc invisible — l'image est entière. */
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(12.5% - var(--frag)),transparent calc(12.5% - var(--frag)) 12.5%);
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(12.5% - var(--frag)),transparent calc(12.5% - var(--frag)) 12.5%);
  /* Pas de transition sur le masque : interpoler un dégradé répété
     plein cadre se recalcule à chaque image et fait chuter la page.
     L'écartement des fentes change d'un coup, ce qui est juste — un
     changement de régime n'est pas un fondu. Le reste glisse. */
  transition:transform 1.5s var(--e),filter 1.5s var(--e)
}
.abcdt-methode .lp__v{ opacity:0;transition:opacity 1.4s var(--e) }
.abcdt-methode .lp__v.is-lit{ opacity:1 }

/* 01 · SIGNAL — fragmenté, froid, immobile. */
.abcdt-methode .lp__stage.is-s1 .lp__plate{ --frag:11px;--lum:.62;--sat:1;--gro:1.02 }
/* 02 · DÉCISION — les fentes se referment, le cadre se pose. */
.abcdt-methode .lp__stage.is-s2 .lp__plate{ --frag:0px;--lum:.78;--gro:1 }
/* 03 · ACTION — l'échelle et la dérive montent, la lumière avec. */
.abcdt-methode .lp__stage.is-s3 .lp__plate{ --frag:0px;--lum:1;--gro:1.12;--drift:-3.5% }
/* 04 · RETOUR — tout revient, un cran plus large qu'au départ. */
.abcdt-methode .lp__stage.is-s4 .lp__plate{ --frag:0px;--lum:.82;--gro:.99;--drift:0% }

/* Le cadre de la décision. Fermé par défaut (état abouti), il s'ouvre
   pendant le signal et pendant l'action. */
.abcdt-methode .lp__fr{
  position:absolute;z-index:3;pointer-events:none;
  inset:clamp(.7rem,2vw,1.2rem);
  border:1px solid rgba(232,232,240,var(--fro,.20));
  transition:inset 1.4s var(--e),border-color 1.4s var(--e)
}
.abcdt-methode .lp__stage.is-s1 .lp__fr{ inset:0;--fro:.04 }
.abcdt-methode .lp__stage.is-s2 .lp__fr{ inset:clamp(1.1rem,3.2vw,2.2rem);--fro:.46 }
.abcdt-methode .lp__stage.is-s3 .lp__fr{ inset:clamp(.4rem,1.2vw,.8rem);--fro:.12 }
.abcdt-methode .lp__stage.is-s4 .lp__fr{ inset:clamp(.9rem,2.4vw,1.5rem);--fro:.28 }

@media (prefers-reduced-motion:reduce){
  .abcdt-methode .lp__poster, .abcdt-methode .lp__v, .abcdt-methode .lp__fr{ transition:none }
  .abcdt-methode .lp__stage.is-s1 .lp__plate, .abcdt-methode .lp__stage.is-s2 .lp__plate, .abcdt-methode .lp__stage.is-s3 .lp__plate, .abcdt-methode .lp__stage.is-s4 .lp__plate{
    --frag:0px;--lum:.86;--gro:1;--drift:0%
  }
}
.abcdt-methode .lp__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom, rgba(6,6,10,.06) 0%, rgba(6,6,10,.34) 100%),
    radial-gradient(80% 70% at 30% 40%, rgba(26,111,255,.08), transparent 70%)
}
.abcdt-methode .lp__plate .tex{ z-index:2 }

.abcdt-methode .lp__mv{ list-style:none;margin:0;padding:0;counter-reset:lpm }
.abcdt-methode .lp__m{
  padding:clamp(2rem,6vh,3.2rem) 0;
  border-top:1px solid var(--line)
}
.abcdt-methode .lp__m:first-child{ border-top:0 }
.abcdt-methode .lp__n{
  margin:0 0 1rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-methode .lp__t{
  margin:0 0 1.3rem;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(1.55rem,4.4vw,2.5rem);color:#fff;max-width:16ch
}
.abcdt-methode .lp__p{ margin:0 0 1.1rem;max-width:58ch;color:var(--text-2);font-size:1rem;line-height:1.7 }
.abcdt-methode .lp__p:last-child{ margin-bottom:0 }

.abcdt-methode .lp__foot{ padding-bottom:clamp(5rem,13vh,9.5rem) }
.abcdt-methode .lp__end{
  margin:clamp(2.5rem,7vh,4rem) 0 0;padding-top:clamp(1.6rem,4vh,2.4rem);
  border-top:1px solid var(--line);
  max-width:44ch;
  font-family:var(--ff-d);font-weight:600;letter-spacing:-.026em;line-height:1.2;
  font-size:clamp(1.15rem,2.6vw,1.7rem);color:var(--text)
}

@media (min-width:900px){
  .abcdt-methode .lp__grid{
    display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);
    column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start
  }
  /* LE SEUL ÉLÉMENT COLLANT DE LA PAGE. La règle et le plan vivent dans
     le même conteneur : un seul collage, pas deux. */
  .abcdt-methode .lp__stage{
    position:sticky;top:calc(var(--nav-h) + 2.5rem);margin-bottom:0;
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:start
  }
  .abcdt-methode .lp__plate{ aspect-ratio:5/6 }

  /* La règle — Scroll Spy @ddoemonn réduit à quatre graduations.
     Purement décorative : aria-hidden, aucun lien, aucun rôle. */
  .abcdt-methode .lp__rule{ display:grid;gap:clamp(1rem,2.6vh,1.6rem);padding-top:.4rem }
  /* --on : 0 = graduation au repos (état par défaut, parfaitement
     lisible), 1 = mouvement en cours. Le script ne fait que la lever. */
  .abcdt-methode .lp__g{ display:flex;align-items:center;gap:.6rem;--on:0 }
  .abcdt-methode .lp__g i{
    display:block;height:1px;flex:none;
    width:calc(14px + var(--on,0) * 22px);
    background:var(--line-2);
    transition:width .7s var(--e),background-color .7s var(--e)
  }
  .abcdt-methode .lp__g b{
    font-family:var(--ff-d);font-weight:700;font-size:.7rem;letter-spacing:.06em;
    color:var(--text-3);transition:color .7s var(--e)
  }
  .abcdt-methode .lp__g i{ background:rgba(232,232,240,calc(.26 + var(--on) * .70)) }
  .abcdt-methode .lp__g b{ color:rgba(232,232,240,calc(.60 + var(--on) * .40)) }

  .abcdt-methode .lp__m{ padding:clamp(3.5rem,11vh,6.5rem) 0 }
  .abcdt-methode .lp__m:first-child{ padding-top:0 }
  .abcdt-methode .lp__t{ font-size:clamp(1.8rem,2.9vw,2.7rem) }
}

@media (prefers-reduced-motion:reduce){
  .abcdt-methode .lp__stage{ position:static }
}

/* ═══════════════════════════════════════════════════════════════════
   04 · LA CADENCE
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .cd__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-methode .cd__i{
  position:relative;padding:clamp(1.4rem,3.6vh,2rem) 0;border-top:1px solid var(--line)
}
.abcdt-methode .cd__w{
  margin:0 0 .55rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;
  font-size:.98rem;color:#fff
}
.abcdt-methode .cd__d{ margin:0;max-width:64ch;color:var(--text-2);font-size:.98rem;line-height:1.68 }
.abcdt-methode .cd__d b{ color:var(--text);font-weight:500 }

@media (min-width:900px){
  .abcdt-methode .cd__l{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1.4rem,3vw,2.6rem)
  }
  .abcdt-methode .cd__i{ padding:1.6rem 0 0 }
  .abcdt-methode .cd__w{ font-size:.9rem;margin-bottom:.8rem }
  .abcdt-methode .cd__d{ font-size:.92rem }
  /* Le filet qui relie les quatre temps : une seule ligne, tracée par
     --tr. Par défaut elle est entière (état abouti). */
  .abcdt-methode .cd__l::before{
    content:'';grid-column:1 / -1;height:1px;margin-bottom:0;
    background:linear-gradient(90deg,var(--line-2),var(--line));
    transform:scaleX(var(--tr,1));transform-origin:left center;
    transition:transform 1.4s var(--e)
  }
  .abcdt-methode .cd__i{ border-top:0 }
}

/* ═══════════════════════════════════════════════════════════════════
   05 · LES TROIS RÉGIMES
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .rg__l{ margin:clamp(2.6rem,7vh,4rem) 0 0 }
.abcdt-methode .rg__i{
  padding:clamp(1.8rem,4.5vh,2.6rem) 0;border-top:1px solid var(--line);position:relative
}
.abcdt-methode .rg__k{
  margin:0 0 .9rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)
}
.abcdt-methode .rg__t{
  margin:0 0 1rem;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.12;color:#fff;max-width:18ch
}
.abcdt-methode .rg__p{ margin:0;max-width:56ch;color:var(--text-2);font-size:.98rem;line-height:1.7 }
/* Le verbe de liaison : ce que ce régime fait au suivant. Il est posé
   comme une annotation, jamais comme une flèche de diagramme. */
.abcdt-methode .rg__v{ margin:1.3rem 0 0 }
.abcdt-methode .rg__v span{
  display:inline-block;padding:.3rem .75rem;border:1px solid var(--line-2);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)
}
@media (min-width:900px){
  .abcdt-methode .rg__l{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.8rem,4vw,3.4rem) }
  .abcdt-methode .rg__i{ display:flex;flex-direction:column }
  .abcdt-methode .rg__v{ margin-top:auto;padding-top:1.6rem }
}

/* ═══════════════════════════════════════════════════════════════════
   06 · CE QUE LA MÉTHODE N'EST PAS
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .nt{ position:relative;isolation:isolate;background:var(--ink-2);border-top:1px solid var(--line) }
.abcdt-methode .nt__in{ position:relative;z-index:1 }
.abcdt-methode .nt .tex{ z-index:0;opacity:.07 }
.abcdt-methode .nt__l{ list-style:none;margin:clamp(2.4rem,7vh,3.6rem) 0 0;padding:0 }
.abcdt-methode .nt__i{
  padding:clamp(1.3rem,3.4vh,1.9rem) 0;border-top:1px solid var(--line);
  max-width:72ch;color:var(--text-2);font-size:1rem;line-height:1.68
}
.abcdt-methode .nt__i b{ color:#fff;font-weight:500 }

/* ═══════════════════════════════════════════════════════════════════
   07 · CE QUE ÇA DONNE
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode .pv__l{ list-style:none;margin:clamp(2.6rem,7vh,4rem) 0 0;padding:0 }
.abcdt-methode .pv__i{ padding:clamp(1.6rem,4vh,2.2rem) 0;border-top:1px solid var(--line) }
.abcdt-methode .pv__v{
  margin:0;font-family:var(--ff-d);font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(2.6rem,9vw,4.6rem);color:#fff
}
.abcdt-methode .pv__m{ margin:.7rem 0 0;color:var(--text);font-size:.98rem;line-height:1.5;max-width:26ch }
.abcdt-methode .pv__c{ margin:.5rem 0 0;color:var(--text-3);font-size:.8rem;line-height:1.5 }
@media (min-width:900px){
  .abcdt-methode .pv__l{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.8rem,4vw,3.4rem) }
  .abcdt-methode .pv__v{ font-size:clamp(2.8rem,5vw,4.4rem) }
}

/* ═══════════════════════════════════════════════════════════════════
   RÉVÉLATIONS — uniquement sous .js-motion, sinon rien n'est masqué.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-methode.abc-motion [data-rv]{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--ds) var(--es),transform var(--ds) var(--es)
}
.abcdt-methode.abc-motion [data-rv].is-in{ opacity:1;transform:none }
.abcdt-methode.abc-motion .lp__m{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity calc(var(--ds) * 1.06) var(--es),transform calc(var(--ds) * 1.06) var(--es)
}
.abcdt-methode.abc-motion .lp__m.is-in{ opacity:1;transform:none }
@media (prefers-reduced-motion:reduce){
  .abcdt-methode.abc-motion [data-rv], .abcdt-methode.abc-motion .lp__m{ opacity:1;transform:none;transition:none }
}

/* ── COUTURES ──────────────────────────────────────────────────────
   Trois passages de matière, du plus large au plus serré : la page se
   referme sur le même geste que le titre du hero. */
.abcdt-methode .sm__p--tight{ object-fit:cover;transform:scale(1.9);filter:grayscale(1) contrast(1.5) brightness(.6) }

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

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