/* ═══════════════════════════════════════════════════════════════════════
   ABC DIGITAL TOUCH — Template article de blog (généré)
   Généré par scripts/build-blog-module.py — ne pas éditer à la main.

   Tout est scopé sous .abcdt-article. Aucune règle ne touche html, body,
   a, button, img ni les titres globaux : le header et le pied de page
   Elementor, Axeptio et HubSpot ne sont pas affectés — et les 41
   articles non migrés non plus, puisque cette feuille n'est même pas
   chargée chez eux.

   Les déclarations de html{} et body{} du prototype sont retirées du
   scope et REPORTÉES ici sur le wrapper : c'est ce qui donne au corps
   sa couleur, sa police et son fond.
   ═══════════════════════════════════════════════════════════════════════ */

.abcdt-article{
  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;
}

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

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

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



.abcdt-article a{color:inherit}



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

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

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


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

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

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


.abcdt-article .art{
  /* La mesure : la seule décision qui gouverne toute la page.
     Elle a bougé deux fois. D'abord 41 rem, qui donnaient 78 caractères
     par ligne — trop long, l'œil peinait à retrouver le début de ligne.
     Puis 39 rem, confortables mais étriquées : sur un écran de 1440,
     elles laissaient 384 px de vide de chaque côté, et comme le
     sommaire occupe la marge gauche, tout le déséquilibre se voyait à
     droite.

     Valeur retenue aujourd'hui : 43,75 rem, soit 700 px. Mesurée sur
     la page et non calculée, elle donne 66 à 68 caractères par ligne
     selon l'article — dans la bande confortable, et une ligne de moins
     par paragraphe qu'à 39 rem. 45 rem (720 px) ont été essayées
     côte à côte : elles produisent exactement le même nombre de lignes
     que 700 px et ne prennent que de la place au sommaire. Le gain
     s'arrête donc là.

     Cette valeur ne s'applique qu'à partir de 1024 px, en même temps
     que la réserve latérale. En dessous, 39 rem : sur une tablette en
     portrait, 700 px sur 768 de large donneraient un texte
     quasiment pleine page. */
  --measure:39rem;

  /* La réserve latérale où débordent les figures larges et où se loge
     le sommaire. Elle vaut zéro par défaut, et c'est essentiel : une
     colonne « minmax(0, 9rem) » ne se replie pas toute seule quand la
     place manque. Sur un écran de 375 px, les deux réserves réclamaient
     288 px sur 327 disponibles et la colonne de texte tombait à 130 px
     — deux mots par ligne. La réserve ne s'ouvre donc qu'à partir de
     1024 px, là où il y a réellement de la marge à donner. */
  --bleed:0rem;

  --art-lh:1.78;
  --art-fs:1.09rem;

  /* Le filet, matière de base de toute la mise en page éditoriale :
     pas de cartes, pas d'ombres, pas de fonds. Des lignes. */
  --rule:rgba(232,232,240,.13);
  --rule-2:rgba(232,232,240,.24);

  /* Le bleu ne sert qu'à trois choses dans un article : le lien dans
     le texte, la citation, et le repère de lecture. Rien d'autre. */
  --art-blue-soft:rgba(26,111,255,.45);

  /* Distance entre le bord du .wrap et le bord de la fenêtre. Sert au
     débord du média du hero : sans elle, « calc(50% - 50vw) » se
     calcule sur la largeur de la colonne de grille et non sur celle du
     conteneur — le média déborde alors de plusieurs centaines de
     pixels hors de l'écran, et se fait rogner pour rien. */
  --edge:max(0px,calc((100vw - var(--maxw)) / 2));
}

