/* SIGNAL · DATA STREAM (direction F) — canvas particules + 4 chiffres qui se cristallisent
   + 5 plateformes + chips contexte. TOUT scopé sous #s-signal-cinema (préfixe sgf-).
   Le canvas et la statusbar sont position:absolute DANS la section (jamais fixed) →
   ils ne couvrent que la section, pas tout le site. */
#s-signal-cinema{
  --sgf-abyss:#020912;
  --sgf-cyan:#00c8ff;
  --sgf-coral:#ff6b8a;
  --sgf-gold:#ffcc44;
  --sgf-spotify:#1DB954;
  --sgf-red:#FF3333;
  --sgf-white:#f5f7fa;
  --sgf-soft:rgba(245,247,250,.62);
  --sgf-line:rgba(0,200,255,.14);

  position:relative;
  width:100vw;
  min-height:100vh;
  background:transparent;
  color:var(--sgf-white);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  /* centrer verticalement le contenu : élimine le vide béant en bas (contenu ~650px < 100vh) */
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* particle canvas — couvre UNIQUEMENT la section (absolute, pas fixed) */
#s-signal-cinema .sgf-stream{
  position:absolute;inset:0;z-index:0;display:block;pointer-events:none;
}
/* vignette profonde scopée à la section (remplace l'ancien body::after) */
#s-signal-cinema::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, transparent 30%, rgba(2,9,18,.55) 78%, rgba(2,9,18,.9) 100%);
}

#s-signal-cinema .sgf-wrap{
  position:relative;z-index:2;max-width:1140px;width:100%;margin:0 auto;
  padding:48px 20px 56px;
}

/* ── Eyebrow ── */
#s-signal-cinema .sgf-eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sgf-cyan);
  /* état caché par défaut ; révélé par transition au .sgf-go (plus fiable que les
     animations auto-play dans le contexte de compositing de ce site) */
  opacity:0;transform:translateY(-8px);
  transition:opacity .7s .1s cubic-bezier(.22,1,.36,1),transform .7s .1s cubic-bezier(.22,1,.36,1);
}
#s-signal-cinema.sgf-go .sgf-eyebrow{opacity:1;transform:translateY(0)}
#s-signal-cinema .sgf-eyebrow .sgf-dot{width:7px;height:7px;border-radius:50%;background:var(--sgf-cyan);box-shadow:0 0 10px var(--sgf-cyan),0 0 20px rgba(0,200,255,.5);animation:sgf-blink 1.9s infinite}
#s-signal-cinema .sgf-eyebrow .sgf-sep{color:var(--sgf-soft);opacity:.5}
#s-signal-cinema .sgf-eyebrow .sgf-tag{color:var(--sgf-soft)}

#s-signal-cinema .sgf-titleRow{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:14px 0 26px;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s .25s cubic-bezier(.22,1,.36,1),transform .8s .25s cubic-bezier(.22,1,.36,1);
}
#s-signal-cinema.sgf-go .sgf-titleRow{opacity:1;transform:translateY(0)}
#s-signal-cinema .sgf-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(34px,6vw,60px);line-height:.92;letter-spacing:.02em}
#s-signal-cinema .sgf-title b{color:var(--sgf-cyan);font-weight:400}
#s-signal-cinema .sgf-sysline{font-family:'JetBrains Mono',monospace;font-size: 12px;color:var(--sgf-soft);letter-spacing:.08em;text-align:right}
#s-signal-cinema .sgf-sysline .sgf-ok{color:var(--sgf-spotify)}

/* ── Hero stats : 4 grands chiffres cristallisés ── */
#s-signal-cinema .sgf-heroStats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:22px;
}
@media(min-width:760px){#s-signal-cinema .sgf-heroStats{grid-template-columns:repeat(4,1fr)}}
#s-signal-cinema .sgf-stat{
  position:relative;text-align:center;padding:22px 12px 18px;border-radius:16px;
  background:rgba(4,16,30,.42);border:1px solid var(--sgf-line);backdrop-filter:blur(3px);
  overflow:hidden;
}
#s-signal-cinema .sgf-stat .sgf-num{
  font-family:'Anton',sans-serif;font-size:clamp(38px,8vw,58px);line-height:.88;letter-spacing:.005em;
  color:var(--sgf-white);position:relative;
  opacity:0;transform:translateY(6px);
}
#s-signal-cinema .sgf-stat .sgf-num.crystal{animation:sgf-crystallize .6s forwards cubic-bezier(.22,1,.36,1)}
#s-signal-cinema .sgf-stat .sgf-num small{font-size:.42em;vertical-align:.3em;margin-left:2px;font-family:'Anton',sans-serif}
#s-signal-cinema .sgf-stat.sgf-s0 .sgf-num small{color:var(--sgf-cyan)}
#s-signal-cinema .sgf-stat.sgf-s1 .sgf-num small{color:var(--sgf-coral)}
#s-signal-cinema .sgf-stat .sgf-lab{
  font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.13em;text-transform:uppercase;color:var(--sgf-soft);margin-top:9px;
  opacity:0;transition:opacity .5s .25s;
}
#s-signal-cinema .sgf-stat.live .sgf-lab{opacity:1}
#s-signal-cinema .sgf-stat .sgf-sub{font-family:'Manrope',sans-serif;font-size: 12px;color:var(--sgf-soft);margin-top:3px;opacity:0;transition:opacity .5s .35s}
#s-signal-cinema .sgf-stat.live .sgf-sub{opacity:1}

