/* NTROPYX — bande de cotations energetiques, en tete de la preuve commerciale.

   Elle ne defile pas toute seule : c'est le lecteur qui la fait avancer.
   Le mouvement autonome se limite au pouls, qui dit que le flux est ouvert,
   et a l'arrivee d'une cotation, qui a une cause reelle.

   Tous les jetons proviennent de styles.css. Aucun !important, aucune
   contre-regle : cette feuille ne corrige rien, elle decrit un composant. */

/* Porteur du degrade des courbes : hors flux, jamais peint. Il vit ici
   plutot que dans un attribut style, pour que le balisage reste declaratif. */
.ntx-rail-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.ntx-rail-wrap {
  position: relative;
  max-width: min(1180px, 100%);
  margin: 0 auto clamp(30px, 4vw, 48px);
}

/* Verre : le degrade de la section defile derriere, la surface vit sans animer. */
.ntx-rail {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .052);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
              0 30px 70px -52px rgba(0, 0, 0, .95);
  overflow: hidden;
}

/* ---------- bloc d'antenne ---------- */

.ntx-rail__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(216, 192, 113, .10), rgba(216, 192, 113, .03));
}

.ntx-rail__label {
  font-size: .62rem;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-hi);
  white-space: nowrap;
}

.ntx-rail__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .58rem;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
}

/* ---------- le pouls ----------
   Un battement, pas un clignotement : montee vive, longue decroissance, puis
   un silence. Periode 2,6 s soit 0,38 Hz, volontairement loin de la bande
   d'oscillation lente que la regle Apple deconseille. */

.ntx-pulse {
  position: relative;
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}

.ntx-pulse__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 8px rgba(241, 221, 160, .45);
  animation: ntx-rail-beat 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

.ntx-pulse__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-hi);
  animation: ntx-rail-ring 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

.ntx-pulse__ring--2 { animation-delay: .18s; }

@keyframes ntx-rail-beat {
  0%   { transform: scale(1);    opacity: .58; }
  6%   { transform: scale(1.28); opacity: 1; }
  30%  { transform: scale(1);    opacity: .66; }
  100% { transform: scale(1);    opacity: .58; }
}

@keyframes ntx-rail-ring {
  0%   { transform: scale(.7);  opacity: 0; }
  8%   { transform: scale(1);   opacity: .5; }
  46%  { transform: scale(3.1); opacity: 0; }
  100% { transform: scale(3.1); opacity: 0; }
}

/* Arrivee d'une cotation : un eclat franc, distinct du battement de fond. */
.ntx-pulse.is-flash .ntx-pulse__core {
  animation: none;
  transform: scale(1.5);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(216, 192, 113, .22), 0 0 20px rgba(241, 221, 160, .8);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- la piste ---------- */

.ntx-rail__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 52px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 52px), transparent);
}

.ntx-rail__track::-webkit-scrollbar { display: none; }
.ntx-rail__track.is-grabbing { cursor: grabbing; }

/* Le rebond de fin de course vit ici, pas sur la piste elle-meme. */
.ntx-rail__inner { display: flex; will-change: transform; }

/* ---------- une cotation ---------- */

/* Etat de repos ET etat d'arrivee dans la meme declaration : la cellule nait
   floue et decalee, la classe is-in la pose. Un seul endroit decide. */
.ntx-rail-cell {
  position: relative;
  flex: 0 0 auto;
  min-width: 178px;
  padding: 14px 20px 12px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  opacity: 0;
  transform: translate3d(0, 9px, 0);
  filter: blur(5px);
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease;
}

.ntx-rail-cell:last-child { border-right: 0; }
.ntx-rail-cell:hover { background: rgba(255, 255, 255, .045); }

.ntx-rail-cell:focus-visible {
  background: rgba(255, 255, 255, .045);
  outline: 2px solid var(--gold-hi);
  outline-offset: -2px;
}

.ntx-rail-cell__name {
  display: block;
  font-size: .58rem;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
}

.ntx-rail-cell__figure {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 7px;
}

.ntx-rail-cell__value {
  display: inline-flex;
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.05;
  letter-spacing: -.012em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  white-space: nowrap;
}

.ntx-rail-cell__unit {
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--paper-dim);
}

/* Chiffre en colonnes : seuls les caracteres changes roulent. */
.ntx-rail-digit {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.05em;
  vertical-align: baseline;
}

.ntx-rail-digit__inner { display: block; will-change: transform; }

.ntx-rail-cell__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  font-size: .64rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--paper-dim);
}