/* ═══════════════════════════════════════════════════════════════════
   01 · REPÈRE DE LECTURE
   Un filet d'un pixel, en haut, qui ne mesure QUE l'article — pas la
   page. Arriver à 100 % doit vouloir dire « vous avez fini de lire »,
   pas « vous êtes en bas du pied de page ».
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-art-prog{
  position:fixed;inset:0 0 auto;height:1px;z-index:120;
  background:transparent;pointer-events:none
}
.abcdt-art-prog::after{
  content:'';display:block;height:100%;width:var(--p,0%);
  background:var(--blue);
  transform-origin:left;transition:width .12s linear
}
@media(prefers-reduced-motion:reduce){ .abcdt-art-prog::after{transition:none} }

/* ═══════════════════════════════════════════════════════════════════
   02 · HERO ÉDITORIAL
   Composition asymétrique : le texte tient la gauche sur sept
   douzièmes, l'image occupe la droite et déborde jusqu'au bord de la
   fenêtre. Pas de plein écran, pas de vidéo : sur un article, la
   première chose qu'on doit pouvoir faire, c'est commencer à lire.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .ah{position:relative;padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(3rem,8vh,5rem)}
.abcdt-article .ah__in{position:relative;z-index:1}

@media(min-width:1024px){
  .abcdt-article .ah{padding-top:clamp(3rem,8vh,5.5rem)}
  .abcdt-article .ah__in{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(2rem,4vw,4rem);
    /* « stretch », pas « end ». C'est le texte qui donne sa hauteur au
       hero, et l'image qui s'y adapte — jamais l'inverse. Avec
       « align-items:end », un plateau de 544 px alignait le titre sur
       son bas : sur un article court, cela donnait 473 px de vide
       au-dessus du titre. Comme 54 articles sur 56 n'ont pas de chapô,
       le cas n'avait rien d'exceptionnel. */
    align-items:stretch
  }
  /* Le bloc de texte reste calé en bas de sa propre colonne : le titre
     et la signature se lisent ensemble, l'air se met au-dessus. */
  .abcdt-article .ah__in > div:first-child{
    display:flex;flex-direction:column;justify-content:flex-end
  }
}

/* Fil d'ariane et cluster — la seule chose au-dessus du titre. */
.abcdt-article .ah__k{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin:0 0 1.6rem;font-size:.7rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-article .ah__k a{text-decoration:none;transition:color .25s var(--e)}
.abcdt-article .ah__k a:hover{color:var(--text)}
.abcdt-article .ah__k i{width:14px;height:1px;background:var(--line-2);flex:none}

/* Le titre porte la page. Syne, très serré, sans jamais dépasser la
   largeur où il redevient lisible d'un coup d'œil. */
.abcdt-article .ah__h{
  margin:0;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(2.1rem,5.6vw,3.9rem);line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance;max-width:18ch
}

/* Le chapô : une seule idée, la promesse de l'article. Il est en
   corps supérieur au texte courant — c'est le pont entre le titre et
   la lecture. */
.abcdt-article .ah__l{
  margin:1.8rem 0 0;max-width:46ch;
  font-size:clamp(1.05rem,2.1vw,1.2rem);line-height:1.6;color:var(--text-2)
}

/* La signature : discrète, factuelle, sur un filet. */
.abcdt-article .ah__m{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;
  margin:2.2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-size:.82rem;color:var(--text-3);letter-spacing:.01em
}
.abcdt-article .ah__m b{font-weight:500;color:var(--text-2)}
/* Le séparateur est porté par la puce elle-même, pas par un « gap » de
   flexbox : sinon l'espace s'insère aussi entre « Par » et le nom. */
.abcdt-article .ah__m span::before{
  content:'';display:inline-block;vertical-align:middle;
  width:3px;height:3px;border-radius:50%;background:var(--line-2);
  margin-right:.9rem
}
.abcdt-article .ah__m span:first-child::before{display:none}

/* Le média : cadré, jamais plein écran. Il déborde vers la droite
   jusqu'au bord de la fenêtre — c'est ce débord qui fait la
   composition asymétrique, sans rien coûter à la lecture. */
.abcdt-article .ah__fig{margin:2.5rem 0 0;position:relative}
.abcdt-article .ah__fig img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--ink-2)
}
.abcdt-article .ah__fig .tex{opacity:.06}
.abcdt-article .ah__cap{
  margin:.7rem 0 0;font-size:.76rem;color:var(--text-3);
  padding-left:.85rem;border-left:1px solid var(--rule-2);line-height:1.5
}
@media(min-width:1024px){
  .abcdt-article .ah__fig{
    margin:0;margin-right:calc((var(--edge) + var(--gut)) * -1);
    /* L'image occupe exactement la hauteur que le texte a fixée, dans
       une fourchette : jamais si basse qu'elle devienne une bannière,
       jamais si haute qu'elle prenne l'écran. */
    min-height:20rem;max-height:34rem
  }
  .abcdt-article .ah__fig img{
    aspect-ratio:auto;height:100%;object-fit:cover
  }
}

