/* ==========================================================================
   RÉGIE — feuille de style
   --------------------------------------------------------------------------
   Direction : une console de diffusion, pas un tableau de bord générique.
   L'argent arrive seconde par seconde ; l'interface doit se lire d'un coup
   d'œil depuis l'autre bout de la pièce.

   Deux accents seulement, chacun porteur d'un sens :
     rouge  = à l'antenne (jamais utilisé pour autre chose)
     or     = les diamants, la monnaie
   Tout le reste est neutre pour que ces deux-là gardent leur force.
   ========================================================================== */

:root {
  /* — Couleurs ————————————————————————————————— */
  --encre:      #0B0D12;   /* fond : un noir bleuté, jamais un noir pur */
  --panneau:    #141822;   /* surfaces posées sur le fond */
  --panneau-2:  #1B2030;   /* survol, éléments actifs */
  --trait:      #242B3B;   /* filets et séparateurs */
  --texte:      #E7EAF2;
  --sourd:      #7A8398;   /* libellés, métadonnées */
  --antenne:    #FF3D51;   /* à l'antenne — réservé */
  --diamant:    #F4B740;   /* la monnaie */
  --calme:      #5C6478;

  /* — Typographie ——————————————————————————————— */
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --corps:   "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --chiffre: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* — Rythme ————————————————————————————————— */
  --u: 4px;
  --rail: 84px;
  --rayon: 10px;
  --rayon-s: 6px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Les chiffres s'alignent en colonne : indispensable pour comparer d'un
   regard des montants les uns sous les autres. */
.chiffre, .kpi-valeur, .carte-total, .stat-valeur {
  font-family: var(--chiffre);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--diamant);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}

/* ==========================================================================
   Ossature : rail de navigation + contenu
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  background: var(--panneau);
  border-right: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 4) 0;
  gap: calc(var(--u) * 1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail-marque {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--texte);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: calc(var(--u) * 5);
  opacity: .9;
}

.rail-lien {
  width: calc(var(--rail) - var(--u) * 5);
  padding: calc(var(--u) * 2.5) 0;
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 1);
  color: var(--sourd);
  font-size: 10.5px;
  letter-spacing: .03em;
  transition: background .15s, color .15s;
}
.rail-lien svg { width: 20px; height: 20px; stroke-width: 1.6; }
.rail-lien:hover { background: var(--panneau-2); color: var(--texte); }
.rail-lien.actif { background: var(--panneau-2); color: var(--texte); }
.rail-lien.actif svg { color: var(--diamant); }

.rail-bas { margin-top: auto; }

.contenu {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 7) calc(var(--u) * 8) calc(var(--u) * 12);
}

/* ==========================================================================
   En-tête de page
   ========================================================================== */

.entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 6);
}

.titre {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1;
}

.horodatage {
  font-family: var(--chiffre);
  font-size: 12px;
  color: var(--sourd);
  letter-spacing: .04em;
}

/* ==========================================================================
   Filtres de région
   ========================================================================== */

.filtres {
  display: flex;
  gap: calc(var(--u) * 1.5);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 6);
}

.filtre {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: transparent;
  color: var(--sourd);
  font-size: 13px;
  font-family: var(--corps);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.filtre:hover { color: var(--texte); border-color: var(--sourd); }
.filtre.actif {
  background: var(--texte);
  border-color: var(--texte);
  color: var(--encre);
  font-weight: 500;
}

/* ==========================================================================
   Bandeau d'indicateurs
   ========================================================================== */

.bandeau {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: calc(var(--u) * 8);
}

.kpi {
  background: var(--panneau);
  padding: calc(var(--u) * 4) calc(var(--u) * 4);
}

.kpi-valeur {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
}

.kpi-libelle {
  font-size: 11px;
  color: var(--sourd);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: calc(var(--u) * 1.5);
}

.kpi--antenne .kpi-valeur { color: var(--antenne); }
.kpi--diamant .kpi-valeur { color: var(--diamant); }

/* Le point « à l'antenne » : le seul élément animé de la page. */
.point-antenne {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--antenne);
  flex: 0 0 9px;
  animation: pulsation 2s ease-in-out infinite;
}
@keyframes pulsation {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 61, 81, .45); }
  50%      { opacity: .75; box-shadow: 0 0 0 6px rgba(255, 61, 81, 0); }
}

/* ==========================================================================
   Titres de section
   ========================================================================== */

.section-titre {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sourd);
  margin: 0 0 calc(var(--u) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.section-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trait);
}

/* ==========================================================================
   Cartes de live
   ========================================================================== */

.grille-lives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: calc(var(--u) * 4);
}

