/* ════════════════════════════════════════════════════════════════
   BLS RADIO — HOME v5 « RAW SIGNAL »
   Brutalisme électronique · Typo monumentale · Cinétique au scroll
   S'ajoute à style.css (tokens partagés) — page index uniquement.
   ════════════════════════════════════════════════════════════════ */

:root{
  --line: rgba(168,200,255,.16);
  --line-strong: rgba(168,200,255,.34);
  --r0: 2px; /* radius brut */
}

/* page */
body.home{
  background:var(--ink);
  padding-bottom:0;
  cursor:none;
}
@media (hover:none), (pointer:coarse){ body.home{cursor:auto} }
body.home ::selection{background:var(--volt);color:var(--ink)}

/* ── GRAIN ── */
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain-shift 6s steps(6) infinite}
@keyframes grain-shift{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}}

/* ── BOOT LOADER (auto-disparition CSS, sans JS requis) ── */
.boot{position:fixed;inset:0;z-index:300;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  animation:boot-out .5s 1.25s var(--ease) forwards}
.boot-logo{font-family:var(--font-display);font-size:60px;letter-spacing:.1em;color:var(--text)}
.boot-logo em{font-style:normal;color:var(--volt)}
.boot-bar{width:min(320px,60vw);height:2px;background:var(--line);overflow:hidden}
.boot-bar i{display:block;height:100%;width:100%;background:var(--volt);transform-origin:left;animation:boot-fill 1.15s var(--ease) forwards}
.boot-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.5em;text-transform:uppercase;color:var(--text-3)}
@keyframes boot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes boot-out{to{opacity:0;visibility:hidden}}

/* ── FLASH on-air ── */
.flash{position:fixed;inset:0;z-index:250;pointer-events:none;background:var(--volt);opacity:0}
body.flashing .flash{animation:flash-hit .42s var(--ease)}
@keyframes flash-hit{0%{opacity:0}12%{opacity:.9}100%{opacity:0}}