/* ═══════════════════════════════════════════════════════════════════
   03 · GRILLE DE LECTURE
   Trois largeurs, nommées une fois pour toutes : le texte, la figure
   large, la figure pleine. Tout enfant direct du corps tombe dans la
   colonne de texte sans qu'on ait à le dire ; seules les exceptions
   se déclarent. C'est ce qui permet de coller du contenu WordPress
   sans l'emballer dans des div.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .art__body{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start] minmax(0,var(--bleed))
    [text-start] minmax(0,var(--measure))
    [text-end] minmax(0,var(--bleed))
    [wide-end] minmax(var(--gut),1fr)
    [full-end];
  padding-bottom:clamp(3rem,8vh,5rem)
}
.abcdt-article .art__body > *{grid-column:text;min-width:0}

/* Les figures débordent vers la droite, jamais vers la gauche : la marge
   gauche appartient au sommaire, qui y est collé sur grand écran. Une
   figure « large » symétrique passerait dessous et le rendrait illisible.
   En dessous de 1024 px il n'y a plus de marge du tout, et tout rentre
   dans la colonne de texte. */
.abcdt-article .art__body > .f--wide, .abcdt-article .art__body > .f--full{grid-column:text}
@media(min-width:1024px){
  /* La réserve s'ouvre, et la mesure avec elle : c'est le même
     seuil, parce que c'est la même question — à partir d'ici il y
     a de la place à donner. */
  .abcdt-article .art{--bleed:9rem;--measure:43.75rem}
  .abcdt-article .art__body > .f--wide{grid-column:text-start / wide-end}
  .abcdt-article .art__body > .f--full{grid-column:text-start / full-end}
}

/* ═══════════════════════════════════════════════════════════════════
   04 · TYPOGRAPHIE DE CORPS
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .art__body p{
  margin:0 0 1.35em;font-size:var(--art-fs);line-height:var(--art-lh);
  color:var(--text);letter-spacing:.004em
}
/* Le premier paragraphe entre dans le texte sans hésiter : un cran
   au-dessus, en teinte pleine. */
.abcdt-article .art__body > p:first-of-type{font-size:1.13rem;line-height:1.7;color:var(--text)}

.abcdt-article .art__body strong, .abcdt-article .art__body b{font-weight:500;color:#F4F4FA}
.abcdt-article .art__body em, .abcdt-article .art__body i{font-style:italic;color:var(--text-2)}

/* ── H2 : l'ouverture de chapitre ──────────────────────────────────
   Un filet un peu plus large que le texte, puis le titre. Le filet
   dépasse volontairement la mesure : c'est le seul signal qui dit
   « nouveau chapitre » avant même qu'on ait lu le titre. */
.abcdt-article .art__body h2{
  margin:clamp(3.2rem,7vh,4.8rem) 0 1.4rem;padding-top:1.6rem;
  border-top:1px solid var(--rule);
  font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.05rem);line-height:1.12;
  letter-spacing:-.026em;color:var(--text);
  text-wrap:balance;max-width:24ch;scroll-margin-top:5.5rem
}
.abcdt-article .art__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* Le titre garde la mesure du texte ; c'est le filet qui s'allonge dans
   la marge droite. Le déborder lui aussi décalerait le début de chaque
   chapitre par rapport au corps, et on perdrait l'alignement vertical
   qui tient toute la colonne. */
@media(min-width:1024px){
  .abcdt-article .art__body h2{margin-right:calc(var(--bleed) * -1)}
}

