/* ═══════════════════════════════════════════════════════════════════════════
   Immersion — finitions v6
   Trois ajouts, tous décoratifs, aucun n'occupe de place dans le flux :
   1. le signal échecs du hero ;
   2. la liaison dessinée entre les deux grands titres ;
   3. le point lumineux qui parcourt les quatre semaines.
   Aucun dégradé n'est utilisé ici.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Signal échecs du hero ──────────────────────────────
   Le cavalier 3D occupe le quart bas droit du hero. Il vit sous le texte
   (z-index 1 contre 10 pour le contenu) et n'intercepte aucun clic. Il ne
   touche ni le canvas WebGL du fond, ni ses styles. */
.nf-knight{
  position:absolute;
  /* aucun débordement horizontal : la zone reste dans le cadre */
  right:clamp(10px,1.6vw,30px);
  bottom:clamp(24px,4.5vh,44px);
  z-index:1;
  /* la zone commence sous le titre : le cavalier n'entre jamais dedans */
  width:min(28vw,400px);
  height:min(46vh,400px);
  pointer-events:none;
  opacity:0;
  transition:opacity 1.4s ease .25s;
  /* un halo très doux détache la silhouette du fond, comme dans le prototype */
  background:radial-gradient(ellipse 46% 42% at 52% 56%,
    rgba(148,169,200,var(--halo-opacity,.055)), transparent 88%);
}
.nf-knight.is-ready{opacity:1}
.nf-knight canvas{
  display:block;width:100%;height:100%;
  outline:none;
}

/* Tablette : le hero est plus haut, le CTA descend. Le cavalier se replie
   dans l'angle bas droit, sous le bouton et au-dessus de « Découvrir ». */
@media(max-width:1023px){
  .nf-knight{width:min(30vw,250px);height:min(24vh,250px);right:10px;bottom:12vh}
}
@media(max-width:767px){
  /* Mobile : présence conservée mais effacée, le texte du hero reste maître. */
  /* le cavalier se glisse dans l'angle, sous le groupe de CTA et à droite
     de « Découvrir » : aucune ligne de texte n'est traversée */
  .nf-knight{
    width:38vw;height:19vh;
    right:0;bottom:0;
  }
  .nf-knight.is-ready{opacity:.5}
}
@media(prefers-reduced-motion:reduce){
  .nf-knight{transition:none}
}

/* ── 2 · Liaison entre « 30 jours pour passer à l'action. » et
   « Tout part de ton jeu. » ────────────────────────────────────────────────
   Un calque absolu posé aux coordonnées document des deux titres. Hauteur
   pilotée en JS, jamais dans le flux : la composition ne bouge pas d'un
   pixel. Il traverse la frontière entre les deux sections, ce qui est
   précisément le but. */
