/* =========================================================================
   topnav.css — Barre de navigation façon accueil LDC (dashboard.html), pour
   les accueils Europa / Conference League et les pages des trois coupes
   (Clubs français, Soirée européenne, Comparateur) : logo + bascule FR/EN à
   gauche, pastilles en majuscules (Inter), bouton principal plein avec
   l'anneau lumineux StarBorder.
   Couleur et logo : --tn-accent / --tn-ink / --tn-logo de la page, sinon
   ceux de la coupe (--cup, --cup-ink, --cup-logo de cup.css).
   Pas d'en-tête collant : comme sur l'accueil LDC, la barre défile.
   ========================================================================= */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px 14px; margin:6px 0 18px; flex-wrap:wrap;
  position:relative; z-index:30; font-family:'Inter', system-ui, sans-serif; }
.tb-left{ display:flex; align-items:center; gap:13px; }
.dash-brand{ display:inline-flex; }
.dash-brand .db-logo{ width:40px; height:40px; display:block; background:var(--tn-logo, var(--cup-logo)) center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); transition:transform .15s; }
.dash-brand:hover .db-logo{ transform:scale(1.06); }
/* Pages sans coupe : drapeau (Clubs français) ou pictogramme (Soirée, Comparateur). */
.dash-brand .db-logo.db-flag{ width:46px; height:32px; border-radius:6px; background:var(--flag-tile, linear-gradient(90deg,#1f4fbf 0 33.3%,#fff 33.3% 66.6%,#e3263a 66.6%));
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.45); filter:none; }
.dash-brand .db-logo.db-pict{ display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; border-radius:11px;
  background:#141c3a; border:1px solid rgba(255,255,255,.14); filter:none; }
.topbar #langSwitch{ display:flex; gap:5px; }

.top-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.nav-forward, .nav-ghost{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 16px; border-radius:10px; transition:.15s; text-decoration:none; }
.nav-forward{ color:var(--tn-ink, var(--cup-ink)); font-weight:800; background:var(--tn-accent, var(--cup)); }
.nav-forward:hover{ filter:brightness(1.08); }
.nav-ghost{ color:#f0f4f8; font-weight:700; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.nav-ghost:hover{ border-color:rgba(var(--gold-rgb),.5); color:rgb(var(--gold-rgb)); }
.nav-ghost img{ width:16px; height:16px; flex:none; }
/* Accès aux autres coupes : teintés de leur couleur, comme sur l'accueil LDC. */
.nav-ghost.nav-ucl{ background:rgba(245,181,10,.10); border-color:rgba(245,181,10,.42); }
.nav-ghost.nav-ucl:hover{ color:#fff; background:rgba(245,181,10,.18); border-color:rgba(245,181,10,.7); }
.nav-ghost.nav-uel{ background:rgba(255,122,26,.10); border-color:rgba(255,122,26,.42); }
.nav-ghost.nav-uel:hover{ color:#fff; background:rgba(255,122,26,.18); border-color:rgba(255,122,26,.7); }
.nav-ghost.nav-uecl{ background:rgba(25,196,79,.10); border-color:rgba(25,196,79,.42); }
.nav-ghost.nav-uecl:hover{ color:#fff; background:rgba(25,196,79,.18); border-color:rgba(25,196,79,.7); }
.fr-mini{ width:18px; height:12px; border-radius:2px; flex:none; background:linear-gradient(90deg,#1f4fbf 0 33.3%,#fff 33.3% 66.6%,#e3263a 66.6%); }
/* Mini-drapeaux des pages pays */
.fr-mini.flag-de{ background:linear-gradient(180deg,#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%); }
.fr-mini.flag-en{ background:linear-gradient(90deg,transparent 40%,#ce1124 40% 60%,transparent 60%), linear-gradient(180deg,transparent 36%,#ce1124 36% 64%,transparent 64%), #fff; }
.fr-mini.flag-es{ background:linear-gradient(180deg,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%); }
.fr-mini.flag-it{ background:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%); }
.topbar #liveFlag{ align-items:center; }

/* StarBorder (ReactBits) : anneau lumineux qui tourne autour du bouton principal */
@property --sb-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.star-border{ position:relative; isolation:isolate; }
.star-border::after{ content:''; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.6px;
  background:conic-gradient(from var(--sb-a,0deg), transparent 0deg 250deg, #fff 305deg, var(--tn-accent, var(--cup)) 334deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sbRot 3.4s linear infinite; pointer-events:none; }
@keyframes sbRot{ to{ --sb-a:360deg; } }
@media (prefers-reduced-motion:reduce){ .star-border::after{ animation:none; } }

@media (max-width:600px){
  .topbar{ justify-content:center; }
  .dash-brand .db-logo{ width:34px; height:34px; }
  .nav-forward, .nav-ghost{ padding:8px 13px; }
}

/* Bandeau : sous-titre en Inter, comme l'accueil LDC */
.cup-header .cup-tag{ font-family:'Inter', system-ui, sans-serif; font-weight:600; letter-spacing:.12em; }