/* ── H3 : la subdivision ───────────────────────────────────────────
   Plus d'air au-dessus qu'en dessous : un H3 appartient à ce qui le
   suit, pas à ce qui le précède. */
.abcdt-article .art__body h3{
  margin:2.6rem 0 .8rem;
  font-family:var(--ff-d);font-weight:600;
  font-size:clamp(1.1rem,2vw,1.28rem);line-height:1.25;
  letter-spacing:-.014em;color:var(--text);
  text-wrap:balance;max-width:32ch;scroll-margin-top:5.5rem
}
/* Le H4 est le dernier niveau : il doit rester lisible comme un titre
   sans concurrencer le H3. En DM Sans gris à 1 rem, il se confondait
   avec le texte courant — un lecteur ne voyait plus la subdivision.
   Il reprend donc la casse et la graisse d'un titre, en petit. */
.abcdt-article .art__body h4{
  margin:2.2rem 0 .6rem;font-family:var(--ff-b);font-weight:500;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);scroll-margin-top:5.5rem
}

/* ── Listes ────────────────────────────────────────────────────────
   Puce détachée, texte aligné : la ligne suivante reprend sous le
   texte, jamais sous la puce. */
.abcdt-article .art__body ul, .abcdt-article .art__body ol{
  margin:0 0 1.5em;padding:0;list-style:none;
  font-size:var(--art-fs);line-height:var(--art-lh);color:var(--text)
}
.abcdt-article .art__body li{position:relative;padding-left:1.5rem;margin-bottom:.6em}
.abcdt-article .art__body li > ul, .abcdt-article .art__body li > ol{margin:.6em 0 0}
.abcdt-article .art__body ul > li::before{
  content:'';position:absolute;left:.15rem;top:calc(var(--art-lh) * .5em - .5px);
  width:.42rem;height:1px;background:var(--line-2)
}
.abcdt-article .art__body ol{counter-reset:n}
.abcdt-article .art__body ol > li{counter-increment:n}
.abcdt-article .art__body ol > li::before{
  content:counter(n);position:absolute;left:0;top:0;
  font-size:.78rem;font-weight:500;color:var(--text-3);
  line-height:calc(var(--art-lh) * var(--art-fs))
}

/* ── Liens dans le texte ───────────────────────────────────────────
   Repérables sans arrêter la lecture : la couleur du texte reste, le
   soulignement est bleu et fin. C'est au survol seulement que le lien
   prend la main. */
.abcdt-article .art__body p a, .abcdt-article .art__body li a, .abcdt-article .art__body td a{
  color:inherit;text-decoration:underline;
  text-decoration-color:var(--art-blue-soft);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .22s var(--e),text-decoration-color .22s var(--e)
}
.abcdt-article .art__body p a:hover, .abcdt-article .art__body li a:hover, .abcdt-article .art__body td a:hover{
  color:var(--blue-lift);text-decoration-color:var(--blue)
}
/* Un lien dans un titre garde la voix du titre. Le soulignement bleu du
   corps, posé sous du Syne à 2 rem, transforme l'intertitre en bouton —
   « Infographie du site E-Commerce Nation sur le sujet » se lisait
   comme un appel à l'action au milieu d'un article. */
.abcdt-article .art__body h2 a, .abcdt-article .art__body h3 a, .abcdt-article .art__body h4 a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line-2);
  transition:border-color .22s var(--e),color .22s var(--e)
}
.abcdt-article .art__body h2 a:hover, .abcdt-article .art__body h3 a:hover, .abcdt-article .art__body h4 a:hover{
  color:var(--blue-lift);border-bottom-color:var(--blue)
}

/* ── Citation ──────────────────────────────────────────────────────
   Pas de guillemet décoratif. Un filet bleu, du corps, de l'air. */
