/* ═══════════════════════════════════════════════════════════════════════
   Bandeau de chiffres de l'accueil « Fil » — voir assets/js/stat-band.js.
   État par défaut = état final (sans JavaScript, mouvement réduit, fin du
   décompte). .is-pre = préparé hors de la vue (rouleaux à zéro, fil éteint).
   Les animations ne touchent que transform et opacity.
   ═══════════════════════════════════════════════════════════════════════ */
.sb {
  --sb-ink:  #F5F3FF;
  --sb-mut:  rgba(221, 214, 254, .64);
  --sb-acc:  #A78BFA;
  --sb-hi:   #C4B5FD;
  --sb-line: rgba(167, 139, 250, .22);
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px;
  max-width: 780px; margin: 2.1rem auto 0;
}
.sb-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sb-i { position: relative; min-height: 92px; padding: 22px 10px 0; text-align: center; }

/* ── Chiffres : une case par chiffre, une colonne qui défile dedans ── */
.sb-n {
  display: inline-flex; align-items: flex-start;
  font-family: var(--font-title); font-weight: 700; font-size: 2.3rem; line-height: 1.08; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sb-ink); white-space: nowrap;
}
.sb-d { display: inline-block; height: 1.08em; overflow: hidden; }
.sb-c { display: block; }
.sb-c > i { display: block; height: 1.08em; font-style: normal; }
.sb-s { display: inline-block; }
.sb-n .sb-ts { width: .2em; }
.sb-u { color: var(--sb-acc); font-size: .56em; line-height: 1; align-self: flex-end; margin-bottom: .2em; }
.sb-l {
  display: block; margin-top: 6px; font-size: .68rem; line-height: 1.35; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sb-mut);
}
.sb-l small {
  display: block; margin-top: 2px; font-size: .62rem; letter-spacing: .04em; text-transform: none;
  color: rgba(196, 181, 253, .7); font-weight: 500;
}

/* ── Le fil : trait de fond, trait allumé, tête lumineuse, nœud ─────── */
.sb-t { position: absolute; left: 0; right: 0; top: 3px; height: 3px; overflow: hidden; }
.sb-tb, .sb-tf { position: absolute; left: 0; right: 0; top: 1px; height: 1px; }
.sb-tb { background: var(--sb-line); }
.sb-tf { background: linear-gradient(90deg, rgba(167, 139, 250, .5), var(--sb-hi)); transform-origin: 0 50%; opacity: 0; }
.sb-tc { position: absolute; left: 0; top: 0; height: 3px; width: calc(100% + 56px); transform: translateX(0); }
.sb-th {
  position: absolute; right: 0; top: 0; width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0), rgba(221, 214, 254, .9) 80%, #fff);
  box-shadow: 0 0 8px rgba(196, 181, 253, .8);
}
.sb-i.is-pre .sb-tc { transform: translateX(-100%); }
.sb-nd { position: absolute; left: 50%; top: 1px; width: 7px; height: 7px; margin-left: -3.5px; }
.sb-nc, .sb-nr { position: absolute; inset: 0; border-radius: 1px; }
.sb-nc { background: var(--sb-hi); box-shadow: 0 0 8px rgba(167, 139, 250, .85); }
.sb-nr { box-shadow: inset 0 0 0 1px var(--sb-hi); opacity: 0; }
.sb-i.is-pre .sb-nc { opacity: .35; box-shadow: none; }
/* premier et dernier : le fil s'efface aux extrémités du bandeau */
.sb-i:first-child .sb-tb { background: linear-gradient(90deg, transparent, var(--sb-line) 45%); }
.sb-i:last-of-type .sb-tb { background: linear-gradient(90deg, var(--sb-line) 55%, transparent); }

/* ── Mobile : deux colonnes, le fil passe d'une rangée à l'autre ───── */
@media (max-width: 640px) {
  .sb { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.75rem; }
  .sb-i { min-height: 84px; }
  .sb-n { font-size: 2rem; }
  .sb-i:nth-child(odd) .sb-tb { background: linear-gradient(90deg, transparent, var(--sb-line) 45%); }
  .sb-i:nth-child(even) .sb-tb { background: linear-gradient(90deg, var(--sb-line) 55%, transparent); }
}