/* ── CURSEUR CROSSHAIR ── */
@media (hover:hover) and (pointer:fine){
  .xh{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
  .xh-c{position:absolute;width:34px;height:34px;border:1.5px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .22s var(--ease),height .22s var(--ease),border-radius .22s}
  .xh::before,.xh::after{content:"";position:absolute;background:#fff;transform:translate(-50%,-50%)}
  .xh::before{width:15px;height:1.5px}
  .xh::after{width:1.5px;height:15px}
  body.xh-hover .xh-c{width:56px;height:56px;border-radius:6px}
  body.home *{cursor:none !important}
}

/* ── RAIL DROIT (données + horloge) ── */
.rail{position:fixed;top:0;bottom:64px;z-index:60;display:flex;flex-direction:column;align-items:center;width:58px;
  font-family:var(--font-mono);pointer-events:none}
.rail-r{right:0;border-left:1px solid var(--line)}
.rail-data{flex:1;display:flex;align-items:center;overflow:hidden}
.rail-data span{writing-mode:vertical-rl;font-size:8.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.rail-data b{color:var(--volt);font-weight:400}
.rail-bottom{padding:16px 0;font-size:8px;letter-spacing:.3em;color:var(--text-3);writing-mode:vertical-rl}

/* ── TOPBAR ── */
.topbar{position:fixed;top:0;left:0;right:58px;z-index:70;display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 26px;border-bottom:1px solid var(--line);background:rgba(3,6,13,.72);backdrop-filter:blur(10px)}
.topbar-brand{position:relative;z-index:71}
.topbar-brand{font-family:var(--font-display);font-size:21px;letter-spacing:.12em;color:var(--text);display:flex;align-items:center;gap:16px}
.topbar-brand sup{font-family:var(--font-mono);font-size:8px;color:var(--volt)}
.brand-word{display:flex;align-items:baseline;gap:8px}
/* ── LOGO « LIVE SIGNAL » : gros, débordant, vivant avec le son ── */
.brand-logo{width:96px;height:96px;object-fit:contain;margin-top:58px;margin-bottom:-58px;flex-shrink:0;
  transform-origin:center;will-change:transform,filter;
  filter:drop-shadow(0 10px 30px rgba(30,90,255,.5));
  animation:logo-lock 1s var(--ease) 1.3s backwards;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
.topbar.scrolled .brand-logo{width:40px;height:40px;margin-top:0;margin-bottom:0}
/* intro : verrouillage de signal (wipe + flash + chromatic settle) */
@keyframes logo-lock{
  0%{clip-path:inset(46% 0 46% 0);opacity:0;transform:scale(1.18);filter:brightness(4) drop-shadow(0 0 0 var(--volt))}
  45%{opacity:1;clip-path:inset(0 0 0 0)}
  60%{transform:scale(.97);filter:brightness(1.3) drop-shadow(-3px 0 0 rgba(30,90,255,.6)) drop-shadow(3px 0 0 rgba(200,255,59,.6))}
  100%{transform:scale(1);opacity:1;clip-path:inset(0 0 0 0);filter:drop-shadow(0 10px 30px rgba(30,90,255,.5))}
}
/* repos : respiration très lente */
.logo-idle{animation:logo-breathe 5.5s ease-in-out infinite !important}
@keyframes logo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* survol hors-live : petit glitch net */
body:not(.on-air) .topbar-brand:hover .brand-logo{animation:logo-glitch .42s steps(2,end) 2 !important}
@keyframes logo-glitch{
  0%{transform:translate(0,0)}
  25%{transform:translate(-2px,1px);filter:drop-shadow(-4px 0 0 rgba(30,90,255,.7)) drop-shadow(4px 0 0 rgba(200,255,59,.7))}
  50%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,0);filter:drop-shadow(3px 0 0 rgba(200,255,59,.6))}
  100%{transform:translate(0,0)}
}
/* live : la pulsation + le halo sont pilotés en JS (audio-réactif) → on coupe les anim CSS */
body.on-air .brand-logo{animation:none !important}
@media (prefers-reduced-motion:reduce){
  .brand-logo,.logo-idle,body:not(.on-air) .topbar-brand:hover .brand-logo{animation:none !important}
}
.topbar-nav{display:flex;gap:2px}
.topbar-nav a{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-2);
  padding:9px 16px;border:1px solid transparent;transition:all .15s}
.topbar-nav a:hover{color:var(--ink);background:var(--volt)}
.hb{display:none;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:none}
.hb span{width:18px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.hb[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* menu overlay mobile */
.hb-menu{position:fixed;inset:0;z-index:65;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:4px;
  clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}
.hb-menu.open{clip-path:inset(0 0 0 0)}
.hb-menu a{font-family:var(--font-display);font-size:clamp(44px,11vw,84px);line-height:1.04;color:var(--text);display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding:10px 0;transition:color .2s,padding-left .3s var(--ease)}
.hb-menu a i{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--volt)}
.hb-menu a:hover{color:var(--volt);padding-left:14px}

/* ── LAYOUT GLOBAL ── */
.stage{margin:0 58px 0 0;position:relative}
.sec{position:relative;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:18px;padding:26px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.sec-no{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--volt)}
.sec-title{font-family:var(--font-display);font-size:clamp(30px,4.2vw,58px);letter-spacing:.04em;line-height:1;text-transform:uppercase}
.sec-aside{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3)}
.sec-bigno{position:absolute;right:-16px;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none}

/* reveal par ligne */
.rv{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv1{transition-delay:.07s}.rv2{transition-delay:.14s}.rv3{transition-delay:.21s}

/* ════════════════════════════════════════
   00 — HERO
   ════════════════════════════════════════ */
.hero5{min-height:100svh;display:grid;grid-template-rows:1fr auto;padding-top:56px;overflow:hidden;position:relative}
/* vidéo de fond (videos/BLS-Radio-2026.mp4) + fallback gradient */
.hero5 .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero5 .hero-video video{width:100%;height:100%;object-fit:cover;opacity:.30;filter:saturate(1.1) contrast(1.05)}
.hero5-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 540px at 78% 30%, rgba(30,90,255,.20), transparent 62%),
    radial-gradient(620px 460px at 12% 80%, rgba(26,58,143,.22), transparent 60%)}
.hero5-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(3,6,13,.42) 0%, rgba(3,6,13,.30) 45%, var(--ink) 99%)}
.hero5-ghost{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);z-index:1;font-family:var(--font-display);
  font-size:56vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(30,90,255,.10);pointer-events:none;user-select:none;letter-spacing:-.01em}