.ntx-rail-cell__delta[data-dir="up"] { color: #e0705f; }
.ntx-rail-cell__delta[data-dir="down"] { color: #4fb286; }
.ntx-rail-cell__delta svg { display: block; }
.ntx-rail-cell__delta[data-dir="down"] svg { transform: rotate(180deg); }

/* ---------- la courbe : ici, et seulement ici, le doigt lit le temps ---------- */

/* La boite vaut 44 px : la surface qu'un doigt doit pouvoir attraper. Le
   remplissage laisse au dessin ses 26 px, centres. Une seule declaration
   sert la souris et le doigt — pas de variante tactile a compenser ensuite. */
.ntx-rail-cell__spark {
  display: block;
  width: 100%;
  height: 44px;
  padding: 9px 0;
  overflow: visible;
  cursor: ew-resize;
  touch-action: pan-y;
}

.ntx-rail-spark__line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  transition: opacity .22s ease, stroke-width .22s ease;
}

.ntx-rail-cell:hover .ntx-rail-spark__line,
.ntx-rail-cell.is-scrub .ntx-rail-spark__line { opacity: 1; stroke-width: 1.6; }

.ntx-rail-spark__area {
  fill: url(#ntxRailFade);
  opacity: .32;
  transition: opacity .22s ease;
}

.ntx-rail-cell:hover .ntx-rail-spark__area { opacity: .5; }

/* Le point d'aujourd'hui respire au meme rythme que l'antenne : toute la
   bande bat comme un seul organisme. */
.ntx-rail-spark__now {
  fill: var(--gold-hi);
  animation: ntx-rail-now 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

@keyframes ntx-rail-now {
  0%   { opacity: .5; }
  6%   { opacity: 1; }
  34%  { opacity: .6; }
  100% { opacity: .5; }
}

.ntx-rail-cell.is-scrub .ntx-rail-spark__now { animation: none; opacity: .28; }

.ntx-rail-spark__cursor { opacity: 0; transition: opacity .14s ease; }
.ntx-rail-cell.is-scrub .ntx-rail-spark__cursor { opacity: 1; }
.ntx-rail-spark__cursor line { stroke: var(--gold-hi); stroke-width: 1; opacity: .5; }
.ntx-rail-spark__cursor circle { fill: var(--gold-hi); }

.ntx-rail-cell__stamp {
  display: block;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: .56rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold-hi);
  white-space: nowrap;
  opacity: 0;
  transition: height .2s cubic-bezier(.16, 1, .3, 1),
              margin-top .2s cubic-bezier(.16, 1, .3, 1),
              opacity .16s ease;
}

.ntx-rail-cell.is-scrub .ntx-rail-cell__stamp { height: 1.1em; margin-top: 5px; opacity: 1; }

/* ---------- balayage a l'arrivee d'une cotation ---------- */

.ntx-rail-cell__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(241, 221, 160, .16) 50%, transparent 62%);
}

.ntx-rail-cell.is-fresh .ntx-rail-cell__sweep {
  animation: ntx-rail-sweep .62s cubic-bezier(.16, 1, .3, 1) 1;
}

@keyframes ntx-rail-sweep {
  from { opacity: 1; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 0; transform: translate3d(100%, 0, 0); }
}

/* ---------- entree : la matiere arrive, elle ne fait pas que s'allumer ---------- */

.ntx-rail.is-in .ntx-rail-cell {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1),
              transform .46s cubic-bezier(.16, 1, .3, 1),
              filter .3s cubic-bezier(.16, 1, .3, 1);
  /* Les six chiffres sont un seul tableau : ils deviennent lisibles ensemble.
     Le decalage ne porte donc plus que sur le deplacement, ou il decrit une
     matiere qui se pose. Mesure : la bande entiere etait lisible 535 ms apres
     son declenchement — 275 ms de decalage empiles sur un fondu d'une demi
     seconde. Le chiffre est le contenu, pas la choregraphie. */
  transition-delay: 0s, calc(var(--ntx-rail-i) * 40ms), 0s;
}

/* ---------- filet de progression : position et part visible, sans un mot ---------- */

/* Il decrit la position de la piste : il se place donc juste sous elle, dans
   le flux, et non flottant au bas du bloc entier. */
.ntx-rail__bar {
  position: relative;
  height: 2px;
  margin-top: 7px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.ntx-rail__bar.is-on { opacity: 1; }

.ntx-rail__bar-track {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
}

.ntx-rail__bar-thumb {
  position: absolute;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  will-change: transform, width;
}

/* ---------- aide au geste ---------- */

.ntx-rail-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.ntx-rail-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .62rem;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* Mesure : a .44 ce texte rendait a 4,06:1 sur le verre, sous le seuil.
     C'est lui qui enseigne le geste — il ne peut pas etre le moins lisible
     de la bande. Le jeton commun le porte a 5,73:1. */
  color: var(--paper-dim);
}

.ntx-rail-hint svg { display: block; flex: 0 0 auto; color: var(--gold); opacity: .85; }

.ntx-rail-hint__drift { animation: ntx-rail-drift 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }

@keyframes ntx-rail-drift {
  0%, 100% { transform: translateX(2.5px); }
  50%      { transform: translateX(-2.5px); }
}

/* ---------- adaptation ---------- */

@media (max-width: 760px) {
  .ntx-rail { grid-template-columns: 1fr; }

  .ntx-rail__brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ntx-rail-cell { min-width: 160px; }
}

/* Onglet en arriere-plan : aucun battement ne tourne pour personne. */
body.ntx-rail-away .ntx-pulse__core,
body.ntx-rail-away .ntx-pulse__ring,
body.ntx-rail-away .ntx-rail-spark__now,
body.ntx-rail-away .ntx-rail-hint__drift { animation-play-state: paused; }

/* ---------- preferences systeme ----------
   Le pouls ne disparait pas : il cesse de bouger. Le temoin reste allume,
   l'information demeure. */

@media (prefers-reduced-motion: reduce) {
  .ntx-pulse__core { animation: none; opacity: 1; }
  .ntx-pulse__ring { display: none; }
  .ntx-rail-spark__now { animation: none; opacity: 1; }
  .ntx-rail-hint__drift { animation: none; }
  .ntx-rail.is-in .ntx-rail-cell { transition: opacity .2s ease; transform: none; filter: none; }
  .ntx-rail-cell { transform: none; filter: none; }
  .ntx-rail-cell.is-fresh .ntx-rail-cell__sweep { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .ntx-rail {
    background: rgba(10, 13, 11, .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .ntx-rail { background: #0a0d0b; border-color: rgba(248, 243, 228, .42); }
  .ntx-rail-cell__name { color: var(--paper-soft); }
  .ntx-rail-cell__unit { color: var(--paper-soft); }
}