/* Plan du réseau band (network-plan.js). Load after sillon.css: uses its tokens, .feuille, .data, .station-pop.
   Values from design/identity/2026-10-11/reference/dir-a2.html (plan) and identite-sillon.html (band, motion). */
:where(.np){margin:0}
.np{
  --np-bl-font:var(--eleve-titre); --np-bl-weight:800; --np-bl-stretch:85%;
  display:block;box-sizing:border-box;min-width:0;max-width:100%;padding:14px 18px 8px;color:var(--sillon-encre);
}
body.parent-mode .np{--np-bl-font:var(--parent-label); --np-bl-weight:700; --np-bl-stretch:75%}

/* Header: « fig. 1 » and « Rejouer » on the first row, the legend below; when the band is wide enough
   (network-plan.js sets .is-wide), the legend joins the first row and « Rejouer » sits under it, as in the reference. */
.np-top{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px}
.np-fig{order:1;flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;font-family:var(--f-texte);font-size:13px;font-weight:700;line-height:1.3;color:var(--sillon-encre)}
.np-fig-n{font-family:var(--eleve-accent);font-style:italic;font-weight:600;font-size:16px;letter-spacing:0}
.np-fig .data{line-height:1.3}
.np-leg{order:3;flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 15px;margin:0;padding:0;list-style:none;font-family:var(--f-texte);font-size:12px;font-weight:700;line-height:1.3;color:var(--sillon-encre)}
.np-leg li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.np-leg i{font-family:var(--f-accent);font-style:italic;font-weight:500;font-size:13px;color:var(--sillon-graphite)}
.np-leg svg{width:28px;height:16px;flex:none;overflow:visible}
.np-replay{order:2;position:relative;flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px 0 10px;border-radius:var(--radius-chip);border:1px solid var(--sillon-filet-fort);background:var(--sillon-feuille);font-family:var(--f-texte);font-size:12.5px;font-weight:700;line-height:1;color:var(--sillon-encre);box-shadow:0 3px 8px -5px rgba(14,26,59,.5);cursor:pointer}
.np-replay::after{content:"";position:absolute;inset:-7px -2px} /* 44 px touch target around the 32 px pill */
.np-replay:hover{border-color:var(--sillon-encre)}
.np.is-wide .np-fig{flex:none}
.np.is-wide .np-leg{order:2;flex:1 1 auto;justify-content:flex-end}
.np.is-wide .np-replay{position:absolute;top:calc(100% + 6px);right:0;z-index:1}
.np-replay svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The plan: fits the band when the band is wide enough to keep its labels legible, and otherwise scrolls inside the
   band (never the page). Below 960 px of band the 1100-unit plan would shrink its 10.5-unit station labels under 9 px:
   it keeps 960 px (scale 0.87, as at 1280 px) and scrolls; below 760 px of screen it is drawn at full size. */
.np-scroll{margin:6px -6px 0;padding:0 6px 6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;contain:inline-size;scrollbar-width:thin;scrollbar-color:var(--sillon-filet-fort) transparent}
.np-map{display:block;width:100%;min-width:960px;height:auto;overflow:visible}
.np.np-more .np-scroll{-webkit-mask-image:linear-gradient(90deg,var(--sillon-encre) calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,var(--sillon-encre) calc(100% - 40px),transparent)}
.np-map .np-lb{font-family:var(--f-texte);font-size:10.5px;font-weight:700;fill:var(--sillon-encre);fill-opacity:.8}
.np-map .np-lb.hi{fill-opacity:1;font-size:11.5px}
.np-map .np-pn{font-family:var(--f-accent);font-style:italic;font-weight:500;font-size:13px;fill:var(--sillon-graphite)}
.np-map .np-bl{font-family:var(--np-bl-font);font-weight:var(--np-bl-weight);font-stretch:var(--np-bl-stretch);font-size:13.5px;fill:var(--sillon-encre)}
.np-map .np-bl.lt{fill:var(--sillon-feuille)}
.np-map .np-tn{font-family:var(--f-texte);font-size:13px;font-weight:700;fill:var(--sillon-encre)}
.np-map .np-mo{font-family:var(--f-data);font-stretch:var(--data-stretch);font-size:10px;font-weight:700;letter-spacing:1.2px;fill:var(--sillon-encre)}
/* « tu es ici » sits under the red hub; the text stays encre (red text only at ≥ 18.7 px bold, SITE-IDENTITY rule 1) */
.np-map .np-rd{font-family:var(--f-accent);font-style:italic;font-weight:600;font-size:13px;fill:var(--sillon-encre)}

/* Motion (C′), driven by network-plan.js: stations and names appear as the ink reaches them */
.np-lbl,.np-arr{transform-box:fill-box;transform-origin:center}
.np-arr{opacity:0}
.np.is-running .np-st:not(.is-lit),.np.is-running .np-cor:not(.is-lit),.np.is-running .np-lbl:not(.is-lit){opacity:0}
.np.is-running .np-lbl.np-in{animation:np-label 260ms ease-out both;animation-delay:var(--np-delay,0ms)}
.np.is-running .np-arr.is-on{animation:np-arrivee 1500ms linear both;animation-delay:var(--np-delay,0ms)}
@keyframes np-label{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes np-arrivee{
  0%{stroke-dashoffset:1;transform:scale(.7);opacity:0;animation-timing-function:cubic-bezier(.3,.7,.3,1)}
  8%{opacity:1}
  24%{stroke-dashoffset:0;transform:scale(1);opacity:1;animation-timing-function:ease-in}
  72%{stroke-dashoffset:0;transform:scale(1);opacity:1;animation-timing-function:ease-out}
  100%{stroke-dashoffset:0;transform:scale(1.6);opacity:0}
}

@media (max-width:760px){
  .np{padding:12px 14px 6px}
  .np-top{gap:8px 12px}
  .np-leg{gap:6px 14px}
  .np-map{width:1100px;min-width:1100px}
}
@media (prefers-reduced-motion:reduce){
  .np-replay{display:none}
  .np *{animation:none!important;transition:none!important}
  .np-arr{opacity:0!important}
}