.hero5-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:0;padding:30px 0 0}
.hero5-words{padding-left:26px;min-width:0}
.h5-line{display:block;font-family:var(--font-display);font-size:clamp(72px,12.5vw,196px);line-height:.82;letter-spacing:.005em;
  text-transform:uppercase;white-space:nowrap;will-change:transform}
.h5-line--ghost{color:transparent;-webkit-text-stroke:1.5px rgba(168,200,255,.5)}
.h5-line--volt{color:var(--volt);text-shadow:0 0 60px rgba(200,255,59,.25)}
.h5-line--shift{margin-left:8vw}
.hero5-sub{display:flex;align-items:center;gap:22px;margin:34px 0 0;padding-left:26px;flex-wrap:wrap}
.hero5-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-strong);padding:11px 18px}
.hero5-badge i{width:7px;height:7px;background:var(--volt);box-shadow:0 0 12px var(--volt);animation:blink 1.4s infinite}
.hero5-desc{max-width:380px;font-size:13.5px;color:var(--text-2);line-height:1.7}

/* player module (base fonctionnelle conservée, habillage hardware) */
.deck{position:relative;justify-self:center;align-self:center;padding:26px;margin:20px 26px}
.deck::before,.deck::after,
.deck b::before,.deck b::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--volt)}
.deck::before{top:0;left:0;border-right:0;border-bottom:0}
.deck::after{top:0;right:0;border-left:0;border-bottom:0}
.deck b::before{bottom:0;left:0;border-right:0;border-top:0}
.deck b::after{bottom:0;right:0;border-left:0;border-top:0}
.deck-label{position:absolute;top:-7px;left:50%;transform:translateX(-50%);background:var(--ink);padding:0 12px;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--text-3)}
.deck .player-outer{width:min(360px,72vw)}
.deck .player-circle{background:
  radial-gradient(circle at 32% 28%, rgba(77,142,255,.22), transparent 55%),
  linear-gradient(160deg, rgba(14,28,69,.92), rgba(4,8,18,.97));border-radius:50%}
.deck-meta{display:flex;justify-content:space-between;margin-top:18px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)}
.deck-meta em{font-style:normal;color:var(--volt)}

.hero5-foot{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;border-top:1px solid var(--line);background:rgba(3,6,13,.4)}
.hero5-foot>*{padding:14px 26px;font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:10px}
.hero5-foot .mid{border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--text)}
.hero5-foot .right{justify-content:flex-end}
.hero5-foot .scrolldown{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ════════════════════════════════════════
   02 — SIGNAL BOOSTERS (marquee de cartes, logos blancs)
   ════════════════════════════════════════ */
.pmq{overflow:hidden;padding:46px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pmq-track{display:flex;gap:22px;width:max-content;animation:marquee 30s linear infinite;padding:0 11px}
.pmq:hover .pmq-track{animation-play-state:paused}
.pm-card{display:flex;flex-direction:column;gap:18px;width:330px;flex-shrink:0;padding:26px 28px;background:transparent;border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.pm-card:hover{border-color:var(--volt);box-shadow:0 0 36px rgba(200,255,59,.12),inset 0 0 24px rgba(200,255,59,.04);transform:translateY(-4px)}
.pm-logo{height:88px;display:flex;align-items:center}
.pm-logo img{max-height:74px;max-width:230px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.8;transition:opacity .25s,transform .3s var(--ease)}
.pm-card:hover .pm-logo img{opacity:1;transform:scale(1.04)}
.pm-id{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line);padding-top:16px}
.pm-tag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--volt)}
.pm-name{font-family:var(--font-display);font-size:26px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.pm-link{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);transition:color .2s}
.pm-card:hover .pm-link{color:var(--volt)}
/* carte CTA dans le flux */
.pm-card--cta{justify-content:center;align-items:flex-start;border-style:dashed}
.pm-card--cta .pm-plus{font-family:var(--font-display);font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--volt);transition:all .3s}
.pm-card--cta:hover{border-style:solid}
.pm-card--cta:hover .pm-plus{color:var(--volt);-webkit-text-stroke:0;text-shadow:0 0 40px rgba(200,255,59,.4)}

