/* ══════════════════════════════════════════════════════════════════
   YOU ART IT — Codes éditoriaux partagés (pages « xp »)
   Chiffres fantômes de chapitre + étiquettes verticales, sur les
   sections marquées data-chap. Additif, chargé après xp.css.
   (Le rythme vertical resserré est géré dans xp.css : section + .mani.)
   ══════════════════════════════════════════════════════════════════ */

body{counter-reset:chapx}
section[data-chap]{counter-increment:chapx;position:relative;isolation:isolate}

/* Gros chiffre fantôme — filigrane éditorial, coin haut-droit */
section[data-chap]::before{
  content:counter(chapx,decimal-leading-zero);
  position:absolute; top:clamp(.6rem,2.5vw,1.8rem); right:clamp(.75rem,4vw,3rem);
  font-family:var(--sans,'Outfit',system-ui,sans-serif); font-weight:800;
  font-size:clamp(4rem,13vw,10rem); line-height:.74; letter-spacing:-.055em;
  color:rgba(10,10,10,.05); z-index:0; pointer-events:none; user-select:none;
}
section[data-chap] > .wrap{position:relative; z-index:1}

/* Étiquette verticale de chapitre — gouttière gauche, grands écrans */
@media(min-width:1180px){
  section[data-chap]::after{
    content:attr(data-chap);
    position:absolute; left:clamp(.5rem,1.1vw,1rem); top:50%;
    transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl; white-space:nowrap;
    font-size:.6rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
    color:#6B6B6B; opacity:.7; z-index:2; pointer-events:none;
  }
}