.abcdt-article .art__body blockquote{
  margin:2.4rem 0;padding:.2rem 0 .2rem 1.6rem;
  border-left:1px solid var(--blue)
}
.abcdt-article .art__body blockquote p{
  font-family:var(--ff-d);font-weight:500;
  font-size:clamp(1.15rem,2.3vw,1.4rem);line-height:1.42;
  letter-spacing:-.014em;color:var(--text)
}
.abcdt-article .art__body blockquote p:last-child{margin-bottom:0}
.abcdt-article .art__body blockquote cite{
  display:block;margin-top:.9rem;font-style:normal;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)
}

/* ── Figures ───────────────────────────────────────────────────────
   Trois largeurs disponibles, une seule écriture de légende. */
.abcdt-article .art__body figure{margin:2.6rem 0}
.abcdt-article .art__body figure img, .abcdt-article .art__body > img{
  width:100%;height:auto;background:var(--ink-2)
}
/* Une image qui ne charge pas ne doit pas laisser un plateau de 400 px
   au milieu du texte. Le corpus en contient une (un 404 dans deux
   articles), et le trou était plus visible que l'image ne l'aurait
   été. La règle vaut pour toutes : à défaut de dimensions, une image
   sans contenu se réduit à rien plutôt que de creuser la page. */
.abcdt-article .art__body figure img:not([width]){max-height:32rem;object-fit:contain}
.abcdt-article .art__body > img{margin:2.6rem 0}
.abcdt-article .art__body figcaption{
  margin:.85rem 0 0;padding-left:.85rem;
  border-left:1px solid var(--rule-2);
  font-size:.78rem;line-height:1.55;color:var(--text-3)
}
.abcdt-article .f--wide figcaption, .abcdt-article .f--full figcaption{max-width:var(--measure)}
.abcdt-article .f--full{margin-left:0;margin-right:0}

/* Comparatif : deux médias côte à côte, une seule légende dessous. */
.abcdt-article .f--duo .f--duo-in{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){ .abcdt-article .f--duo .f--duo-in{grid-template-columns:1fr 1fr} }

/* ── Tableaux ──────────────────────────────────────────────────────
   Des filets, jamais une carte. Le conteneur défile seul : la page,
   elle, ne défile jamais horizontalement. */
.abcdt-article .art__body .t-wrap{
  margin:2.4rem 0;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule)
}
.abcdt-article .art__body table{
  width:100%;border-collapse:collapse;
  font-size:.92rem;line-height:1.55;min-width:34rem
}
.abcdt-article .art__body th{
  padding:.95rem 1rem .95rem 0;text-align:left;vertical-align:bottom;
  font-family:var(--ff-b);font-weight:500;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  border-bottom:1px solid var(--rule-2)
}
.abcdt-article .art__body td{
  padding:.95rem 1rem .95rem 0;vertical-align:top;
  color:var(--text-2);border-bottom:1px solid var(--rule)
}
.abcdt-article .art__body tbody tr:last-child td{border-bottom:0}
.abcdt-article .art__body th:last-child, .abcdt-article .art__body td:last-child{padding-right:0}

/* ── Code ──────────────────────────────────────────────────────────
   Présent seulement si l'article en contient. */
.abcdt-article .art__body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;padding:.12em .38em;border-radius:3px;
  background:var(--ink-3);color:var(--text)
}
.abcdt-article .art__body pre{
  margin:2rem 0;padding:1.2rem 1.3rem;overflow-x:auto;
  background:var(--ink-2);border-left:1px solid var(--rule-2);
  font-size:.85rem;line-height:1.65
}
.abcdt-article .art__body pre code{background:none;padding:0}

.abcdt-article .art__body hr{
  margin:3rem 0;border:0;border-top:1px solid var(--rule)
}

/* ═══════════════════════════════════════════════════════════════════
   05 · PRIMITIVES ÉDITORIALES
   Quatre encadrés, un seul système : un filet à gauche, une étiquette,
   du texte. Ils se distinguent par la nature du filet et la couleur de
   l'étiquette — pas par quinze habillages différents.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .call{
  margin:2.4rem 0;padding:.1rem 0 .1rem 1.5rem;
  border-left:1px solid var(--rule-2)
}
.abcdt-article .call__k{
  margin:0 0 .7rem;font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-article .call p{margin-bottom:.9em;font-size:1rem}
.abcdt-article .call p:last-child{margin-bottom:0}
.abcdt-article .call ul, .abcdt-article .call ol{margin-bottom:0;font-size:1rem}

/* L'idée maîtresse : c'est là que le bleu se justifie. */
.abcdt-article .call--key{border-left-color:var(--blue)}
.abcdt-article .call--key .call__k{color:var(--blue-lift)}
.abcdt-article .call--key p{font-size:1.06rem;color:var(--text)}