#s-signal-cinema .sgf-stat .sgf-flash{position:absolute;inset:0;border-radius:16px;background:radial-gradient(circle at center,rgba(0,200,255,.5),transparent 65%);opacity:0;pointer-events:none}
#s-signal-cinema .sgf-stat.sgf-s1 .sgf-flash{background:radial-gradient(circle at center,rgba(255,107,138,.5),transparent 65%)}
#s-signal-cinema .sgf-stat .sgf-flash.go{animation:sgf-flash .7s forwards}

/* ── Plateformes ── */
#s-signal-cinema .sgf-platBlock{margin-bottom:22px}
#s-signal-cinema .sgf-blockLabel{
  font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sgf-cyan);
  margin-bottom:12px;display:flex;align-items:center;gap:9px;
}
#s-signal-cinema .sgf-blockLabel::before{content:"";width:18px;height:1px;background:var(--sgf-cyan);box-shadow:0 0 6px var(--sgf-cyan)}
#s-signal-cinema .sgf-platRow{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){#s-signal-cinema .sgf-platRow{grid-template-columns:repeat(5,1fr)}}
#s-signal-cinema .sgf-plat{
  position:relative;padding:14px 10px;border-radius:13px;text-align:center;
  background:rgba(4,16,30,.4);border:1px solid var(--sgf-line);overflow:hidden;
  opacity:0;transform:translateY(12px);
}
#s-signal-cinema .sgf-plat.in{animation:sgf-packetIn .55s forwards cubic-bezier(.22,1,.36,1)}
#s-signal-cinema .sgf-plat .sgf-pBar{position:absolute;left:0;bottom:0;height:3px;width:0;transition:width 1.1s .2s cubic-bezier(.22,1,.36,1)}
#s-signal-cinema .sgf-plat .sgf-pv{font-family:'Bebas Neue',sans-serif;font-size:27px;line-height:1;letter-spacing:.03em}
#s-signal-cinema .sgf-plat .sgf-pn{font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sgf-soft);margin-top:5px}

/* ── Contexte (chips) ── */
#s-signal-cinema .sgf-ctxRow{display:flex;flex-wrap:wrap;gap:10px}
#s-signal-cinema .sgf-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;
  background:rgba(4,16,30,.5);border:1px solid var(--sgf-line);
  font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.05em;color:var(--sgf-white);
  opacity:0;transform:translateY(10px) scale(.96);
}
#s-signal-cinema .sgf-chip.in{animation:sgf-packetIn .5s forwards cubic-bezier(.22,1,.36,1)}
#s-signal-cinema .sgf-chip b{color:var(--sgf-cyan);font-weight:700}
#s-signal-cinema .sgf-chip .sgf-ic{width:7px;height:7px;border-radius:50%;background:var(--sgf-cyan);box-shadow:0 0 7px var(--sgf-cyan)}
#s-signal-cinema .sgf-chip .sgf-terrset{display:flex;gap:5px}
#s-signal-cinema .sgf-chip .sgf-terrset i{font-style:normal;padding:1px 5px;border:1px solid rgba(0,200,255,.3);border-radius:4px;font-size: 12px;color:var(--sgf-white)}
#s-signal-cinema .sgf-chip.up b{color:var(--sgf-spotify)}
#s-signal-cinema .sgf-chip.up .sgf-ic{background:var(--sgf-spotify);box-shadow:0 0 7px var(--sgf-spotify)}

/* ── Status bar — absolute en bas de la section (jamais fixed) ── */
#s-signal-cinema .sgf-statusbar{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.1em;color:var(--sgf-soft);
  background:linear-gradient(180deg,transparent,rgba(2,9,18,.92));border-top:1px solid var(--sgf-line);
}
#s-signal-cinema .sgf-statusbar-live{display:flex;align-items:center;gap:7px;color:var(--sgf-spotify)}
#s-signal-cinema .sgf-statusbar-live i{width:7px;height:7px;border-radius:50%;background:var(--sgf-spotify);box-shadow:0 0 8px var(--sgf-spotify);animation:sgf-blink 1.6s infinite}
#s-signal-cinema .sgf-statusbar-right{color:var(--sgf-cyan)}

/* ── Keyframes (préfixées sgf-) ── */
@keyframes sgf-fadeDown{to{opacity:1;transform:translateY(0)}}
@keyframes sgf-fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes sgf-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sgf-crystallize{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes sgf-packetIn{to{opacity:1;transform:none}}
@keyframes sgf-flash{0%{opacity:0}40%{opacity:.9}100%{opacity:0}}

/* ── Mobile ── */
@media(max-width:760px){
  #s-signal-cinema .sgf-wrap{padding:48px 14px 80px}
  #s-signal-cinema .sgf-statusbar{font-size: 12px;padding:8px 12px;gap:8px}
  #s-signal-cinema .sgf-statusbar-mid{display:none}
}

@media(prefers-reduced-motion:reduce){
  #s-signal-cinema *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}