/* ════════════════════════════════════════
   02 — TRANSMISSIONS (grille de cartes)
   ════════════════════════════════════════ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.tcard{position:relative;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s}
.tcard:nth-child(3n){border-right:0}
.tcard:nth-last-child(-n+3){border-bottom:0}
.tcard:hover{background:rgba(200,255,59,.045)}
.tcard-top{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.tcard-img{aspect-ratio:16/10;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.tcard-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05);transition:filter .45s,transform .8s var(--ease)}
.tcard:hover .tcard-img img{filter:grayscale(0) saturate(1.15);transform:scale(1.06)}
.tcard-body{flex:1;display:flex;flex-direction:column;gap:11px;padding:20px 22px 24px}
.tcard-cat{font-family:var(--font-mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--volt)}
.tcard-title{font-family:var(--font-display);font-size:clamp(22px,2vw,32px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--text);transition:color .15s}
.tcard:hover .tcard-title{color:var(--volt)}
.tcard-foot{margin-top:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)}
.tcard-foot i{font-style:normal;transform:translateX(-6px);opacity:0;transition:all .25s var(--ease);color:var(--volt)}
.tcard:hover .tcard-foot{color:var(--text)}
.tcard:hover .tcard-foot i{opacity:1;transform:none}
/* carte CTA */
.tcard--cta{background:var(--volt);align-items:stretch;justify-content:center;border-color:var(--volt)}
.tcard--cta .tcard-cta-in{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:22px;gap:30px}
.tcard--cta .tc-no{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.tcard--cta .tc-big{font-family:var(--font-display);font-size:clamp(34px,3vw,52px);line-height:.92;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.tcard--cta .tc-arrow{font-size:38px;color:var(--ink);transition:transform .3s var(--ease)}
.tcard--cta:hover{background:#D8FF6E}
.tcard--cta:hover .tc-arrow{transform:translateX(10px)}

/* bouton brut */
.btn5{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--line-strong);padding:15px 26px;position:relative;overflow:hidden;transition:color .15s;background:none}
.btn5::before{content:"";position:absolute;inset:0;background:var(--volt);transform:scaleY(0);transform-origin:bottom;transition:transform .22s var(--ease)}
.btn5:hover{color:var(--ink)}
.btn5:hover::before{transform:scaleY(1)}
.btn5 span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px}
.btn5--volt{background:var(--volt);color:var(--ink);border-color:var(--volt)}
.btn5--volt::before{background:var(--text)}
.btn5--volt:hover{color:var(--ink)}

/* ════════════════════════════════════════
   03 — NIGHT MOVES (scroll horizontal épinglé)
   ════════════════════════════════════════ */
.hscroll{position:relative;height:340vh}
.hscroll-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.hscroll-pin .sec-head{flex-shrink:0}
.hscroll-track{display:flex;height:100%;will-change:transform}
.evt{flex:0 0 min(560px,86vw);height:100%;border-right:1px solid var(--line);position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.evt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(1.1) contrast(1.05);transition:opacity .4s,transform .8s var(--ease)}
.evt:hover img{opacity:.72;transform:scale(1.05)}
.evt::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,transparent 30%,rgba(3,6,13,.92) 88%)}
.evt-inner{position:relative;z-index:2;padding:34px 30px}
.evt-date{font-family:var(--font-display);font-size:clamp(60px,7vw,104px);line-height:.86;color:var(--volt)}
.evt-date small{display:block;font-size:.24em;letter-spacing:.5em;color:var(--text-2);font-family:var(--font-mono);margin-top:8px}
.evt-name{font-family:var(--font-display);font-size:clamp(26px,3vw,42px);line-height:1;letter-spacing:.02em;text-transform:uppercase;margin:16px 0 8px}
.evt-loc{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.evt-tag{position:absolute;top:24px;left:30px;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);background:var(--volt);padding:7px 13px}
.evt--cta{align-items:center;justify-content:center;text-align:center;background:
  radial-gradient(420px 300px at 50% 45%, rgba(30,90,255,.22), transparent 70%)}
.evt--cta .evt-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.evt--cta h3{font-family:var(--font-display);font-size:clamp(40px,5vw,72px);line-height:.92;text-transform:uppercase}
.evt--cta h3 span{color:transparent;-webkit-text-stroke:1.5px var(--volt)}
.hscroll-progress{position:absolute;left:26px;right:26px;bottom:22px;z-index:5;height:1px;background:var(--line)}
.hscroll-progress i{display:block;height:100%;width:0;background:var(--volt);box-shadow:0 0 10px var(--volt)}

