/* ══════════════════════════════════════════════════════════════════
   YOU ART IT — HABILLAGE ÉDITORIAL (codes charte « agence / magazine »)
   Additif & non destructif : s'appuie sur les tokens de letrait.css,
   ne modifie AUCUNE règle existante. Chargé APRÈS letrait.css.
   Deux dispositifs signature : gros chiffres fantômes de chapitre +
   étiquettes verticales (attribut data-chap). Page d'accueil uniquement.
   Retirable sans effet de bord (supprimer le <link>).
   ══════════════════════════════════════════════════════════════════ */

/* — Compteur de chapitres (l'ouverture / hero ne compte pas) — */
main{counter-reset:chapx}
section[data-chap]:not(#hero){counter-increment:chapx; isolation:isolate}

/* — Gros chiffre fantôme : filigrane éditorial, coin haut-droit — */
section[data-chap]:not(#hero)::before{
  content:counter(chapx,decimal-leading-zero);
  position:absolute;
  top:clamp(.75rem,3vw,2.2rem); right:clamp(.75rem,4vw,3rem);
  font-family:var(--sans); font-weight:800;
  font-size:clamp(4.75rem,15vw,12rem); line-height:.74; letter-spacing:-.055em;
  color:var(--fil-fantome);
  z-index:0; pointer-events:none; user-select:none;
}
/* le contenu passe au-dessus du filigrane */
section[data-chap] > .wrap,
section[data-chap] > .atelier-h,
section[data-chap] > .pin-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,1.05rem); 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:var(--graphite); opacity:.82; z-index:2; pointer-events:none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIENS DE TITRES + RYTHME VERTICAL RESSERRÉ
   ══════════════════════════════════════════════════════════════════ */

/* — Espaces inter-sections réduits (moins de vide) — */
section{padding:clamp(3rem,7.5vh,6rem) var(--pad)}

/* — Prestations : items désormais cliquables (liens réels) — */
a.svc{text-decoration:none;color:inherit;cursor:pointer}

/* — Titres de section cliquables (atelier, portfolio) — */
.ttl-link{display:inline-block;color:inherit;text-decoration:none}
.ttl-link h2{transition:opacity .3s var(--e-out)}
.ttl-link:hover h2,.ttl-link:focus-visible h2{opacity:.72}
.ttl-go{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite);opacity:.78;transition:opacity .3s}
.ttl-link:hover .ttl-go,.ttl-link:focus-visible .ttl-go{opacity:1}
.ttl-go .ar{display:inline-block;transition:transform .3s var(--e-out)}
.ttl-link:hover .ttl-go .ar,.ttl-link:focus-visible .ttl-go .ar{transform:translateX(5px)}

/* — Œuvres du portfolio : cartes cliquables — */
.work-link{display:block;color:inherit;text-decoration:none;cursor:pointer}