.carte {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  transition: border-color .2s;
}
.carte:hover { border-color: var(--sourd); }

.carte-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
}

.carte-identite { min-width: 0; }

.carte-nom {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-meta {
  font-size: 12px;
  color: var(--sourd);
  margin-top: calc(var(--u) * 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-total {
  font-size: 19px;
  font-weight: 500;
  color: var(--diamant);
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* — La bande d'activité : signature de l'interface ————————————
   Les 40 dernières minutes, une barre par minute. On lit d'un coup si
   l'argent arrive maintenant ou s'il est arrivé il y a une demi-heure. */

.bande {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  padding: 0;
}

.bande-barre {
  flex: 1;
  min-width: 2px;
  background: var(--trait);
  border-radius: 1px;
  transition: height .4s ease;
}
.bande-barre[data-actif="1"] { background: var(--diamant); }

.bande-vide {
  height: 34px;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--calme);
  letter-spacing: .04em;
}

/* — Pied de carte ————————————————————————————— */

.carte-pied {
  border-top: 1px solid var(--trait);
  padding-top: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

.stats {
  display: flex;
  gap: calc(var(--u) * 5);
  flex-wrap: wrap;
}

.stat-valeur {
  font-size: 14px;
  font-weight: 500;
}
.stat-libelle {
  font-size: 10.5px;
  color: var(--sourd);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 1px;
}

.momentum {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
}
.momentum--monte   { color: var(--diamant); }
.momentum--descend { color: var(--sourd); }
.momentum--stable  { color: var(--texte); }
.momentum--calme   { color: var(--calme); }

.ligne-profil {
  font-size: 12px;
  color: var(--sourd);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  flex-wrap: wrap;
}
.ligne-profil .chiffre { color: var(--texte); }

.badge-statut {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--trait);
  color: var(--sourd);
  flex: 0 0 auto;
}
.badge-statut--signe   { color: var(--diamant); border-color: rgba(244,183,64,.35); }
.badge-statut--prospect{ color: #8FD3F4; border-color: rgba(143,211,244,.3); }

.carte-liens {
  display: flex;
  gap: calc(var(--u) * 4);
  font-size: 12px;
}
.carte-liens a { color: var(--sourd); transition: color .15s; }
.carte-liens a:hover { color: var(--texte); }

/* ==========================================================================
   États vides — une page vide est une invitation, pas une erreur
   ========================================================================== */

.vide {
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 12) calc(var(--u) * 6);
  text-align: center;
  color: var(--sourd);
}
.vide-titre {
  font-family: var(--display);
  font-size: 17px;
  color: var(--texte);
  margin-bottom: calc(var(--u) * 2);
}

/* ==========================================================================
   Graphique
   ========================================================================== */

.panneau-graphique {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 5);
  margin-top: calc(var(--u) * 8);
}
.panneau-graphique canvas { max-height: 260px; }

/* ==========================================================================
   Connexion
   ========================================================================== */

.page-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 6);
}

.boite-connexion {
  width: 100%;
  max-width: 370px;
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 9) calc(var(--u) * 7);
}

.marque-connexion {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 calc(var(--u) * 1);
}
.sous-marque {
  color: var(--sourd);
  font-size: 12.5px;
  margin-bottom: calc(var(--u) * 8);
}