/* ════════════════════════════════════════
   04 — THE CREW (accordéon plein écran)
   ════════════════════════════════════════ */
.crew{display:flex;height:78svh;min-height:520px}
.crew-p{position:relative;flex:1;overflow:hidden;border-right:1px solid var(--line);transition:flex .55s var(--ease);display:block}
.crew-p:last-child{border-right:0}
.crew-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.8);transition:filter .5s,transform .9s var(--ease)}
.crew-p::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,transparent 40%,rgba(3,6,13,.9) 92%)}
.crew-p:hover{flex:3.2}
.crew-p:hover img{filter:grayscale(0) saturate(1.15) brightness(1);transform:scale(1.04)}
.crew-name{position:absolute;left:22px;bottom:22px;z-index:2;font-family:var(--font-display);font-size:clamp(22px,2.6vw,42px);
  letter-spacing:.03em;text-transform:uppercase;writing-mode:vertical-rl;rotate:180deg;transition:writing-mode 0s,rotate 0s}
.crew-style{position:absolute;right:22px;top:22px;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--volt);
  writing-mode:vertical-rl;opacity:0;transition:opacity .35s .15s}
.crew-more{position:absolute;left:22px;bottom:22px;z-index:2;opacity:0;transform:translateY(14px);transition:opacity .35s .18s,transform .35s .18s var(--ease)}
.crew-more b{display:block;font-family:var(--font-display);font-size:clamp(30px,3.4vw,54px);letter-spacing:.03em;text-transform:uppercase;line-height:.95}
.crew-more span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--volt)}
.crew-p:hover .crew-name{opacity:0}
.crew-p:hover .crew-more{opacity:1;transform:none}
.crew-p:hover .crew-style{opacity:1}
.crew-p:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}

/* ════════════════════════════════════════
   05 — DATA (FAQ)
   ════════════════════════════════════════ */
.faq5{padding:0;max-width:920px}
.faq5 details{border-bottom:1px solid var(--line)}
.faq5 details:last-child{border-bottom:0}
.faq5 summary{list-style:none;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;
  padding:15px 26px;transition:background .12s;cursor:pointer}