/* À retenir : un bloc de synthèse, légèrement détaché du flux. */
.abcdt-article .call--recap{
  border-left-color:var(--line-2);
  background:linear-gradient(90deg,var(--ink-2),transparent 70%);
  padding:1.3rem 1.3rem 1.3rem 1.5rem
}
.abcdt-article .call--recap .call__k{color:var(--text-2)}

/* L'exemple : en retrait, plus bas en contraste. C'est une digression
   assumée, le lecteur pressé doit pouvoir la sauter. */
.abcdt-article .call--ex{border-left-color:var(--rule)}
.abcdt-article .call--ex p, .abcdt-article .call--ex li{color:var(--text-2)}

/* Le point d'attention : le filet se dédouble. Aucune couleur d'alerte
   n'existe dans la palette, et on n'en invente pas une pour l'occasion. */
.abcdt-article .call--warn{
  border-left:0;padding-left:1.5rem;position:relative
}
.abcdt-article .call--warn::before{
  /* 2 px et non 3 : le filet doit rester de la même famille que les
     trois autres, la discontinuité suffit à le distinguer. */
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(
    to bottom,var(--text-2) 0 6px,transparent 6px 12px)
}
.abcdt-article .call--warn .call__k{color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════
   06 · SOMMAIRE
   Deux états, un seul balisage. Sur grand écran il s'installe dans la
   marge et suit la lecture ; en dessous il se replie en accordéon.
   Ce n'est pas une sidebar de documentation : pas de fond, pas de
   cadre, pas de titre en gras. Une colonne de repères.

   Tous les sélecteurs sont préfixés par .art__body. Le sommaire vit
   dans le corps de l'article — c'est un enfant de la grille, il ne peut
   pas être ailleurs — et il y hérite sinon de la typographie de prose :
   puces de liste, numérotation, soulignement bleu des liens. Le préfixe
   ne sert pas à décorer, il sert à reprendre la main.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .art__body .toc{
  grid-column:text;
  margin:0 0 2.8rem;padding:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)
}
.abcdt-article .art__body .toc__s{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;cursor:pointer;list-style:none;
  font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);
  transition:color .25s var(--e)
}
.abcdt-article .art__body .toc__s::-webkit-details-marker{display:none}
.abcdt-article .art__body .toc__s:hover{color:var(--text)}
.abcdt-article .art__body .toc__s::after{
  content:'';width:9px;height:9px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--e)
}
.abcdt-article .art__body .toc[open] .toc__s::after{transform:rotate(-135deg) translate(-2px,-2px)}

.abcdt-article .art__body .toc__l{
  margin:0 0 1.2rem;padding:0;list-style:none;counter-reset:none
}
.abcdt-article .art__body .toc__l li{margin:0;padding:0;counter-increment:none}
.abcdt-article .art__body .toc__l li::before{content:none}
.abcdt-article .art__body .toc__l a{
  display:block;padding:.42rem 0;
  font-size:.88rem;line-height:1.4;color:var(--text-3);
  text-decoration:none;
  transition:color .22s var(--e)
}
.abcdt-article .art__body .toc__l a:hover{color:var(--text);text-decoration:none}
.abcdt-article .art__body .toc__l .is-h3 a{padding-left:1rem;font-size:.83rem}