.champ { margin-bottom: calc(var(--u) * 4); }
.champ label {
  display: block;
  font-size: 11px;
  color: var(--sourd);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: calc(var(--u) * 1.5);
}
.champ input {
  width: 100%;
  padding: calc(var(--u) * 3);
  background: var(--encre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 14px;
}
.champ input:focus { border-color: var(--diamant); outline: none; }

.bouton {
  width: 100%;
  padding: calc(var(--u) * 3);
  background: var(--texte);
  color: var(--encre);
  border: none;
  border-radius: var(--rayon-s);
  font-family: var(--corps);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.bouton:hover { opacity: .88; }

.alerte {
  padding: calc(var(--u) * 3);
  border-radius: var(--rayon-s);
  font-size: 13px;
  margin-bottom: calc(var(--u) * 4);
  border: 1px solid rgba(255, 61, 81, .3);
  background: rgba(255, 61, 81, .08);
  color: #FFB3BB;
}

/* ==========================================================================
   Adaptation aux petits écrans
   ========================================================================== */

@media (max-width: 820px) {
  .app { flex-direction: column; }
  .rail {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: calc(var(--u) * 2) 0;
    border-right: none;
    border-bottom: 1px solid var(--trait);
    position: sticky;
  }
  .rail-marque { display: none; }
  .rail-bas { margin-top: 0; }
  .rail-lien { width: auto; padding: calc(var(--u) * 2) calc(var(--u) * 3); }
  .contenu { padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 10); }
  .grille-lives { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Accessibilité : mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   PROFIL — fiche d'un streamer
   Prolonge le système existant. Le rouge reste réservé à « à l'antenne » :
   la fragilité des donateurs se dit à l'or et au texte, jamais à l'alarme.
   ========================================================================== */

.profil-entete { align-items: flex-start; }
.profil-tete { min-width: 0; }
.profil-tete .titre { display: flex; align-items: center; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.profil-tete .titre .badge-statut { font-size: 11px; padding: 3px 10px; }
.profil-handle { margin-top: calc(var(--u) * 2); white-space: normal; }
.profil-tete .ligne-profil { margin-top: calc(var(--u) * 2); }
.profil-absent { color: var(--calme); font-style: italic; }

.lien-antenne {
  flex: 0 0 auto;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  color: var(--sourd);
  font-size: 13px;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.lien-antenne:hover { color: var(--texte); border-color: var(--sourd); }

/* — Concentration des donateurs + table, côte à côte —————————————— */

.bloc-donateurs {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: calc(var(--u) * 4);
  align-items: start;
  margin-bottom: calc(var(--u) * 8);
}

.panneau-concentration {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 5);
}
.conc-titre {
  font-size: 11px; color: var(--sourd); letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: calc(var(--u) * 3);
}

.jauge {
  display: flex;
  height: 12px;
  background: var(--trait);      /* le reste des donateurs */
  border-radius: 999px;
  overflow: hidden;
}
.jauge-seg { height: 100%; transition: width .5s ease; }
.jauge-seg--un    { background: var(--diamant); }
.jauge-seg--trois { background: rgba(244, 183, 64, .45); }

.jauge-legende {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 3);
  font-size: 12px; color: var(--sourd);
}
.jauge-legende .chiffre { color: var(--texte); }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.pastille--un    { background: var(--diamant); }
.pastille--trois { background: rgba(244, 183, 64, .45); }
.pastille--reste { background: var(--trait); }

.risque-note {
  margin: calc(var(--u) * 4) 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--trait);
}
.risque--sain   { color: var(--sourd); }
.risque--modere { color: var(--texte); }
.risque--eleve  { color: var(--diamant); }

/* — Tableaux (donateurs, cadeaux, lives) ————————————————————— */

.panneau-tableau {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: calc(var(--u) * 8);
}

.tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tableau thead th {
  text-align: left;
  font-family: var(--corps);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sourd);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
.tableau tbody td {
  padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
  border-bottom: 1px solid var(--trait);
}
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr { transition: background .12s; }
.tableau tbody tr:hover { background: var(--panneau-2); }

.tableau .num { text-align: right; white-space: nowrap; }
.tableau .diamant-num { color: var(--diamant); }

.cellule-nom { color: var(--texte); }
.cellule-nom .tronque {
  display: inline-block; max-width: 220px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pastille-suit {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--diamant); border: 1px solid rgba(244,183,64,.35);
  border-radius: 999px; padding: 1px 7px; margin-left: calc(var(--u) * 2);
}

.tableau-lives .ligne-en-cours td { background: rgba(255, 61, 81, .05); }
.tableau-lives .ligne-en-cours .point-antenne { margin-right: calc(var(--u) * 2); vertical-align: middle; }

@media (max-width: 820px) {
  .bloc-donateurs { grid-template-columns: 1fr; }
  .cellule-nom .tronque { max-width: 140px; }
}

.lien-fiche { color: inherit; }
.lien-fiche:hover { text-decoration: underline; text-decoration-color: var(--sourd); text-underline-offset: 3px; }

/* ==========================================================================
   RADAR — profil de performance (incrément 2, volet scores)
   Radar volontairement monochrome : la discipline à deux accents tient, seule
   la Monétisation porte l'or (c'est la dimension « argent ») ; un score faible
   se lit à la longueur et à l'opacité de sa barre, jamais à une alarme rouge.
   ========================================================================== */

.bloc-radar {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: calc(var(--u) * 6);
  align-items: center;
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 8);
}

.panneau-radar {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 6);      /* marge pour les libellés qui débordent */
}
.radar { width: 100%; max-width: 300px; height: auto; overflow: visible; }

.radar-grille { fill: none; stroke: var(--trait); stroke-width: 1; }
.radar-axe    { stroke: var(--trait); stroke-width: 1; }
.radar-forme  {
  fill: rgba(231, 234, 242, .12);     /* --texte très translucide */
  stroke: var(--texte); stroke-width: 2; stroke-linejoin: round;
}
.radar-etq {
  fill: var(--sourd); font-family: var(--corps); font-size: 12px;
  letter-spacing: .01em;
}
.radar-etq--or { fill: var(--diamant); }

