/* charte-barre.css v1 (refonte-site, 02/11/2026) : le socle « Aubergine royale » de spiderdjango.tv.
   Polices, couleurs (variables --a-*), anciennes variables du site remappées, barre du haut, bandeau des rendez-vous, pied.
   Chargée par TOUTES les pages, y compris les pages dossiers (via @import en tête du premier <style> de sorties.html).
   Ne vise que la barre et le pied : le contenu des pages est dans charte-site.css, que les dossiers ne chargent pas.
   Couleurs : #2a0f2e, #f6eedf, #ff6fb5, #ff2e88, jaune #ffd23f par petites touches. Polices OFL : Big Shoulders Display 900, Space Grotesk, Space Mono. */
@font-face{font-family:'BSD';src:url(/dossiers-img/polices/bsd900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'SG';src:url(/dossiers-img/polices/sg500.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'SG';src:url(/dossiers-img/polices/sg700.woff2) format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:'SM';src:url(/dossiers-img/polices/sm700.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --a-nuit:#2a0f2e; --a-nuit-2:#1d0a20; --a-panneau:#3a1741; --a-panneau-2:#4a1f52;
  --a-creme:#f6eedf; --a-texte:#eadfe6; --a-doux:#c9b3c4; --a-gris:#9c8297;
  --a-rose:#ff6fb5; --a-fluo:#ff2e88; --a-jaune:#ffd23f;
  --a-trait:rgba(246,238,223,.14); --a-lisere:rgba(255,111,181,.42);
  --a-titre:'BSD',Impact,'Arial Narrow',sans-serif; --a-corps:'SG','Segoe UI',Arial,sans-serif; --a-mono:'SM',ui-monospace,Consolas,monospace;
  --a-coin:12px;
  /* les anciennes variables du site, remappées : tout ce qui les lit passe en aubergine sans retoucher la page */
  --bg:var(--a-nuit); --bg-2:var(--a-nuit-2); --surface:var(--a-panneau); --surface-2:var(--a-panneau-2);
  --border:var(--a-trait); --border-2:var(--a-lisere); --border-gold:rgba(255,210,63,.28);
  --accent:var(--a-fluo); --accent-d:#d81f70; --accent-bg:rgba(255,46,136,.10);
  --red:var(--a-fluo); --gold:var(--a-jaune); --gold-bg:rgba(255,210,63,.08);
  --dim:#6d5368; --sub:var(--a-doux); --text:var(--a-texte); --white:var(--a-creme);
  --f-display:var(--a-corps); --f-numeral:var(--a-mono); --f-body:var(--a-corps); --f-mono:var(--a-mono);
  --sok-nuit0:var(--a-nuit-2); --sok-nuit1:var(--a-nuit); --sok-carte:var(--a-panneau); --sok-bord:var(--a-trait);
  --sok-violet:var(--a-rose); --sok-vert:var(--a-fluo); --sok-texte:var(--a-creme);
  --gg-panel:rgba(29,10,32,.94); --gg-line:var(--a-trait);
}

/* ---------- la barre du haut ---------- */
header.topbar{background:rgba(29,10,32,.92)!important;border-bottom:1px solid var(--a-trait)!important;backdrop-filter:blur(14px)}
header.topbar::after{background:var(--a-fluo)!important;opacity:1!important;height:2px!important;bottom:-2px!important;transform-origin:left;animation:aTrace .7s cubic-bezier(.2,.8,.2,1) both}
.brand-name{font-family:var(--a-titre)!important;font-weight:900!important;font-size:24px!important;letter-spacing:.5px!important;text-transform:uppercase;color:var(--a-creme)!important;
  text-shadow:.06em .05em 0 var(--a-fluo)}
.brand-tagline{font-family:var(--a-mono)!important;font-size:10px!important;letter-spacing:1.5px!important;color:var(--a-rose)!important;text-transform:none!important}
.brand-seal{border-color:var(--a-lisere)!important;box-shadow:none!important}
.brand-heart{border-color:var(--a-lisere)!important;background:rgba(255,46,136,.10)!important;color:var(--a-fluo)!important}
.brand-heart-count{font-family:var(--a-mono)!important;color:var(--a-creme)!important}
.nav-link{font-family:var(--a-titre)!important;font-weight:900!important;font-size:19px!important;letter-spacing:.6px!important;text-transform:uppercase;
  color:var(--a-doux)!important;background:none!important;border-radius:0!important;padding:8px 14px!important;
  background-image:linear-gradient(var(--a-fluo),var(--a-fluo))!important;background-repeat:no-repeat!important;background-position:0 88%!important;background-size:0 9px!important;
  transition:background-size .25s cubic-bezier(.2,.8,.2,1),color .2s!important}
.nav-link:hover{color:var(--a-creme)!important;background-size:100% 9px!important}
.nav-link.active{color:var(--a-creme)!important;background-size:100% 9px!important;box-shadow:none!important;border:0!important}
.nav-link.active::after,.nav-link.active::before{display:none!important}
.top-status{font-family:var(--a-mono)!important;border-color:var(--a-trait)!important;color:var(--a-doux)!important;border-radius:0!important}
.top-status.live{color:var(--a-creme)!important;border-color:var(--a-fluo)!important;background:var(--a-fluo)!important}
.top-status.live .dot{background:var(--a-jaune)!important;box-shadow:0 0 8px var(--a-jaune)!important}
.top-clock{font-family:var(--a-titre)!important;font-weight:900!important;font-size:28px!important;letter-spacing:1px!important;color:var(--a-jaune)!important}
.nav-burger span{background:var(--a-creme)!important}
.brand-name{animation:aRiso .5s .15s cubic-bezier(.2,.8,.2,1) both}

/* ---------- le bandeau des rendez-vous (topbar-live.js) ---------- */
.tlb-bar{background:var(--a-nuit-2)!important;border-bottom:1px solid var(--a-trait)!important}
.tlb-live{background:var(--a-fluo)!important}
.tlb-live .tlb-status,.tlb-live .tlb-game{color:var(--a-nuit)!important}
.tlb-status{font-family:var(--a-mono)!important;color:var(--a-jaune)!important;letter-spacing:.5px!important}
.tlb-game{font-family:var(--a-corps)!important;color:var(--a-doux)!important;letter-spacing:.3px!important}
.tlb-countdown{font-family:var(--a-titre)!important;font-weight:900!important;font-size:20px!important;color:var(--a-jaune)!important;background:none!important;border:0!important}
.tlb-pulse{background:var(--a-jaune)!important;box-shadow:0 0 8px var(--a-jaune)!important}
.tlb-twitch-btn,.tlb-watch-btn{border-radius:0!important;font-family:var(--a-mono)!important;background:transparent!important;border:2px solid var(--a-creme)!important;color:var(--a-creme)!important}
.tlb-watch-btn{background:var(--a-nuit)!important;border-color:var(--a-nuit)!important}
.tlb-twitch-btn:hover{background:var(--a-creme)!important;color:var(--a-nuit)!important}

/* téléphone : la barre ne déborde plus (l'état du live est déjà dans le bandeau) */
@media (max-width:700px){.top-meta{display:none!important}.brand-name{font-size:21px!important}}

/* le menu du téléphone (topbar-mobile.js) : fond plein, il ne laisse plus voir le bandeau à travers */
.top-nav.open{background:var(--a-nuit-2)!important;backdrop-filter:none!important;border-bottom:2px solid var(--a-fluo)!important}
.top-nav.open .nav-link{background-size:0 9px!important;border-bottom-color:var(--a-trait)!important}
.top-nav.open .nav-link.active{background-size:6px 100%!important;background-position:0 0!important;padding-left:18px!important}

/* ---------- pied ---------- */
.site-footer{background:var(--a-nuit-2)!important;border-top:1px solid var(--a-trait)!important}
.site-footer::before{background:var(--a-fluo)!important;opacity:1!important}
.footer-mark{font-family:var(--a-titre)!important;font-weight:900;text-transform:uppercase;color:var(--a-creme)!important}

@keyframes aTrace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aRiso{from{text-shadow:0 0 0 var(--a-fluo)}to{text-shadow:.06em .05em 0 var(--a-fluo)}}
@media (prefers-reduced-motion:reduce){header.topbar::after,.brand-name{animation:none!important}.nav-link{transition:none!important}}