@media(min-width:1280px){
  /* Le sommaire quitte le flux et prend la marge gauche. Il couvre
     toutes les lignes de la grille : c'est ce qui donne au sticky la
     hauteur dans laquelle glisser. Le padding gauche vaut la gouttière
     de la grille — sans lui, le sommaire viendrait se coller au bord
     de la fenêtre. */
  .abcdt-article .art__body .toc{
    grid-column:full-start / text-start;
    grid-row:1 / -1;align-self:start;
    position:sticky;top:6rem;
    margin:0;
    /* La colonne du sommaire vaut exactement la moitié de ce que la
       mesure ne prend pas : (viewport − mesure) / 2. Elargir le texte
       la resserre donc mécaniquement. À 1280, la retraite passait de
       214 à 186 px utiles et les entrées longues tombaient sur trois
       lignes. On lui rend ces 28 px en réduisant ses marges plutôt
       qu'en reprenant au texte — au-delà de 1440 il y a de la place,
       et elles reprennent leur valeur pleine. */
    padding:0 1.75rem 0 3rem;
    border:0;max-height:calc(100vh - 9rem);overflow-y:auto;
    scrollbar-width:none
  }
  .abcdt-article .art__body .toc::-webkit-scrollbar{display:none}
  .abcdt-article .art__body .toc__s{
    padding:0 0 1rem;cursor:default;pointer-events:none;
    border-bottom:1px solid var(--rule);margin-bottom:.8rem
  }
  .abcdt-article .art__body .toc__s::after{display:none}
  .abcdt-article .art__body .toc__l{margin:0}
  /* Le repère actif : un trait bleu de 1 px dans la gouttière. Rien
     de plus — pas de pastille, pas de fond, pas de barre épaisse. */
  .abcdt-article .art__body .toc__l a{
    padding-left:.9rem;
    border-left:1px solid transparent;
    transition:color .22s var(--e),border-color .3s var(--e)
  }
  .abcdt-article .art__body .toc__l a.is-here{color:var(--text);border-left-color:var(--blue)}
  .abcdt-article .art__body .toc__l .is-h3 a{padding-left:1.7rem}
}

@media(min-width:1440px){
  .abcdt-article .art__body .toc{padding:0 2.5rem 0 var(--gut)}
}

/* ═══════════════════════════════════════════════════════════════════
   07 · À LIRE ENSUITE
   Deux ou trois articles, en lignes. Pas une grille de cartes : une
   carte demande une vignette, un extrait et un bouton, et transforme
   une recommandation en catalogue.

   Mécanique reprise de « Customer Experience » (@uilayout.contact) :
   une seule plaque d'image, partagée par toutes les lignes, qui suit
   le pointeur et change de source au survol. On en garde le principe,
   pas l'habillage — ici la plaque est petite, sans ombre ni arrondi,
   et n'existe que sur pointeur fin.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .next{position:relative;border-top:1px solid var(--rule-2)}
.abcdt-article .next__in{padding:clamp(3rem,8vh,5rem) 0 clamp(2rem,5vh,3rem)}
.abcdt-article .next__k{
  margin:0 0 2.2rem;font-size:.7rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-article .next__l{margin:0;padding:0;list-style:none}
.abcdt-article .next__i{border-bottom:1px solid var(--rule)}
.abcdt-article .next__i:last-child{border-bottom:0}
.abcdt-article .next__a{
  display:grid;gap:.5rem 2rem;align-items:baseline;
  padding:1.6rem 0;text-decoration:none;
  transition:opacity .3s var(--e)
}
@media(min-width:768px){
  .abcdt-article .next__a{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}
  .abcdt-article .next__a{padding:1.9rem 0}
}
.abcdt-article .next__c{
  margin:0 0 .5rem;font-size:.68rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-article .next__t{
  margin:0;font-family:var(--ff-d);font-weight:600;
  font-size:clamp(1.2rem,2.6vw,1.65rem);line-height:1.16;
  letter-spacing:-.022em;color:var(--text);text-wrap:balance;
  transition:color .25s var(--e)
}
.abcdt-article .next__t::after{
  content:'→';display:inline-block;margin-left:.5em;
  font-family:var(--ff-b);font-size:.72em;color:var(--text-3);
  transform:translateX(-4px);opacity:0;
  transition:transform .3s var(--e),opacity .3s var(--e)
}
.abcdt-article .next__w{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-3)}
.abcdt-article .next__a:hover .next__t{color:var(--blue-lift)}
.abcdt-article .next__a:hover .next__t::after{transform:translateX(0);opacity:1}
/* Au survol d'une ligne, les autres reculent d'un cran. C'est le seul
   effet de la section, et il ne coûte qu'une opacité. */