.radar-global { text-align: center; line-height: 1.1; }
.radar-global-val {
  display: block; font-size: 40px; font-weight: 500; color: var(--texte);
  letter-spacing: -.02em;
}
.radar-global-lib {
  font-size: 11px; color: var(--sourd); letter-spacing: .06em;
  text-transform: uppercase;
}

.panneau-dims { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.dim { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.dim-tete { display: flex; justify-content: space-between; align-items: baseline; }
.dim-nom { font-size: 13px; color: var(--texte); }
.dim-val { font-size: 13px; color: var(--sourd); }
.dim-piste {
  height: 7px; background: var(--trait); border-radius: 999px; overflow: hidden;
}
.dim-jauge {
  height: 100%; background: var(--sourd); border-radius: 999px;
  transition: width .5s ease;
}
.dim-jauge--or { background: var(--diamant); }
.dim-note {
  margin: calc(var(--u) * 3) 0 0; font-size: 12px; color: var(--sourd);
  line-height: 1.45;
}

@media (max-width: 820px) {
  .bloc-radar { grid-template-columns: 1fr; gap: calc(var(--u) * 5); }
  .panneau-radar { padding: 0 calc(var(--u) * 8); }
}

/* ==========================================================================
   CONSEILS — pistes à tester (incrément 2, volet conseils)
   Cartes sobres, sans numérotation (ce ne sont pas des étapes) ni alarme :
   du texte, un liseré neutre, rien qui crie.
   ========================================================================== */

.bloc-conseils {
  display: flex; flex-direction: column; gap: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 8);
}

.conseil {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--sourd);
  border-radius: var(--rayon-s);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
}
.conseil p {
  margin: 0; color: var(--texte); font-size: 14px; line-height: 1.55;
}

.conseils-note {
  margin: calc(var(--u) * 1) 0 0;
  font-size: 12px; color: var(--sourd); line-height: 1.45;
}

/* ==========================================================================
   PRONOSTIC — ML du live en cours (incrément 2, volet ML)
   Seul bloc où le rouge est légitime : le streamer est à l'antenne. Le rouge
   se limite au marqueur « en direct » ; les valeurs prédites restent neutres
   (ce sont des indices, pas des diamants ni une alarme).
   ========================================================================== */

.pronostic {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--antenne);   /* à l'antenne : rouge autorisé ici */
  border-radius: var(--rayon);
  padding: calc(var(--u) * 5);
  margin-bottom: calc(var(--u) * 8);
}

.pronostic-tete {
  display: flex; align-items: center; gap: calc(var(--u) * 2.5);
  margin-bottom: calc(var(--u) * 4);
}
.pronostic-titre {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte);
}

.pronostic-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: calc(var(--u) * 5);
}
.prono { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.prono-val {
  font-size: 30px; font-weight: 500; color: var(--texte); letter-spacing: -.02em;
  line-height: 1;
}
.prono-lib {
  font-size: 11px; color: var(--sourd); letter-spacing: .05em;
  text-transform: uppercase;
}
.prono-fourchette { font-size: 12px; color: var(--sourd); margin-top: calc(var(--u) * 1); }

.pronostic-note {
  margin: calc(var(--u) * 4) 0 0; padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--trait);
  font-size: 12px; color: var(--sourd); line-height: 1.45;
}

/* ==========================================================================
   ANNUAIRE — page Streamers
   ========================================================================== */

.champ-recherche {
  width: 100%; max-width: 420px;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 5);
  background: var(--panneau); border: 1px solid var(--trait);
  border-radius: var(--rayon-s); color: var(--texte);
  font-family: var(--corps); font-size: 14px;
}
.champ-recherche::placeholder { color: var(--sourd); }
.champ-recherche:focus { outline: none; border-color: var(--diamant); }

.tableau-annuaire .rang { color: var(--sourd); width: 3ch; }
.tableau-annuaire .cellule-nom { line-height: 1.3; }
.tableau-annuaire .cellule-nom .point-antenne { vertical-align: middle; margin-right: calc(var(--u) * 1.5); }
.sous-nom { font-size: 11.5px; color: var(--sourd); margin-top: 2px; }

.tableau th.triable { cursor: pointer; user-select: none; transition: color .12s; }
.tableau th.triable:hover { color: var(--texte); }

/* Avatar du créateur dans les cartes de live */
.carte-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
  margin-right: 10px;
  vertical-align: middle;
  border: 2px solid rgba(244, 183, 64, 0.5);
}