/* ETAPE 4 / LOT 8 — T128Q : la home « Fan ».
   Complete les classes v4* existantes, ne les redefinit JAMAIS.

   REGLE DE CE FICHIER : PAS UNE SEULE COULEUR EN DUR.
   Le theme est PAR CLUB (--club-primary, --club-text, --kf-accent… voir
   assets/js/core/theme-colors.js). La version precedente de cet ecran ecrivait
   #12703a et #0b3d6e en dur : ca jurait chez URW, et ca aurait casse
   l affichage de tout autre club. Chaque valeur ci-dessous est donc une
   variable du theme, avec un repli neutre pris sur les classes v4*.

   Prefixe v128Q : il n apparait nulle part ailleurs dans le depot. Le §8 de
   PASSATION_T128 rappelle ce qu ont coute « quatre blocs CSS concurrents pour
   un meme libelle ». */

.v128QFanCard{ display:flex; flex-direction:column; gap:12px; }

.v128QLive{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ------------------------------------------------------------- tableau */

/* Le tableau se pose SUR une carte deja sombre : un aplat --club-primary s y
   fondait. Une surface translucide le detache sans introduire de couleur. */
.v128QBoard{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:var(--club-text, #fff);
  border-radius:18px; padding:16px 18px;
}
.v128QSide{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:0; }
.v128QSide span{
  font-size:13px; font-weight:700; opacity:.88; text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v128QSide strong{ font-size:40px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
.v128QSep{ flex:0 0 auto; opacity:.55; font-size:20px; }

.v128QNote{
  margin:0; font-size:13px; line-height:1.35;
  color:var(--club-muted, #6b7684);
}
.v128QEmpty{ margin:0; font-size:15px; color:var(--club-text, #12243a); }

/* --------------------------------------------------------- les gestes */

.v128QMain{ display:grid; grid-template-columns:1fr; gap:10px; }

.v128QGoal, .v128QOpp{
  border:0; border-radius:14px; cursor:pointer; width:100%;
  font-weight:800; letter-spacing:.01em;
}
/* Le geste du match : le plus grand, le plus lisible. Il prend l accent du
   club, pas un vert invente. */
.v128QGoal{
  min-height:70px; font-size:20px;
  background:var(--kf-accent, var(--club-secondary, #0b3d6e));
  color:var(--kf-accent-contrast, var(--club-text-on-secondary, #fff));
}
/* Le but adverse existe mais ne doit pas se prendre pour le principal :
   plus bas, plus sobre, jamais sous le pouce par accident. */
.v128QOpp{
  min-height:52px; font-size:16px; font-weight:700;
  background:var(--club-muted, #4a5568);
  color:var(--club-text-on-primary, #fff);
}

/* ------------------------------------------------- buts sans buteur */

.v128QUnassigned{
  display:flex; flex-direction:column; gap:4px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:14px 16px;
}
.v128QUnassigned strong{ font-size:16px; color:var(--club-text, #fff); }
.v128QUnassigned p{ margin:0; font-size:13px; line-height:1.35; color:var(--club-muted, #b8c6d9); }

.v128QLink{
  align-self:flex-start; border:0; background:none; cursor:pointer;
  padding:12px 0 0; min-height:44px;
  color:var(--club-text, #fff);
  font-weight:700; font-size:15px; text-decoration:underline;
}

/* ------------------------------------------------------- les joueurs */

.v128QGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; }

/* MEME SURFACE QUE LES TUILES v4Quick DES AUTRES HOMES, et c est une
   correction, pas un gout. Premiere version : fond blanc (--club-surface)
   avec le texte var(--club-text). Or sur une home, le fond est SOMBRE et
   --club-text est donc CLAIR : les noms de joueurs sortaient en blanc sur
   blanc, illisibles. Vu sur capture, invisible pour les tests.
   Une surface translucide se marie avec le jeton de texte du theme, quel que
   soit le club et quel que soit le fond. */
.v128QChip{
  display:flex; align-items:stretch; gap:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background:rgba(255,255,255,.10);
}
/* border-radius:0 et box-shadow:none NE SONT PAS DECORATIFS. style.css ligne
   7064 habille TOUT <button> du depot : border-radius:999px, padding:10px 16px
   et une ombre portee. Sans neutralisation, les elements internes de la tuile
   redeviennent des pastilles ovales flottantes — exactement le « vieux
   template a pastilles » que la capture a fait remonter. Vu a l ecran,
   invisible pour un test qui ne lit que le CSS de ce fichier. */
.v128QChipName{
  flex:1; min-width:0; border:0; background:none; cursor:pointer; text-align:left;
  /* 54 px : le format des tuiles v4Quick, pour rester dans le rythme visuel
     des autres homes. */
  min-height:54px; padding:0 10px;
  border-radius:0; box-shadow:none;
  font-weight:600; font-size:15px; color:var(--club-text, #12243a);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v128QPick{
  min-height:54px; padding:0 12px; cursor:pointer; border-radius:12px;
  border:1px solid var(--club-primary, #0b3d6e);
  background:var(--club-primary, #0b3d6e);
  color:var(--club-text-on-primary, #fff);
  font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.v128QMini{
  flex:0 0 auto; border:0; cursor:pointer;
  min-width:42px; min-height:54px; padding:0;
  border-radius:0; box-shadow:none;
  font-weight:800; font-size:14px;
}
/* Jaune et rouge sont des couleurs de REGLE DU JEU, pas des couleurs de
   marque : elles ne suivent pas le theme du club, et c est volontaire —
   un carton jaune vert serait illisible sur un terrain. */
.v128QYellow{ background:#e3b505; color:#2b2200; }
.v128QRed{ background:#b3261e; color:#fff; }

/* ---------------------------------------------------------- le fil */

.v128QFeed{ list-style:none; margin:0; padding:0; }
.v128QFeed li{
  display:flex; align-items:center; gap:10px;
  padding:10px 0 10px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.v128QFeed li span{ flex:1; min-width:0; font-size:15px; color:var(--club-text, #12243a); }
/* Un geste encore sur l appareil se distingue a l oeil : il n a pas le meme
   statut qu un fait confirme, et l ecran ne doit pas laisser croire l inverse. */
.v128QQueued span{ opacity:.75; font-style:italic; }
.v128QFeed em{
  flex:0 0 auto; font-style:normal; font-size:12px; font-weight:700;
  border-radius:999px; padding:3px 9px;
  background:var(--kf-accent-soft, rgba(227,181,5,.18));
  color:var(--club-text, #6b4300);
}
.v128QDrop{
  background:none; color:var(--club-muted, #7a8699);
  font-size:20px; min-width:44px; min-height:44px; border-radius:10px;
}