.abcdt-article .next__l:hover .next__i:not(:hover) .next__a{opacity:.42}

/* Une seule recommandation ne fait pas une section : la ligne unique
   flottait dans une bande vide de 300 px. En dessous de deux articles,
   la mise en page se resserre. */
.abcdt-article .next__l:only-child .next__i:only-child .next__a{padding:1.2rem 0}
.abcdt-article .next--solo .next__in{padding-bottom:clamp(1.5rem,4vh,2.5rem)}

/* ═══════════════════════════════════════════════════════════════════
   08 · PASSERELLE SERVICE
   Un seul pont, en sortie de lecture, quand la question « et
   concrètement, qui fait ça ? » se pose d'elle-même. Jamais au milieu
   du texte, jamais plus d'un par article, jamais un encart commercial.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article .bridge{border-top:1px solid var(--rule)}
.abcdt-article .bridge__in{padding:clamp(2.5rem,6vh,3.5rem) 0 clamp(3.5rem,9vh,6rem)}
@media(min-width:900px){
  .abcdt-article .bridge__in{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2rem 3rem;align-items:end
  }
}
.abcdt-article .bridge__k{
  margin:0 0 .9rem;font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)
}
.abcdt-article .bridge__p{
  margin:0;max-width:46ch;font-size:1.02rem;line-height:1.6;color:var(--text-2)
}
.abcdt-article .bridge__a{margin:1.6rem 0 0}
@media(min-width:900px){ .abcdt-article .bridge__a{margin:0} }

/* ═══════════════════════════════════════════════════════════════════
   09 · MOUVEMENT
   Quatre transitions, pas une de plus. Un article se lit ; il ne se
   regarde pas défiler.
   ═══════════════════════════════════════════════════════════════════ */
.abcdt-article.abc-motion .art [data-rv]{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--e),transform .7s var(--e)
}
.abcdt-article.abc-motion .art [data-rv].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .abcdt-article.abc-motion .art [data-rv]{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   10 · CURSEUR
   Le curseur ABC reste — c'est la signature du site. Mais il masque le
   curseur système, et sur une colonne de texte cela retire au lecteur
   le repère qui lui dit où il peut sélectionner. Au-dessus du corps de
   l'article, on rend donc la main : le script éteint la couche, et le
   curseur texte revient. La règle vit ici et non dans shared/ — le
   comportement est propre à l'article.
   ═══════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════
   11 · IMPRESSION
   Un article doit pouvoir sortir sur papier proprement. Peu de code,
   beaucoup de valeur.
   ═══════════════════════════════════════════════════════════════════ */
@media print{
  .abcdt-art-prog, .abcdt-article .toc, .abcdt-article .next, .abcdt-article .bridge, .abcdt-article .skip, .abcdt-article .abc-cursor{display:none !important}
  .abcdt-article .art__body{display:block;max-width:none}
  .abcdt-article .art__body h2{page-break-after:avoid}
  .abcdt-article .art__body figure, .abcdt-article .art__body .t-wrap{page-break-inside:avoid}
}


/* ── Repère de lecture — hors scope, à dessein ─────────────────
   Le script pose cette barre sur <body>, donc hors du wrapper.
   Scopée, elle ne recevrait jamais sa règle. Elle n'existe que si
   le script l'a créée, c'est-à-dire sur un article migré. */
.abcdt-art-prog{position:fixed;inset:0 0 auto;height:1px;z-index:120;background:transparent;pointer-events:none}
.abcdt-art-prog::after{content:'';display:block;height:100%;width:var(--p,0%);background:#1A6FFF;transition:width .12s linear}
@media(prefers-reduced-motion:reduce){.abcdt-art-prog::after{transition:none}}