/* =========================================================================
   styles.css — Thème sombre partagé (dashboard / tracker / legal)
   ========================================================================= */
:root{
  --bg:        #070912;
  --bg-soft:   #0e1222;
  --card:      #121733;
  --card-2:    #161c3d;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --txt:       #eef1ff;
  --muted:     #9aa3c4;
  --muted-2:   #6f78a0;
  --accent:    #1b68ff;
  --accent-2:  #6f5bff;
  --live:      #ff3b46;
  --upcoming:  rgb(var(--gold-rgb, 245, 181, 10));
  --finished:  #28c76f;
  --zone-q:    #28c76f;   /* 1-8  qualifiés directs */
  --zone-po:   #4aa8ff;   /* 9-24 barrages          */
  --zone-out:  #ff5d6c;   /* 25-36 éliminés          */
  --radius:    14px;
  --shadow:    none;          /* flat design : pas d'ombres portées */
  --gold-rgb:  var(--fav-rgb, 245, 181, 10);   /* accent or, teinté par le club favori si défini */
  --gold:      rgb(var(--gold-rgb));
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#0a1024;
  background-image:
    radial-gradient(130% 92% at 50% 36%, transparent 52%, rgba(2,4,12,0.5) 100%),
    linear-gradient(180deg, #0e1736 0%, #0a1024 58%, #05070f 100%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;            /* le ballon de fond ne crée pas de scroll horizontal */
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
a{ color:inherit; text-decoration:none; }

/* ---- En-tête / navigation ---------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:12px 22px;
  background:#0a1024;
  border-bottom:1px solid var(--line-2);
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.3px; }
.brand .star{
  width:38px; height:38px; flex-shrink:0;
  background:url('logo.svg?v=4') center/contain no-repeat;
  color:transparent; font-size:0;       /* masque l'ancien ★, affiche le logo LDC */
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
}
.brand .t1{ font-size:15px; line-height:1; }
.brand .t2{ font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:.4px; }

.nav{ display:flex; gap:6px; margin-left:6px; flex-wrap:wrap; }
.nav a{
  padding:7px 13px; border-radius:9px; font-size:13px; font-weight:600; color:var(--muted);
  border:1px solid transparent; transition:.15s;
}
.nav a:hover{ color:var(--txt); background:var(--card); }
.nav a.active{ color:#fff; background:var(--accent); border-color:transparent; }
/* Lien vers LeagueHub (projet frère : les 5 grands championnats). Même gabarit
   que les autres entrées, teinté du bleu de LeagueHub pour signaler qu'il sort
   du site ; LeagueHub renvoie vers ce tracker de la même façon. */
.nav a.nav-ext{
  display:inline-flex; align-items:center; gap:6px; margin-left:4px;
  color:var(--txt); background:rgba(47,159,216,.08); border-color:rgba(47,159,216,.32);
}
.nav a.nav-ext img{ width:16px; height:16px; flex:none; }
.nav a.nav-ext .nav-ext-arrow{ font-size:.85em; color:#8fd0f2; transition:transform .15s ease; }
.nav a.nav-ext:hover{ color:#fff; background:rgba(47,159,216,.16); border-color:rgba(47,159,216,.55); }
.nav a.nav-ext:hover .nav-ext-arrow{ transform:translate(2px,-2px); }
@media (prefers-reduced-motion:reduce){ .nav a.nav-ext .nav-ext-arrow{ transition:none; } }

.header-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.lang-switch{ display:flex; gap:4px; }
.lang-btn{
  background:var(--card); color:var(--muted); border:1px solid var(--line);
  border-radius:8px; padding:6px 11px; font-size:12px; font-weight:800; cursor:pointer; transition:.15s;
}
.lang-btn:hover{ color:var(--txt); }
.lang-btn.active{ background:var(--accent); color:#fff; border-color:transparent; }

/* Interrupteur FR / EN — toggle prestige : or biseauté 3 tons, reflet vitré,
   halo couleur club, balayage de brillance au survol */
/* Bascule de langue — flat : aplats unis, aucun dégradé, aucune ombre.
   Le curseur reste (c'est une affordance, pas un ornement) mais glisse
   linéairement, sans rebond ni reflet. */
.lang-toggle{ position:relative; display:inline-flex; align-items:center; padding:3px; border-radius:999px;
  background:rgba(7,14,35,.6);
  border:1px solid rgba(var(--gold-rgb,245,181,10),.38); }
.lang-toggle .lt-thumb{ position:absolute; z-index:0; top:3px; left:3px; width:40px; height:calc(100% - 6px); border-radius:999px;
  background:#f5b50a;
  transition:transform .2s ease; }
.lang-toggle[data-active="en"] .lt-thumb{ transform:translateX(40px); }
.lang-toggle .lt-opt{ position:relative; z-index:1; width:40px; text-align:center; padding:6px 0; border:none; background:none; cursor:pointer;
  font-family:inherit; font-weight:900; font-size:12px; letter-spacing:.09em; color:var(--muted); transition:color .2s ease; }
.lang-toggle .lt-opt.active{ color:#1a1300; }
.lang-toggle .lt-opt:not(.active):hover{ color:var(--txt); }
.lang-toggle .lt-opt:focus-visible{ outline:2px solid #f5b50a; outline-offset:2px; border-radius:999px; }
@media (prefers-reduced-motion:reduce){
  .lang-toggle .lt-thumb{ transition:none; }
}

.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.live{ background:var(--live); box-shadow:0 0 0 0 rgba(255,59,70,.6); animation:ping 1.4s infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(255,59,70,.55)} 70%{box-shadow:0 0 0 8px rgba(255,59,70,0)} 100%{box-shadow:0 0 0 0 rgba(255,59,70,0)} }

/* ---- Layout ------------------------------------------------------------- */
.container{ max-width:1180px; margin:0 auto; padding:22px; }
.page-title{ font-size:24px; font-weight:800; margin:6px 0 2px; }
.page-sub{ color:var(--muted); font-size:13.5px; margin:0 0 18px; }
.section{ margin:26px 0; }
.section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.section-head h2{ font-size:18px; margin:0; font-weight:800; }
.section-head .sub{ color:var(--muted); font-size:12.5px; }

.card{
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
}
.pad{ padding:16px; }

.badge{
  font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.badge.live{ background:var(--live); color:#fff; }
.badge.upcoming{ background:var(--upcoming); color:#1a1300; }
.badge.finished{ background:var(--finished); color:#04270f; }
.badge.ghost{ background:var(--card); color:var(--muted); border:1px solid var(--line); }

.btn{
  background:var(--card); color:var(--txt); border:1px solid var(--line-2);
  border-radius:10px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; transition:.15s;
}
.btn:hover{ border-color:var(--accent); }
.btn.active{ background:var(--accent); border-color:transparent; color:#fff; }

.crest{ width:24px; height:24px; object-fit:contain; vertical-align:middle; }
.muted{ color:var(--muted); }
.notice{
  display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:10px;
  background:rgba(var(--gold-rgb,245,181,10),.10); border:1px solid rgba(var(--gold-rgb,245,181,10),.3); color:#ffd97a; font-size:12.5px;
}
.empty-state{ padding:30px; text-align:center; color:var(--muted); }
.skeleton{ color:var(--muted-2); }

footer.site-footer{
  border-top:1px solid var(--line); margin-top:40px; padding:18px 22px;
  color:var(--muted); font-size:12px; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between;
}

/* ---- Match rows / scores (réutilisable) -------------------------------- */
.match{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:var(--card); border:1px solid var(--line);
}
.match + .match{ margin-top:8px; }
.match .side{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.match .side.away{ flex-direction:row-reverse; text-align:right; }
.match .side .nm{ font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match .score{ font-weight:900; font-size:18px; font-variant-numeric:tabular-nums; min-width:54px; text-align:center; }
.match .score .pen{ display:block; font-size:10px; color:var(--accent); font-weight:700; }
.match .when{ font-size:11px; color:var(--muted); min-width:54px; text-align:center; }

/* ===================== Responsive (mobile / tablette) ===================== */
/* En dessous de 860px : le header passe sur 2 rangées —
   marque + langue sur la 1re, navigation pleine largeur en dessous. */
@media (max-width:860px){
  /* header non collant : la nav sur 2-3 rangées ne mange pas l'écran au scroll */
  .site-header{ position:static; flex-wrap:wrap; gap:10px 12px; padding:10px 14px; }
  .brand{ flex:1 1 auto; min-width:0; }
  .brand .t1{ font-size:14px; }
  .header-right{ margin-left:auto; }
  .nav{ order:3; flex-basis:100%; width:100%; margin-left:0; gap:6px 8px; }
  .nav a{ padding:7px 11px; }
  /* le menu des saisons s'ouvre vers la droite et reste dans l'écran */
  .season-dd-menu{ left:0; right:auto; max-width:calc(100vw - 32px); }
}
@media (max-width:720px){
  .nav a{ padding:6px 10px; font-size:12px; }
  .brand .t2{ display:none; }
  .brand .star{ width:32px; height:32px; }
  .container{ padding:16px; }
}
@media (max-width:560px){
  .container{ padding:13px 13px 26px; }
  .pad{ padding:13px; }
  .page-title{ font-size:21px; }
  .page-sub{ font-size:12.5px; }
  .section{ margin:20px 0; }
  .section-head h2{ font-size:16px; }
  .season-dd-menu{ left:0; right:auto; max-width:calc(100vw - 32px); }
  .souvenir-banner{ font-size:12px; }
  footer.site-footer{ padding:16px; gap:10px; font-size:11.5px; }
}

/* ===== ReactBits / Uiverse — interactifs partagés (thème LDC) ===== */
#starfield{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#cl-ball{ position:fixed; top:-20%; right:-14%; width:min(92vw,960px); height:min(92vw,960px); z-index:0; pointer-events:none;
  background:url("starball.svg?v=2") center/contain no-repeat; opacity:.34; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, rgba(0,0,0,.35) 62%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 30%, rgba(0,0,0,.35) 62%, transparent 100%); }
@media (max-width:700px){ #cl-ball{ width:150vw; height:150vw; right:-40%; top:-8%; opacity:.26; } }
.container, .site-footer{ position:relative; z-index:1; }

/* Flat design : bordure nette, plus d'anneau animé */
.star-border{ position:relative; }
.star-border::after{ display:none; }

.shiny{ color:var(--upcoming); -webkit-text-fill-color:var(--upcoming); }

.souvenir-banner{ display:none; align-items:center; gap:14px; padding:10px 16px; border-radius:12px; margin-bottom:16px; flex-wrap:wrap;
  background:rgba(var(--gold-rgb,245,181,10),.07); border:1px solid rgba(var(--gold-rgb,245,181,10),.35); font-size:13px; font-weight:700; }
.souvenir-banner.show{ display:flex; }
.souvenir-banner .sb-label{ color:var(--upcoming); text-transform:uppercase; letter-spacing:.04em; }
.souvenir-banner a{ color:#fff; background:var(--card); border:1px solid var(--line); padding:5px 12px; border-radius:18px; font-size:12px; }
.season-chip{ display:inline-block; margin-left:10px; padding:3px 11px; border-radius:18px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--upcoming); background:rgba(var(--gold-rgb,245,181,10),.1); border:1px solid rgba(var(--gold-rgb,245,181,10),.3); vertical-align:middle; }
.nav a.souvenir-link{ color:var(--upcoming); }
.nav a.souvenir-link.active, .nav a.souvenir-link:hover{ color:#fff; background:rgba(var(--gold-rgb,245,181,10),.18); }

/* Menu déroulant des saisons */
.season-dd{ position:relative; display:inline-block; }
.season-dd-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:9px; font-size:13px; font-weight:700; color:var(--upcoming); background:transparent; border:1px solid transparent; cursor:pointer; font-family:inherit; }
.season-dd-btn:hover{ background:rgba(var(--gold-rgb,245,181,10),.12); }
.season-dd.open .season-dd-btn{ background:rgba(var(--gold-rgb,245,181,10),.18); color:#fff; }
.season-dd .sdd-caret{ font-size:10px; opacity:.8; transition:transform .15s; }
.season-dd.open .sdd-caret{ transform:rotate(180deg); }
.season-dd-menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:200px; max-height:min(62vh,360px); overflow-y:auto; background:var(--card-2); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; z-index:80; }
.season-dd.open .season-dd-menu{ display:block; }
.season-dd-menu a{ display:block; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.season-dd-menu a:hover{ background:var(--card); color:#fff; }
.season-dd-menu a.active{ color:var(--upcoming); background:rgba(var(--gold-rgb,245,181,10),.1); }