.faq5 summary::-webkit-details-marker{display:none}
.faq5 summary:hover{background:rgba(200,255,59,.05)}
.faq5 .q-no{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--text-3)}
.faq5 .q-t{font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--text)}
.faq5 .q-x{font-family:var(--font-display);font-size:20px;color:var(--volt);transition:transform .3s var(--ease);line-height:1}
.faq5 details[open] .q-x{transform:rotate(45deg)}
.faq5 details[open] summary{background:rgba(200,255,59,.05)}
.faq5 .a{padding:0 26px 22px 90px;max-width:760px;color:var(--text-2);font-size:13.5px;line-height:1.7}

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.foot5{position:relative}
.foot5-marquee{overflow:hidden;border-bottom:1px solid var(--line);padding:18px 0}
.foot5-marquee .mt{display:flex;width:max-content;animation:marquee 24s linear infinite}
.foot5-marquee span{font-family:var(--font-display);font-size:clamp(64px,11vw,170px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;padding-right:60px;color:transparent;-webkit-text-stroke:1.5px rgba(168,200,255,.4)}
.foot5-marquee em{font-style:normal;color:var(--volt);-webkit-text-stroke:0}
.foot5-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.foot5-grid>div{padding:36px 26px;border-right:1px solid var(--line)}
.foot5-grid>div:last-child{border-right:0}
.f5-title{font-family:var(--font-mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-3);margin-bottom:20px}
.f5-links a{display:block;font-family:var(--font-display);font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);padding:5px 0;transition:color .15s,padding-left .25s var(--ease)}
.f5-links a:hover{color:var(--volt);padding-left:10px}
.f5-brand p{font-size:13px;color:var(--text-2);line-height:1.75;max-width:300px;margin-top:14px}
.f5-brand img{width:64px;height:64px;object-fit:contain}
.f5-social{display:flex;gap:10px;margin-top:20px}
.f5-social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--text-2);transition:all .2s}
.f5-social a:hover{background:var(--volt);color:var(--ink);border-color:var(--volt)}
.foot5-base{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 26px 92px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.foot5-base a{color:var(--text-3);transition:color .2s}
.foot5-base a:hover{color:var(--volt)}

/* ════════════════════════════════════════
   TICKER LIVE (barre basse permanente)
   ════════════════════════════════════════ */
.ticker{position:fixed;left:0;right:0;bottom:0;z-index:95;height:64px;display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:stretch;
  background:var(--ink-2);border-top:1px solid var(--line-strong)}
.tk-play{width:64px;display:flex;align-items:center;justify-content:center;background:var(--volt);color:var(--ink);transition:filter .15s}
.tk-play:hover{filter:brightness(1.12)}
.tk-play svg{width:20px;height:20px;fill:var(--ink)}
.tk-live{display:flex;align-items:center;gap:10px;padding:0 22px;border-right:1px solid var(--line);font-family:var(--font-mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-3)}
.tk-live i{width:7px;height:7px;background:var(--text-3);transition:all .3s}
body.on-air .tk-live{color:var(--volt)}
body.on-air .tk-live i{background:var(--volt);box-shadow:0 0 12px var(--volt);animation:blink 1.3s infinite}
.tk-scroll{overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tk-scroll .tk-t{display:flex;width:max-content;animation:marquee 20s linear infinite}
.tk-scroll span{font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--text);white-space:nowrap;padding-right:70px}
.tk-scroll em{font-style:normal;color:var(--volt)}
.tk-clock{display:flex;align-items:center;padding:0 22px;border-left:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--text-2)}
.tk-full{display:flex;align-items:center;gap:9px;padding:0 22px;border-left:1px solid var(--line);font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-2);transition:all .15s}
.tk-full:hover{background:var(--volt);color:var(--ink)}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width:1180px){
  .tgrid{grid-template-columns:1fr 1fr}
  .tcard:nth-child(3n){border-right:1px solid var(--line)}
  .tcard:nth-child(2n){border-right:0}
  .tcard:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .tcard:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:980px){
  .rail{display:none}
  .stage{margin:0}
  .topbar{left:0;right:0}
  .hero5-grid{grid-template-columns:1fr;gap:8px}
  .deck{margin:6px auto 26px}
  .h5-line--shift{margin-left:4vw}
  .pm-card{width:280px}
  .crew{flex-direction:column;height:auto}
  .crew-p{height:150px;border-right:0;border-bottom:1px solid var(--line)}
  .crew-p:hover{flex:2.6}
  .crew-name{writing-mode:horizontal-tb;rotate:0deg}
  .crew-style{writing-mode:horizontal-tb}
  .foot5-grid{grid-template-columns:1fr 1fr}
  .foot5-grid>div{border-bottom:1px solid var(--line)}
  .faq5 summary{grid-template-columns:34px 1fr auto;gap:12px;padding:13px 18px}
  .faq5 .a{padding:0 18px 18px 18px}
  /* events : scroll horizontal natif */
  .hscroll{height:auto}
  .hscroll-pin{position:static;height:auto}
  .hscroll-track{overflow-x:auto;height:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hscroll-track::-webkit-scrollbar{display:none}
  .evt{height:70svh;min-height:440px}
  .hscroll-progress{display:none}
}
@media (max-width:640px){
  .tgrid{grid-template-columns:1fr}
  .tcard{border-right:0 !important;border-bottom:1px solid var(--line) !important}
  .tcard:last-child{border-bottom:0 !important}
}
@media (max-width:720px){
  .topbar-nav{display:none}
  .brand-logo{width:60px;height:60px;margin-top:30px;margin-bottom:-30px}
  .topbar.scrolled .brand-logo{width:36px;height:36px;margin-top:0;margin-bottom:0}
  .hb{display:flex}
  .ticker{grid-template-columns:auto 1fr auto;height:58px}
  .tk-live,.tk-clock{display:none}
  .tk-play{width:58px}
  .hero5-desc{max-width:none}
  .specs{grid-template-columns:1fr 1fr}
  .spec:nth-child(3n){border-right:1px solid var(--line)}
  .spec:nth-child(2n){border-right:0}
  .foot5-base{padding-bottom:84px}
}

@media (prefers-reduced-motion:reduce){
  .boot{animation-duration:.01ms;animation-delay:0s}
  .h5-line{transform:none !important}
  .grain{animation:none}
}