.pjx{
  position:absolute;
  left:0;
  z-index:4;
  width:100%;
  pointer-events:none;
}
.pjx svg{display:block;width:100%;height:100%;overflow:visible}
.pjx__p{
  fill:none;
  stroke:rgba(167,183,174,.55);
  /* v28 : +50 % sur la v27, soit 1,8 px — le trait devient franchement
     présent. `non-scaling-stroke` garde la valeur en pixels réels, donc le
     gain est identique en mobile et en desktop. */
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* Signal terminal : trois couches, dans le même SVG et au même ancrage.
   Terracotta, halo et easing repris du signal des semaines. */
.pjx__signal{
  --pjx-motion-state:paused;
  --pjx-halo-blur:3px;
  overflow:visible;
  opacity:0;
  transition:opacity .5s ease 1.15s;
}
.pjx__signal > circle{
  transform-box:fill-box;
  transform-origin:center;
  pointer-events:none;
}
.pjx__end{r:6px;fill:#C9775A;opacity:1}
.pjx__halo{
  r:8px;
  fill:#C9775A;
  opacity:.18;
  filter:blur(var(--pjx-halo-blur));
}
.pjx__ring{
  r:6px;
  fill:none;
  stroke:#C9775A;
  stroke-width:1.2px;
  opacity:0;
}
.pjx.is-drawn .pjx__signal{
  opacity:1;
  animation:pjx-signal-float 3.6s cubic-bezier(.45,0,.35,1) 1.65s infinite;
}
.pjx.is-drawn .pjx__end{
  animation:pjx-core-breathe 2s cubic-bezier(.45,0,.35,1) 1.65s infinite;
}
.pjx.is-drawn .pjx__halo{
  animation:pjx-halo-breathe 2s cubic-bezier(.45,0,.35,1) 1.65s infinite;
}
.pjx.is-drawn .pjx__ring{
  animation:pjx-ring-wave 2s cubic-bezier(.45,0,.35,1) 1.65s infinite;
}
.pjx.is-drawn .pjx__signal,
.pjx.is-drawn .pjx__signal > circle{
  animation-play-state:var(--pjx-motion-state);
}
@keyframes pjx-core-breathe{
  0%,100%{transform:scale(1);filter:brightness(1)}
  35%{transform:scale(1.1);filter:brightness(1.15)}
  70%{transform:scale(1);filter:brightness(1)}
}
@keyframes pjx-halo-breathe{
  0%,100%{transform:scale(.85);opacity:.18}
  35%{transform:scale(1.3);opacity:.46}
  70%{transform:scale(1.1);opacity:.2}
}
@keyframes pjx-ring-wave{
  0%,10%{transform:scale(1);opacity:0}
  28%{transform:scale(1.2);opacity:.58}
  60%{transform:scale(2.2);opacity:.24}
  88%,100%{transform:scale(2.2);opacity:0}
}
@keyframes pjx-signal-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media(max-width:767px){
  .pjx__signal{--pjx-halo-blur:2.5px}
  .pjx__end,.pjx__ring{r:5px}
  .pjx__halo{r:7px}
}
@media(prefers-reduced-motion:reduce){
  .pjx__signal{opacity:1;transition:none}
  .pjx.is-drawn .pjx__signal,
  .pjx.is-drawn .pjx__signal > circle{animation:none;transform:none}
  .pjx__end{filter:none}
  .pjx__halo{opacity:.18}
  .pjx__ring{opacity:0}
}

/* ── 3 · Le point lumineux des bilans hebdomadaires ────────────────────────
   Il circule sur le filet déjà en place, marque un temps à chaque semaine,
   puis revient au départ. Position pilotée en JS. */
.at .at__weeks{isolation:isolate}
.at .at__spark{
  position:absolute;
  top:5px;left:0;
  z-index:0;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#C9775A;
  box-shadow:0 0 0 3px rgba(201,119,90,.13), 0 0 11px 2px rgba(201,119,90,.34);
  opacity:0;
  transition:opacity .45s ease;
  will-change:transform;
}
.at .at__spark.is-live{opacity:1}

/* le repère atteint s'allume, puis revient à son état neutre */
.at .at__week{cursor:default}
.at .at__wdot,.at .at__wlb{transition:all .38s cubic-bezier(.16,1,.3,1)}
.at .at__wdot::after{transition:opacity .38s ease}
.at .at__week.is-on .at__wdot{
  border-color:rgba(201,119,90,.9);
  transform:scale(1.18);
  box-shadow:0 0 0 4px rgba(201,119,90,.09);
}
.at .at__week.is-on .at__wlb{
  color:#C9775A;
  letter-spacing:.175em;
}
.at .at__week:not(.is-on) .at__wdot::after{opacity:.45}

@media(max-width:767px){
  .at .at__spark{width:6px;height:6px;margin:-3px 0 0 -3px;
    box-shadow:0 0 0 2px rgba(201,119,90,.12), 0 0 8px 1px rgba(201,119,90,.3)}
}
@media(prefers-reduced-motion:reduce){
  .at .at__spark{display:none}
  .at .at__wdot,.at .at__wlb{transition:none}
}