/* ==========================================================================
   PARCOURS — tracé « coup de crayon » qui se dessine au scroll
   -------------------------------------------------------------------------
   UN seul trait, grené comme un crayon HB (filtre SVG). Révélé au scroll par
   un MASQUE CSS (dégradé vertical) dont le % est piloté par le JS.
   Le tracé se pose en FOND DE SECTION ; les textes sont des modules Divi.

   COULEUR DU TRAIT : une seule variable.
     .pjt{ --pj-ink:#5b544e; }
   ou :  [hortorium_trace color="#8a7f6a"]  /  <div class="pjt" data-color="#8a7f6a">
   ========================================================================== */

.pjt{
	--pj-ink:#cacaca;    /* ← couleur du crayon (modifiable) */
	--pj-paper:#fdfbf7;  /* pastille sous le chiffre (≈ fond de section) */
	--pj-a:0%;           /* avancée du tracé 0→100 % — piloté par le JS */
	--pj-p:0;            /* idem, en nombre 0→1 (pour les chiffres) */
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	overflow:hidden;
}

.pjt__svg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	overflow:visible;
	/* révélation : le masque s'arrête à --pj-a (% de la hauteur de section),
	   ~1,4 % de fondu = le « bout » du crayon */
	-webkit-mask:linear-gradient(to bottom,#000 var(--pj-a), rgba(0,0,0,0) calc(var(--pj-a) + 1.4%));
	        mask:linear-gradient(to bottom,#000 var(--pj-a), rgba(0,0,0,0) calc(var(--pj-a) + 1.4%));
}

.pjt__line{
	fill:none;
	stroke:var(--pj-ink);
	stroke-linecap:round;
	stroke-linejoin:round;
	vector-effect:non-scaling-stroke;
}
.pjt__line--soft{ stroke-width:2.2; opacity:.10; }   /* halo léger */
.pjt__line--core{ stroke-width:1; opacity:.75; }   /* trait — épaisseur ici */

/* 2 tracés dans le SVG : desktop (gouttière centrale) / mobile (grande
   sinusoïde décalée à gauche). On n'affiche que le bon selon la largeur. */
.pjt__m{ display:none; }

@media (max-width:768px){
	.pjt__d{ display:none; }
	.pjt__m{ display:block; }
}

/* ---- chiffres manuscrits dans un cercle, sur la ligne -------------------
   chaque .pjt-num a  --y (top %), --yn (0..1), --xd (x desktop %), --xm (x mobile %).
   Le cercle se dessine et le chiffre apparaît quand la ligne passe (--pj-p). */
.pjt-num{
	position:absolute;
	top:var(--y);
	left:var(--xd);
	width:48px; height:48px;               /* = NUM_PX dans build.py */
	transform:translate(-50%,-50%);
	color:var(--pj-ink);
}
@media (max-width:768px){ .pjt-num{ left:var(--xm); } }

.pjt-num svg{ display:block; width:100%; height:100%; overflow:visible; }

.pjt-num__ring{
	fill:var(--pj-paper);
	fill-opacity:clamp(0, (var(--pj-p) - var(--yn)) * 20, 1);
	stroke:var(--pj-ink);
	stroke-width:2.4;
	stroke-linecap:round;
	stroke-dasharray:255;
	stroke-dashoffset:calc(255 - 255 * clamp(0, (var(--pj-p) - var(--yn)) * 18, 1));
}
.pjt-num__digit{
	fill:none;
	stroke:var(--pj-ink);
	stroke-width:3.2;
	stroke-linecap:round;
	stroke-linejoin:round;
	opacity:clamp(0, (var(--pj-p) - var(--yn) - 0.012) * 55, 1);
}

/* mouvement réduit : tracé + chiffres posés, sans animation (géré aussi par le JS) */
@media (prefers-reduced-motion:reduce){
	.pjt__svg{ -webkit-mask:none; mask:none; }
	.pjt-num__ring{ stroke-dashoffset:0; fill-opacity:1; }
	.pjt-num__digit{ opacity:1; }
}