/* ================================================================
   VAYLO — feuille de style
   Direction visuelle « Sport / Énergie » : fond nuit bleutée, accents
   vert EV → cyan, biseaux, halos, micro-libellés capitales espacées,
   chiffres en chasse fixe tabulaire.

   Le punch (dégradés, badges, jauges) est concentré dans les en-têtes
   et les cartes ; les tableaux de cotes restent sombres, calmes et
   parfaitement alignés en colonne.

   Aucune ressource externe (pas de @import, pas de police distante).

   SOMMAIRE
     0.  Variables
     1.  Base / réinitialisation
     2.  Gabarit (.wrap) & barre du haut
     3.  Bascule de vue (Value / Comparateur)
     4.  Bandeau de statistiques
     5.  Filtres (pastilles de sport, recherche)
     6.  Barres de navigation du comparateur (course / épreuve / marché)
     7.  Carte de pari — nouvelle structure
     8.  Carte de pari — structure héritée (compatibilité)
     9.  Tiroir bookmakers — nouveau (.drawer-h / .btable)
     10. Tiroir bookmakers — hérité (.vcb-*)
     11. Comparateur : en-tête, légende, tableaux
     12. Face à Face (duels)
     13. États vides, infobulles, divers
     14. Modales (introduction) & bouton d'aide
     15. Mur de paiement (paywall)
     16. Menu de compte
     17. Panneau d'administration
     18. Réactif (360px → 1400px)
   ================================================================ */


/* ================================================================
   0. VARIABLES
   Les anciens noms (--panel2, --border, --gold…) sont CONSERVÉS en
   alias : le JS et d'anciennes règles y font référence en ligne.
   ================================================================ */
:root {
  /* — fonds & surfaces — */
  --bg:        #05080f;
  --bg-2:      #0a0f1c;
  --bg2:       #0a0f1c;              /* alias hérité */
  --panel:     #0f1626;
  --panel-2:   #131c2f;
  --panel2:    #131c2f;              /* alias hérité */
  --panel-3:   #0b1220;
  --panel-grad: #111a2b;                      /* aplati : plus de dégradé */

  /* — filets — */
  --line:      #1d2942;
  --line-soft: #162034;
  --border:    #162034;              /* alias hérité */
  --border2:   #24314f;              /* alias hérité */

  /* — textes — */
  --txt:       #eef3fb;
  --text:      #eef3fb;              /* alias hérité */
  --txt-2:     #aebbd4;
  --muted:     #8d9bb8;
  --dim:       #7c8bab;

  /* — accents — */
  --ev:        #00e37a;
  --green:     #00e37a;              /* alias hérité */
  --ev-deep:   #00a85a;
  --green-dim: #35d492;
  --green-bg:  rgba(0,227,122,.12);
  --green-bd:  rgba(0,227,122,.36);
  --cyan:      #22c8ff;
  --hot:       #ff6a2b;
  --pink:      #ff3d7f;
  --gold:      #ffc247;
  --gold-bg:   rgba(255,194,71,.13);
  --orange:    #ff9a3d;
  --red:       #ff5f6d;
  --violet:    #8b8cff;

  /* — camps des duels (Face à Face) : identité de camp, JAMAIS le
       repère « meilleure cote » (voir --best-*) — */
  --A: #22c8ff;
  --B: #ff7a45;
  --A-fill: rgba(34,200,255,.11);
  --B-fill: rgba(255,122,69,.11);

  /* — REPÈRE UNIVOQUE « MEILLEURE COTE » —
       Un seul et même cadre vert EV partout : Face à Face, tiroir
       bookmakers et tableau Vainqueur. Ne jamais le décliner en
       cyan/orange (ces couleurs identifient le camp, pas le prix). */
  --best-bd:   rgba(0,227,122,.62);
  --best-fill: rgba(0,227,122,.14);
  --best-txt:  #b8ffd9;

  /* — couleurs de sport — */
  --mma:   #ff4d3d;
  --boxe:  #ffa41a;
  --velo:  #00e37a;
  --moto:  #8b5cf6;
  --f1:    #ff2d55;

  /* — couleurs de bookmaker — */
  --pmu:      #1a4b8c;
  --unibet:   #ffd200;
  --winamax:  #e2001a;
  --betclic:  #0a8f4d;
  --yonibet:  #7c3aed;
  --pinnacle: #8892a4;

  /* — dégradés & ombres — */
  --grad-acc:  #00e37a;                       /* aplati : vert EV uni */
  --grad-soft: rgba(0,227,122,.13);           /* aplati : teinte verte unie */
  --grad-hot:  #ff8a3d;                       /* aplati : orange uni */
  --glow-green: 0 0 30px rgba(0,227,122,.18);
  --shadow-card: 0 18px 44px -30px #000, 0 4px 16px -10px rgba(0,0,0,.7);
  --shadow-soft: 0 8px 24px -16px rgba(0,0,0,.8);

  /* — géométrie & polices — */
  --r:     14px;
  --r-lg:  18px;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;
}


/* ================================================================
   1. BASE / RÉINITIALISATION
   ================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;                /* la PAGE ne défile jamais latéralement */
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Chiffres : chasse fixe tabulaire → alignement parfait en colonne. */
.num,
.vc-edge, .vc-badge, .vc-odds, .vc-bigodd, .vcb-odd, .vc-m .v,
.cc, .cc-fair, .cc-gap, .btable td, .dgrid td, .duel-f b,
.splitl, .vsbadge, .vc-vs .vsb, .acct-api-info code, .vc-meta code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* Le masquage doit gagner sur tout display: flex/grid appliqué plus loin
   (sinon les cartes Value restaient visibles par-dessus le comparateur). */
[hidden] { display: none !important; }

/* Animations partagées */
@keyframes rise  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes pop   { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }


/* ================================================================
   2. GABARIT & BARRE DU HAUT
   ================================================================ */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px 72px; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0 16px;
  position: relative;
}
/* Filet dégradé sous l'en-tête : la signature « énergie ». */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ev);
  opacity: .8; border-radius: 2px;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  color: var(--ev);
  background: var(--grad-soft);
  border: 1px solid rgba(0,227,122,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px -12px rgba(0,227,122,.55);
}
.brand .logo svg { width: 25px; height: 25px; filter: drop-shadow(0 1px 5px rgba(0,227,122,.45)); }
.brand h1 {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: #eaf6ff;                             /* aplati : titre en couleur unie */
}
.brand .sub {
  font-size: 12px; color: var(--dim); margin-top: 3px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pastille « en direct » */
.live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #9dffcf; background: rgba(0,227,122,.09);
  border: 1px solid rgba(0,227,122,.28); border-radius: 999px;
  padding: 5px 12px 5px 10px; min-width: 0;
}
.live span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ev);
  position: relative; flex: none;
}
.dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; color: var(--ev);
  animation: pulse 1.9s ease-out infinite;
}


/* ================================================================
   3. BASCULE DE VUE (Value / Comparateur)
   ================================================================ */
.viewtoggle { display: flex; gap: 8px; justify-content: center; margin: 16px 0 10px; }
.vt-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: 12px;
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  color: var(--txt-2); background: var(--panel);
  border: 1px solid var(--line); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.vt-btn:hover { color: #fff; border-color: #2c3c5e; }
.vt-btn.on {
  color: #04120b; border-color: transparent;
  background: var(--grad-acc);
  box-shadow: 0 8px 24px -10px rgba(0,227,122,.75);
}


/* ================================================================
   4. BANDEAU DE STATISTIQUES
   ================================================================ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 20px; }
.stat {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 15px 17px;
  border: 1px solid var(--line);
  background: var(--panel-grad);
  box-shadow: var(--shadow-soft);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Liseré latéral coloré + halo d'angle : le langage « carte sportive ». */
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ev);
}
.stat::after {
  content: ""; position: absolute; right: -46px; top: -62px; width: 170px; height: 170px;
  pointer-events: none;
  background: transparent;
}
.stat:nth-child(2)::before { background: var(--cyan); }
.stat:nth-child(2)::after  { background: transparent; }
.stat:nth-child(3)::before { background: var(--grad-hot); }
.stat:nth-child(3)::after  { background: transparent; }
.stat:hover { border-color: var(--green-bd); box-shadow: var(--shadow-soft), var(--glow-green); transform: translateY(-2px); }

.stat .num { position: relative; font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.stat:first-child .num {
  color: var(--ev);                           /* aplati */
}
.stat .lbl {
  position: relative; margin-top: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}
/* Jauge optionnelle (maquette) */
.stat .meter { position: relative; height: 5px; border-radius: 99px; background: #101a2c; margin-top: 11px; overflow: hidden; }
.stat .meter i { display: block; height: 100%; border-radius: 99px; background: var(--grad-acc); }


/* ================================================================
   5. FILTRES
   ================================================================ */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--txt-2);
  user-select: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.chip:hover { color: #fff; border-color: #2c3c5e; }
.chip.on {
  color: #04120b; border-color: transparent; font-weight: 800;
  background: var(--grad-acc);
  box-shadow: 0 7px 20px -10px rgba(0,227,122,.8);
}
/* Petit losange de couleur de sport (optionnel dans le balisage) */
.chip .sdot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; }
.chip .cnt {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--dim);
  background: #0b1322; border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 7px;
}
.chip.on .cnt { background: rgba(0,0,0,.18); color: #04120b; border-color: transparent; }

#f-search {
  flex: 1; min-width: 210px;
  background: var(--panel); color: var(--txt);
  border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 14px; font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#f-search::placeholder { color: var(--dim); }
#f-search:focus { outline: none; border-color: var(--green-bd); box-shadow: 0 0 0 3px rgba(0,227,122,.10); }

#f-refresh {
  background: var(--panel); color: var(--txt-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 15px; font-size: 15px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
#f-refresh:hover { border-color: var(--green-bd); color: var(--ev); transform: rotate(90deg); }


/* ================================================================
   6. BARRES DE NAVIGATION DU COMPARATEUR
   Niveau 1 : course (.course-bar / .cs-pill)
   Niveau 2 : épreuve (.market-bar / .mk-pill)
   Niveau 3 : marché  (.submarket-bar / .sub-pill)
   ================================================================ */
.course-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.cs-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 12px; cursor: pointer;
  color: var(--txt-2); background: #0b1322; border: 1px solid var(--line);
  transition: color .14s, background .14s, border-color .14s, box-shadow .14s;
}
.cs-pill::before { content: "🚴"; font-size: .86em; }
.cs-pill:hover { color: #fff; border-color: #2c3c5e; }
.cs-pill.on {
  color: #04120b; border-color: transparent;
  background: var(--ev);
  box-shadow: 0 8px 22px -12px rgba(0,227,122,.8);
}

.market-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 12px; }
.mk-pill {
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  color: var(--txt-2); background: #0b1322; border: 1px solid var(--line);
  transition: color .14s, background .14s, border-color .14s;
}
.mk-pill:hover { color: #fff; border-color: #2c3c5e; }
.mk-pill.on {
  color: #04121a; border-color: transparent;
  background: #5fd6ff;
}

.submarket-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: -2px 0 14px; }
.sub-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 650; padding: 6px 8px 8px; cursor: pointer;
  color: var(--dim); background: none; border: 0;
  border-bottom: 2px solid transparent;
  transition: color .14s, border-color .14s;
}
.sub-pill:hover { color: var(--txt); }
.sub-pill.on { color: #ffd08a; border-bottom-color: #ffb347; font-weight: 800; }
.sub-pill.soon { color: var(--dim); }
.sub-pill .soon-tag {
  font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .06em;
  background: rgba(255,255,255,.08); color: var(--dim); padding: 1px 6px; border-radius: 7px;
}
.sub-pill.on .soon-tag { background: rgba(255,179,71,.18); color: #ffd08a; }


/* ================================================================
   7. CARTE DE PARI — NOUVELLE STRUCTURE
   Racine .vc (conserve .vc-cmp et l'état .vc.open).
   La carte reçoit en style en ligne « --sport » (couleur du sport) et
   « --glow » (halo) : ils pilotent la barre latérale et l'auréole.
   ================================================================ */
.list { display: flex; flex-direction: column; gap: 14px; }

.vc {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel-grad);
  box-shadow: var(--shadow-card);
  animation: rise .3s ease both;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  padding: 0;                        /* chaque bloc porte son propre rembourrage */
}
/* Barre latérale = couleur du sport (repli sur le dégradé d'accent). */
.vc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 1;
  background: var(--sport, var(--grad-acc));
}
/* Halo d'angle = --glow. */
.vc::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px;
  pointer-events: none;
  background: transparent;
}
.vc:hover { border-color: #2c4266; transform: translateY(-2px); box-shadow: var(--shadow-card), var(--glow-green); }
.vc.open { border-color: #2a4a6b; box-shadow: 0 0 0 1px rgba(34,200,255,.16), 0 24px 60px -34px #000; }

/* Surebet (variante héritée conservée) */
.vc.sure::before { background: #e8b845; }

/* Carte ciblée par un lien profond Telegram (?bet=id) : flash. */
.vc.focus-bet { animation: betPulse 2.6s ease-out; }
@keyframes betPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,227,122,0); }
  15%  { box-shadow: 0 0 0 3px rgba(0,227,122,.85), 0 0 30px rgba(0,227,122,.45); }
  100% { box-shadow: 0 0 0 0 rgba(0,227,122,0); }
}

/* ── 7.1 En-tête de carte ── */
.vc-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px 11px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
}
/* Badge d'edge, biseauté : l'information reine. */
.vc-edge {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1.1;
  color: #04120b; padding: 5px 20px 6px 13px; border-radius: 10px;
  background: var(--ev);
  box-shadow: 0 8px 24px -12px rgba(0,227,122,.9);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.vc-edge small { font-family: var(--sans); font-size: 11px; font-weight: 800; opacity: .72; letter-spacing: .06em; }

/* Pastille de sport, teintée par --sport. */
.vc-sport {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 11px; border-radius: 999px;
  color: var(--sport, var(--cyan));
  background: rgba(34,200,255,.10);
  background: color-mix(in srgb, var(--sport, #22c8ff) 14%, transparent);
  border: 1px solid rgba(34,200,255,.34);
  border-color: color-mix(in srgb, var(--sport, #22c8ff) 40%, transparent);
}
.vc-books { font-size: 12px; color: var(--dim); border-left: 1px solid var(--line); padding-left: 10px; }
.vc-when {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: #cfe0f5;
  background: #0b1322; border: 1px solid var(--line); border-radius: 9px; padding: 5px 11px;
}
.vc-when .k {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

/* ── 7.2 Corps : contexte + pari à gauche, meilleure cote à droite ── */
.vc-body {
  display: grid; grid-template-columns: 1.35fr .95fr; gap: 16px;
  padding: 16px 16px 15px 20px;
}
.vc-left { min-width: 0; }
.vc-ctx { font-size: 12.5px; color: var(--dim); margin-bottom: 9px; }
.vc-ctx b { color: var(--txt-2); font-weight: 650; }
.vc-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ev); margin-bottom: 4px;
}
/* Nouvelle structure : .vc-pick porte le NOM du pari (gros titre). */
.vc-left > .vc-pick,
.vc-body > .vc-left .vc-pick {
  font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #f6fbff;
}
.vc-vs { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: 13px; color: var(--txt-2); }
.vc-vs .vsb {
  font-size: 10.5px; font-weight: 800; color: var(--dim);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; flex: none;
}

/* Bloc « meilleure cote » */
.vc-best {
  border-radius: var(--r); border: 1px solid var(--best-bd);
  background: rgba(0,227,122,.11);
  padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
}
.vc-best .lb {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8ff0c0;
}
.vc-odds-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vc-odds {
  font-size: 42px; font-weight: 800; line-height: .95; letter-spacing: -.035em; color: #fff;
  text-shadow: 0 0 26px rgba(0,227,122,.32);
}
.vc-bookchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 750; color: #fff;
  background: #0b1322; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px 4px 6px;
}
.vc-bookchip .bd {
  width: 16px; height: 16px; border-radius: 5px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}
.vc-btn {
  display: block; width: 100%; text-align: center;
  padding: 10px 14px; border-radius: 11px; border: 0;
  font-weight: 800; font-size: 14px; letter-spacing: .01em;
  color: #04120b; background: var(--grad-acc);
  box-shadow: 0 10px 26px -14px rgba(0,227,122,.95);
  transition: filter .15s ease, box-shadow .15s ease;
}
.vc-btn:hover { filter: brightness(1.07); box-shadow: 0 12px 30px -14px rgba(0,227,122,1); }

/* ── 7.3 Bandeau de métriques ── */
.vc-metrics {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--line-soft); border-top: 1px solid var(--line-soft);
}
.vc-m { background: var(--panel-3); padding: 9px 12px; min-width: 0; }
.vc-m .k {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-m .v { font-size: 14.5px; font-weight: 700; color: #dfe9f8; margin-top: 2px; }
.vc-m .v.pin { color: var(--pinnacle); }

/* Jauge de confiance : 3 barrettes + libellé. */
.vc-conf { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.vc-conf i { display: block; width: 13px; height: 4px; border-radius: 99px; background: #1c2740; flex: none; }
.vc-conf i.f { background: var(--ev); }
.vc-conf.mid i.f { background: var(--gold); }
.vc-conf.warn i.f { background: var(--orange); }
.vc-conf.bad i.f { background: var(--red); }
.vc-conf b { font-family: var(--sans); font-size: 11px; font-weight: 750; color: var(--txt-2); }

/* ── 7.4 Pied de carte ── */
.vc-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px 10px 20px;
  border-top: 1px solid var(--line-soft);
  background: rgba(255,255,255,.014);
}
.vc-expand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--cyan);
  border: 1px solid rgba(34,200,255,.28); background: rgba(34,200,255,.07);
  border-radius: 9px; padding: 6px 12px;
  transition: background .15s ease, border-color .15s ease;
}
.vc-expand:hover { background: rgba(34,200,255,.14); border-color: rgba(34,200,255,.5); }
.vc-footnote { font-size: 11.5px; color: var(--dim); margin-left: auto; }


/* ================================================================
   8. CARTE DE PARI — STRUCTURE HÉRITÉE (compatibilité)
   Le balisage actuel émet .vc-hd / .vc-ev / .vc-main / .vc-meta /
   .vc-cmp-btn. Comme .vc n'a plus de rembourrage propre, chaque bloc
   hérité porte le sien.
   ================================================================ */
.vc-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px 11px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
}
/* Badge « Value +x% » = équivalent hérité de .vc-edge. */
.vc-badge {
  display: inline-flex; align-items: baseline;
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  color: #04120b; padding: 5px 16px 5px 11px; border-radius: 9px;
  background: var(--ev);
  box-shadow: 0 8px 22px -12px rgba(0,227,122,.9);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.vc.sure .vc-badge { background: #e8b845; color: #2a1e05; }
.vc-hd .vc-books { margin-left: auto; }

.vc-ev { padding: 0 16px 0 20px; font-size: 12.5px; color: var(--dim); letter-spacing: .01em; }

.vc-main {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px 15px 20px;
}
/* Ici .vc-pick est le CONTENEUR de gauche (et non le titre). */
.vc-main > .vc-pick { min-width: 0; flex: 1; }
.vc-go { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ev); }
.vc-bet { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 3px 0 0; color: #f6fbff; }

.vc-pricebox {
  flex: none; min-width: 118px; text-align: center;
  padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--best-bd);
  background: rgba(0,227,122,.11);
}
.vc-bigodd { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: #fff; text-shadow: 0 0 24px rgba(0,227,122,.32); }
.vc-book { font-size: 11.5px; font-weight: 700; color: #8ff0c0; margin-top: 5px; letter-spacing: .04em; }

/* Lien direct vers le pari chez le bookmaker (carte + tiroir). */
.vc-bet-link {
  display: inline-block; margin-top: 8px; padding: 5px 13px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: #04120b; border-radius: 999px;
  background: var(--grad-acc);
  box-shadow: 0 8px 20px -12px rgba(0,227,122,.95);
}
.vc-bet-link:hover { filter: brightness(1.08); }

/* Méta compacte : fair / Pinnacle / marge / liquidité / confiance / Kelly */
.vc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 11px 16px 12px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-3);
  font-size: 12.5px; color: var(--dim);
}
.vc-meta code {
  background: rgba(150,165,190,.10); color: var(--txt);
  padding: 1.5px 7px; border-radius: 6px; font-size: 12.5px;
}
.vc-meta b { color: var(--txt); font-weight: 700; }
.vc .muted, .muted { color: var(--dim); }

/* Libellé de confiance (version texte héritée) */
.conf { font-weight: 700; }
.conf.ok   { color: var(--ev); }
.conf.mid  { color: var(--gold); }
.conf.warn { color: var(--orange); }
.conf.bad  { color: var(--red); }

/* Bouton « comparer les books » : barre de pied pleine largeur. */
.vc-cmp-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 16px;
  border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
  background: rgba(34,200,255,.05); color: var(--cyan);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.vc-cmp-btn:hover { background: rgba(34,200,255,.12); color: #9fe8ff; }
.vc-chev { font-size: 10px; transition: transform .18s ease; }
.vc.open .vc-chev { transform: rotate(180deg); }

/* Surebet : 2 jambes (variante héritée) */
.vc-legs { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px 20px; }
.vc-leg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-3); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 13px;
}
.vc-legname { font-weight: 600; font-size: 14px; }
.vc-legodd { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--gold); text-align: right; }
.vc-legodd small { display: block; font-family: var(--sans); font-size: 10.5px; color: var(--dim); font-weight: 400; }


/* ================================================================
   9. TIROIR BOOKMAKERS — NOUVEAU
   Contenu injecté dans .vc-cmp : .drawer-h + .tscroll > .btable
   ================================================================ */
.vc-cmp {
  border-top: 1px solid var(--line);
  background: #090f1c;
  padding: 11px 16px 14px 20px;
  animation: pop .16s ease both;
}
.vc-cmp[hidden] { display: none !important; }
.vc-cmp-btn + .vc-cmp { border-top: 0; }

.drawer-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 0 8px; }
.drawer-h .t { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); }
.drawer-h .s { font-size: 11.5px; color: var(--dim); }

/* Défilement latéral DANS le conteneur, jamais dans la page. */
.tscroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; padding: 2px 0 0; }

.btable { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 0; }
.btable th, .btable td { padding: 9px 12px; text-align: right; font-size: 13.5px; white-space: nowrap; }
.btable th:first-child, .btable td:first-child { text-align: left; }
.btable thead th {
  font-family: var(--sans); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
/* En-têtes de camp : la couleur identifie le CAMP (pas la meilleure cote). */
.btable thead th.ca { color: var(--A); }
.btable thead th.cb { color: var(--B); }
.btable td {
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700; color: #dbe6f6;
}
.btable td.bk { font-family: var(--sans); font-weight: 700; color: var(--txt); }
.btable tr:last-child td { border-bottom: 0; }

/* Colonnes de camp : teinte franche + filet vertical de séparation. */
.btable td.colA, .btable th.ca { background-color: var(--A-fill); }
.btable td.colB, .btable th.cb { background-color: var(--B-fill); border-left: 1px solid var(--line); }

/* Ligne de référence Pinnacle */
.btable tr.refrow td { color: var(--pinnacle); background-color: rgba(136,146,164,.07); }
.btable tr.refrow td.colA { background-color: rgba(34,200,255,.05); }
.btable tr.refrow td.colB { background-color: rgba(255,122,69,.05); }
.btable tr.refrow td.bk { color: #aeb8c9; }
.btable tr.refrow td em {
  font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-left: 6px;
}

/* Pastille de couleur du bookmaker */
.bkdot {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 8px; vertical-align: 1px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}
.dash { color: #3d4a63; }

/* ── REPÈRE UNIVOQUE « MEILLEURE COTE » ────────────────────────────
   Même cadre vert EV dans le tiroir (.hit), le Face à Face (.win) et
   le tableau Vainqueur (.cc.best). Le remplissage est posé en
   background-IMAGE : il se superpose à la teinte de camp (background-
   color) sans l'effacer — le camp reste identifiable.
   ──────────────────────────────────────────────────────────────── */
.hit, .win, .cc.best {
  position: relative; color: #fff;
  box-shadow: inset 0 0 0 999px var(--best-fill);   /* aplati : remplissage uni superposé */
}
.hit::after, .win::after, .cc.best::after {
  content: ""; position: absolute; inset: 3px 5px; border-radius: 8px;
  border: 1px solid var(--best-bd); pointer-events: none; z-index: 0;
}
.hit > span, .win > span { position: relative; z-index: 1; }
/* .wa / .wb n'existent que pour indiquer le camp gagnant de la ligne :
   ils NE changent PAS la couleur du cadre (règle d'univocité). */
.win.wa::after, .win.wb::after { border-color: var(--best-bd); }


/* ================================================================
   10. TIROIR BOOKMAKERS — HÉRITÉ (.vcb-*)
   ================================================================ */
.vcb-head { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--dim); margin-bottom: 8px; }
.vcb-head b, .vcb-head code { color: var(--txt); font-weight: 700; }
.vcb-load, .vcb-empty { font-size: 12.5px; color: var(--dim); padding: 8px 2px; }

.vcb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px; font-size: 13px;
  border: 1px solid transparent;
}
.vcb-book { flex: 1; min-width: 0; color: var(--txt); overflow: hidden; text-overflow: ellipsis; }
.vcb-odd { font-size: 14.5px; font-weight: 800; color: #dbe6f6; }
.vcb-v { font-size: 12px; color: var(--dim); width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.vcb-v.pos { color: var(--ev); font-weight: 700; }
.vcb-v.ref { color: var(--dim); font-style: italic; }

/* Meilleure cote : même vert EV que partout ailleurs. */
.vcb-row.best {
  background-color: var(--best-fill);     /* aplati : remplissage uni */
  border-color: var(--best-bd);
}
.vcb-row.best .vcb-odd { color: var(--best-txt); }
.vcb-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ev); border: 1px solid var(--best-bd); border-radius: 6px; padding: 1px 6px; margin-left: 6px;
}
/* Ligne « cote fair » (référence Pinnacle) */
.vcb-row.fair {
  background: transparent; border-radius: 0; margin: 4px 0;
  border-top: 1px dashed var(--border2); border-bottom: 1px dashed var(--border2);
  border-left: 0; border-right: 0;
}
.vcb-row.fair .vcb-book { color: var(--pinnacle); font-style: italic; }
.vcb-row.fair .vcb-odd { color: var(--pinnacle); }
.vcb-reftag {
  font-family: var(--sans); font-size: 10px; font-weight: 700; font-style: normal;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; margin-left: 6px;
}
.vcb-link { margin-left: 8px; font-size: 14px; font-weight: 800; color: var(--ev); }
.vcb-link:hover { filter: brightness(1.25); }


/* ================================================================
   11. COMPARATEUR : EN-TÊTE, LÉGENDE, TABLEAUX
   ================================================================ */
.compare { display: block; }

.cmp-head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin: 6px 0 12px; }
.cmp-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #f2f7ff; }
.cmp-head-sub { font-size: 12px; color: var(--dim); }

/* Légende : explicite les DEUX repères (cadre = meilleure cote, fond = value). */
.cmp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  font-size: 12px; color: var(--dim); margin-bottom: 10px;
}
.cmp-legend b { color: var(--txt-2); font-weight: 700; }
.cl-sw {
  display: inline-block; width: 20px; height: 13px; border-radius: 4px;
  vertical-align: -2px; margin-right: 5px;
  border: 1px solid var(--best-bd); background: var(--best-fill);
}
.cl-sw.val  { background: rgba(0,227,122,.20); border-color: rgba(0,227,122,.45); }
.cl-sw.best { background: var(--best-fill); border-color: var(--best-bd); }
.cl-sw.gap  { background: rgba(255,179,71,.30); border-color: rgba(255,179,71,.6); }
.cl-star { color: var(--gold); }

/* Le tableau défile DANS son conteneur, jamais la page. */
.cmp-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.cmp-tbl {
  width: 100%; min-width: 440px;
  border-collapse: collapse; font-size: 13px;
}
.cmp-tbl th {
  font-family: var(--sans); font-size: 12px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--txt-2);
  text-align: center; padding: 10px 6px; height: 34px;
  background: #0c1322; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp-tbl th:first-child { text-align: left; padding-left: 12px; text-transform: none; letter-spacing: 0; }
/* La ligne d'en-tête est un <tr class="cmp-hd"> (pas de <thead>) : on la
   fige visuellement comme un vrai en-tête de tableau. */
.cmp-hd th { background: #0c1322; border-bottom: 1px solid var(--line); }
.cmp-tbl td { height: 32px; padding: 4px 6px; vertical-align: middle; line-height: 1.2; font-size: 13px; }

.cmp-r td { border-bottom: 1px solid var(--line-soft); }
.cmp-r:hover td { background-color: rgba(34,200,255,.045); }

/* Ligne de groupe (le duel) : bandeau de séparation entre deux paires. */
.cmp-grp td {
  height: auto; padding: 7px 12px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 650; color: #c4d2e6;
  background: rgba(0,227,122,.06);
  border-top: 1px solid var(--line);
}
.cmp-vs  { color: var(--dim); font-weight: 400; }
.cmp-liq { color: var(--txt-2); font-weight: 700; font-size: 12.5px; margin-left: 6px; }
.cmp-edge { float: right; color: var(--ev); font-weight: 800; }
.cmp-sb   { float: right; color: var(--gold); font-weight: 800; }

/* Cellules */
.cc-name { padding-left: 12px; color: #e8f1f5; font-family: var(--sans); font-weight: 650; text-align: left; }
.cc-fair {
  text-align: center; color: var(--pinnacle); font-weight: 700;
  border-left: 1px dashed #29414f; border-right: 1px dashed #29414f;
  background-color: rgba(136,146,164,.05);
}
.cc { text-align: center; color: #cbd7e9; font-weight: 700; }
.cc a { color: inherit; }
.cc.empty { color: #34454f; font-weight: 400; }
/* Fond plein = VALUE (bat le fair). Cadre = MEILLEURE COTE (cf. §9). */
.cc.val { background-color: rgba(0,227,122,.16); color: #7dfcbd; }
.cc.best { font-weight: 800; }
/* Étoile « meilleure cote » : jamais sous 12px (règle typographique tableaux). */
.cc-star { color: var(--gold); font-size: 12.5px; }

/* Colonne « Écart » des outrights (gros écart entre books = opportunité) */
.cc-gap { text-align: center; font-weight: 800; color: var(--txt-2); font-size: 12.5px; }
.cc-gap.hot { color: #ffb347; }
.cc-gap.muted { color: #5f7480; font-weight: 600; font-size: 12px; }

/* Table outright (Vainqueur / Podium) : nom large + N colonnes books + Écart. */
.cmp-tbl.outright { table-layout: fixed; min-width: 520px; }
.cmp-tbl.outright th:first-child, .cmp-tbl.outright td:first-child { width: 26%; }
.cmp-tbl.outright th:last-child,  .cmp-tbl.outright td:last-child  { width: 12%; }
.bk-short { display: none; }

/* Placeholder & vide */
.cmp-empty { text-align: center; color: var(--dim); padding: 44px 14px; font-size: 14px; }
.cmp-soon { text-align: center; color: #9fb0b9; padding: 44px 18px; font-size: 14px; line-height: 1.6; }
.cmp-soon .cs-ico { display: block; font-size: 2rem; margin-bottom: 10px; }
.cmp-soon b { color: var(--ev); }


/* ================================================================
   12. FACE À FACE (duels)
   Deux camps = deux colonnes. Le CAMP est identifié par le cyan (A) et
   l'orange (B) ; la MEILLEURE COTE est toujours le cadre vert EV.
   ================================================================ */
.duel-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 12px; color: var(--dim); margin: 0 0 10px;
}
.duel-legend b { color: var(--txt-2); font-weight: 700; }
.duel-legend i, .duel-legend .sw {
  display: inline-block; width: 20px; height: 13px; border-radius: 4px; vertical-align: -2px;
  border: 1px solid var(--best-bd); background: var(--best-fill); margin-right: 5px;
}
.duel-legend i.a { border-color: var(--A); background: var(--A-fill); }
.duel-legend i.b { border-color: var(--B); background: var(--B-fill); }

/* Cartes plus PETITES : 3 colonnes dès 1100px, 2 au-dessus de 720px, 1 sur mobile. */
.duels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
/* Colonne flex : les duels d'une même rangée ont la même hauteur et leur
   pied (.duel-f) reste collé en bas, même si l'un a moins de books. */
.duel {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--shadow-soft);
}
.duel .dscroll { flex: 1; }

.duel-h {
  padding: 9px 12px 10px; border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
}
.duel-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 8px; gap: 8px;
}
/* Contexte (compétition / marché) : tronqué pour tenir sur UNE ligne. */
.duel-top .dt {
  min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .04em;
}
/* Pas de couverture Pinnacle : liquidité et fair affichés en « n/a » plutôt que masqués. */
.duel-top .liq.off { color: #5d6b85; border-color: var(--line-soft); }
.duel.noref { border-color: #23304a; }
.duel-top .no {
  font-family: var(--mono); letter-spacing: 0;
  color: #04120b; background: #5fd6ff; border-radius: 6px; padding: 1px 7px; flex: none;
}
.duel-top .liq {
  margin-left: auto; font-family: var(--mono); letter-spacing: 0; text-transform: none;
  color: var(--txt-2); background: #0b1322; border: 1px solid var(--line);
  border-radius: 7px; padding: 2px 8px; font-size: 12px;
}

/* Bandeau des deux camps */
.camps { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.camp { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 6px; border-radius: 9px; }
.camp.a { background: var(--A-fill); }
.camp.b { justify-content: flex-end; text-align: right; background: var(--B-fill); }
.camp .bar { width: 3px; height: 22px; border-radius: 99px; flex: none; }
.camp.a .bar { background: var(--A); box-shadow: 0 0 14px rgba(34,200,255,.55); }
.camp.b .bar { background: var(--B); box-shadow: 0 0 14px rgba(255,122,69,.55); }
.camp .nm { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.camp .fn { font-size: 11.5px; color: var(--dim); font-weight: 600; }
/* ── LIENS DE PARI GÉNÉRIQUES (.betlink) ──
   Posés sur la grosse cote et la pastille book des cartes, sur le nom du coureur dans le tableau
   Vainqueur et sur les noms de camps des duels. Neutres au repos (le contenu garde son style),
   ils s'éclaircissent au survol. Un clic dessus n'ouvre PAS le tiroir : le gestionnaire de carte
   ignore déjà les clics sur un <a>. */
.betlink { color: inherit; text-decoration: none; transition: filter .15s ease, opacity .15s ease; }
.betlink:hover { filter: brightness(1.15); }
.cc-name .betlink { border-bottom: 1px dotted rgba(255,255,255,.22); }
.cc-name .betlink:hover { border-bottom-color: var(--ev); }
.camp .nm .betlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.vc-odds-row .betlink { display: inline-flex; align-items: center; }

/* ── COTES CLIQUABLES ──
   Chaque cote des tableaux (duels, tiroir bookmakers, Vainqueur/Podium) mène au pari chez le book.
   Affordance discrète : soulignement pointillé au repos, plein + surbrillance au survol — sans
   colorer le texte, pour ne pas concurrencer le repère vert « meilleure cote ». */
.dgrid td a, .btable td a, .cmp-tbl td a {
  display: inline-block; color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.28);
  transition: border-color .15s ease, filter .15s ease;
}
.dgrid td a:hover, .btable td a:hover, .cmp-tbl td a:hover {
  border-bottom-color: var(--ev); filter: brightness(1.18);
}
.duel-f a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.3); }
.duel-f a:hover { border-bottom-color: var(--ev); }
/* Cible tactile confortable au doigt sur mobile (recommandation d'accessibilité). */
@media (hover: none) {
  .dgrid td a, .btable td a, .cmp-tbl td a { padding: 4px 2px; margin: -4px -2px; }
}

/* Bloc texte d'un camp (nom + rappel du fair) : empilé à côté de la barre de couleur.
   Le camp B est aligné à droite pour que les deux camps se fassent face. */
.camp-txt { display: flex; flex-direction: column; min-width: 0; }
.camp.b .camp-txt { align-items: flex-end; }
.vsbadge {
  font-size: 11px; font-weight: 800; color: var(--dim); flex: none;
  border: 1px solid var(--line); background: #0a1120; border-radius: 8px; padding: 3px 8px;
}

/* Jauge de probabilité fair, partagée entre les deux camps */
.split {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden;
  background: #0a1120; margin-top: 11px; border: 1px solid var(--line-soft);
}
.split i { display: block; height: 100%; }
.split i.a { background: var(--A); }
.split i.b { background: var(--B); }
.splitl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--dim); margin-top: 5px; }
.splitl .a { color: #7fdcff; }
.splitl .b { color: #ffb08a; }

/* Grille de cotes du duel — défile dans SON conteneur */
.dscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dgrid { width: 100%; min-width: 340px; border-collapse: separate; border-spacing: 0; }
.dgrid th, .dgrid td { padding: 5px 10px; font-size: 13px; text-align: right; white-space: nowrap; }
.dgrid th:first-child, .dgrid td:first-child { text-align: left; }

/* En-têtes de colonne = les DEUX NOMS de camp : information capitale,
   jamais sous 12px (cf. §18, toutes largeurs confondues). */
.dgrid thead th {
  font-family: var(--sans); font-size: 12.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line); padding-top: 11px;
}
.dgrid thead th.ha { color: var(--A); background-color: rgba(34,200,255,.13); }
.dgrid thead th.hb { color: var(--B); background-color: rgba(255,122,69,.13); border-left: 1px solid var(--line); }

.dgrid td { border-bottom: 1px solid var(--line-soft); font-weight: 700; color: #dce7f7; }
.dgrid td.bk { font-family: var(--sans); font-weight: 700; color: var(--txt-2); }
.dgrid tr:last-child td { border-bottom: 0; }

/* Colonnes de camp : teinte franche (11 %) + filet vertical de séparation. */
.dgrid td.a { background-color: var(--A-fill); }
.dgrid td.b { background-color: var(--B-fill); border-left: 1px solid var(--line); }

/* Ligne de référence « fair » (Pinnacle) */
.dgrid tr.fair td { background-color: #0a1120; color: var(--pinnacle); border-bottom: 1px dashed #2b3654; }
.dgrid tr.fair td.bk em {
  font-style: normal; font-size: 12px; letter-spacing: .04em; text-transform: none;
  color: #5d6b85; font-weight: 600; margin-left: 5px;
}
.dgrid tr.fair td.bk {
  color: #9aa6bb; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.dgrid tr.fair td.a { background-color: rgba(34,200,255,.05); }
.dgrid tr.fair td.b { background-color: rgba(255,122,69,.05); }

/* Pied du duel : meilleure cote de chaque camp. Le libellé porte la
   couleur du camp, la COTE porte le vert EV (repère « meilleure cote »). */
.duel-f {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border-top: 1px solid var(--line-soft);
}
.duel-f > div { background: #090f1c; padding: 9px 12px; font-size: 12px; color: var(--dim); }
.duel-f .r { text-align: right; }
.duel-f b { display: block; font-size: 14px; font-weight: 800; margin-top: 3px; color: var(--best-txt); }
.duel-f .ka { box-shadow: inset 3px 0 0 var(--A); }
.duel-f .kb { box-shadow: inset -3px 0 0 var(--B); }


/* ================================================================
   13. ÉTATS VIDES, INFOBULLES, DIVERS
   ================================================================ */
.empty { text-align: center; color: var(--dim); padding: 64px 20px; font-size: 15px; line-height: 1.6; }
.empty .big { font-size: 40px; display: block; margin-bottom: 12px; opacity: .55; }
.fresh { color: var(--ev); font-weight: 600; }
.tip { border-bottom: 1px dotted rgba(141,155,184,.55); cursor: help; }

/* Bouton d'aide */
.help-btn {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--panel); color: var(--txt-2); border: 1px solid var(--line);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.help-btn:hover { color: var(--ev); border-color: var(--green-bd); }


/* ================================================================
   14. MODALES (fenêtre d'introduction)
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(3, 6, 12, .80); backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 20px; overflow: auto;
  animation: fade .2s ease;
}
.modal-overlay[hidden] { display: none !important; }
.modal {
  position: relative; width: 100%; max-width: 500px;
  border-radius: 20px; padding: 28px 28px 24px;
  border: 1px solid var(--border2);
  background: var(--panel-grad);
  box-shadow: 0 28px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
  animation: pop .25s ease both;
}
.modal-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px;
  background: var(--panel-3); color: var(--dim); border: 1px solid var(--line); cursor: pointer; font-size: 13px;
  transition: color .14s ease, border-color .14s ease;
}
.modal-x:hover { color: var(--txt); border-color: var(--border2); }
.modal-logo {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--ev); background: var(--grad-soft); border: 1px solid rgba(0,227,122,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px -12px rgba(0,227,122,.55);
}
.modal-logo svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 5px rgba(0,227,122,.45)); }
.modal h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.modal-lead { font-size: 14px; color: var(--txt-2); line-height: 1.6; margin: 0 0 18px; }
.modal-lead b { color: var(--txt); font-weight: 700; }
.modal-section {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim); margin: 4px 0 10px;
}
.modal-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.modal-list li { font-size: 13px; color: var(--dim); line-height: 1.5; }
.modal-list .k { color: var(--txt); font-weight: 700; }
.modal-list .k.green { color: var(--ev); }
.modal-list .k.gold  { color: var(--gold); }
.modal-note { font-size: 12px; color: var(--dim); margin: 0 0 18px; }

.cta {
  width: 100%; padding: 13px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--grad-acc); color: #04120b; font-size: 15px; font-weight: 800;
  box-shadow: 0 10px 26px -12px rgba(0,227,122,.9);
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(0,227,122,1); }


/* ================================================================
   15. MUR DE PAIEMENT (paywall)
   body.locked masque le contenu ET bloque le défilement derrière.
   ================================================================ */
body.locked { overflow: hidden; }
body.locked .wrap { display: none; }

.paywall {
  position: fixed; inset: 0; z-index: 80; overflow: auto;
  display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.paywall[hidden] { display: none !important; }

.pw-card {
  width: 100%; max-width: 440px; text-align: center;
  border-radius: 22px; padding: 36px 32px 28px;
  border: 1px solid var(--border2);
  background: var(--panel-grad);
  box-shadow: 0 32px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}
.pw-logo {
  width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 16px; display: grid; place-items: center;
  color: var(--ev); background: var(--grad-soft); border: 1px solid rgba(0,227,122,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -12px rgba(0,227,122,.6);
}
.pw-logo svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 6px rgba(0,227,122,.5)); }
.pw-title {
  margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.035em;
  color: #eaf6ff;                             /* aplati : titre en couleur unie */
}
.pw-tag { margin: 8px 0 20px; color: var(--dim); font-size: 14px; }

.pw-list { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 11px; }
.pw-list li { font-size: 13.5px; color: var(--txt-2); line-height: 1.45; }
.pw-list b { color: var(--txt); font-weight: 700; }

.pw-price {
  font-size: 32px; font-weight: 800; margin: 6px 0 18px; letter-spacing: -.03em;
  color: var(--ev);                           /* aplati */ color: var(--ev);
}

.pw-tabs {
  display: flex; gap: 5px; padding: 4px; margin-bottom: 14px;
  background: #0a1120; border: 1px solid var(--line); border-radius: 12px;
}
.pw-tab {
  flex: 1; padding: 10px 0; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; background: transparent; color: var(--dim);
  transition: color .15s ease, background .15s ease;
}
.pw-tab.on { background: var(--panel-2); color: var(--txt); box-shadow: 0 2px 10px -6px #000; }

.pw-hello { font-size: 13.5px; color: var(--dim); margin: 0 0 16px; }
.pw-hello b { color: var(--txt); font-weight: 700; }

.pw-email {
  width: 100%; text-align: center;
  background: #0a1120; color: var(--txt); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 14px; font-size: 15px; margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pw-email::placeholder { color: var(--dim); }
.pw-email:focus { outline: none; border-color: var(--green-bd); box-shadow: 0 0 0 3px rgba(0,227,122,.10); }

.pw-cta {
  width: 100%; padding: 14px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--grad-acc); color: #04120b; font-size: 16px; font-weight: 800;
  box-shadow: 0 10px 28px -12px rgba(0,227,122,.9);
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.pw-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pw-cta:disabled { opacity: .5; cursor: default; transform: none; filter: none; box-shadow: none; }

.pw-link {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 12.5px; margin-top: 12px; text-decoration: underline;
}
.pw-link:hover { color: var(--txt); }

.pw-msg { margin: 14px 0 0; font-size: 13px; color: var(--gold); }
.pw-msg[hidden] { display: none !important; }
.pw-msg.err { color: var(--red); }
.pw-msg.ok  { color: var(--ev); }
.pw-foot { margin: 18px 0 0; font-size: 11.5px; color: var(--dim); }

.pw-preview-x {
  position: absolute; top: 18px; right: 18px; z-index: 90;
  background: var(--panel-2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 650; cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.pw-preview-x[hidden] { display: none !important; }
.pw-preview-x:hover { border-color: var(--green-bd); color: var(--ev); }


/* ================================================================
   16. MENU DE COMPTE
   (Telegram, books, sports, curseur de liquidité, clés d'API)
   ================================================================ */
.account { position: relative; flex: none; }
.account[hidden] { display: none !important; }

.acct-btn {
  width: 36px; height: 36px; border-radius: 12px; border: 0;
  background: var(--grad-acc); color: #04120b;
  font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(0,227,122,.8), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: filter .15s ease;
}
.acct-btn:hover { filter: brightness(1.12); }

.acct-menu {
  position: absolute; right: 0; top: 46px; width: 272px; z-index: 60;
  max-height: calc(100vh - 80px);
  /* dvh = hauteur RÉELLEMENT visible (mobile : barre d'URL comprise). Sans ça, 100vh vaut la
     hauteur « barre masquée » et le bas du menu tombe hors écran, inatteignable puisque le menu
     défile en interne. Déclaré APRÈS le repli en vh : les navigateurs anciens ignorent la ligne. */
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;          /* le doigt ne fait plus défiler la page derrière */
  border-radius: 16px; padding: 8px;
  border: 1px solid var(--border2);
  background: var(--panel-grad);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
  animation: pop .15s ease both;
}
.acct-menu[hidden] { display: none !important; }

.acct-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; }
.acct-av-lg {
  width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(0,227,122,.34); background: var(--grad-soft); color: var(--ev);
  font-size: 16px; font-weight: 800;
}
.acct-id { min-width: 0; }
.acct-email { font-size: 13.5px; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-status { font-size: 12px; color: var(--ev); margin-top: 2px; font-weight: 650; }
.acct-expiry { font-size: 12px; color: var(--dim); padding: 0 10px 8px; }
.acct-sep { height: 1px; background: var(--line); margin: 5px 0; }

.acct-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 10px; border: 0; background: transparent; color: var(--txt);
  font-size: 13.5px; font-weight: 600; border-radius: 10px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.acct-item .ai { font-style: normal; font-size: 14px; width: 18px; text-align: center; opacity: .9; }
.acct-item:hover { background: rgba(34,200,255,.08); color: #fff; }
.acct-item.logout { color: var(--red); }
.acct-item.logout:hover { background: rgba(255,95,109,.10); color: var(--red); }

/* Sections Telegram / books / sports / liquidité / API */
.acct-tg, .acct-books { padding: 4px 10px 10px; }
.acct-tg-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: var(--txt); letter-spacing: .01em;
}
.acct-tg-head b { color: var(--ev); font-weight: 800; }
.acct-tg-ic { font-size: 14px; }
.acct-tg-sub { font-size: 11.5px; color: var(--dim); margin: 5px 0 9px; line-height: 1.45; }
.acct-tg-btn {
  width: 100%; padding: 9px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--green-bd); background: var(--grad-soft); color: var(--ev);
  font-size: 13px; font-weight: 700;
  transition: filter .12s ease, border-color .12s ease, color .12s ease;
}
.acct-tg-btn:hover { filter: brightness(1.18); }
.acct-tg-btn:disabled { opacity: .55; cursor: default; }
.acct-tg-btn.off { background: transparent; border-color: var(--border2); color: var(--dim); font-weight: 600; }

.acct-books-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.bk-chip {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #0b1322; color: var(--dim);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.bk-chip:hover { color: var(--txt); border-color: #2c3c5e; }
.bk-chip.on { background: var(--grad-soft); border-color: var(--green-bd); color: var(--ev); font-weight: 700; }

/* Curseur de liquidité minimum */
.acct-books input[type=range] {
  width: 100%; height: 22px; margin: 4px 0 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.acct-books input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 99px; background: var(--ev);
}
.acct-books input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; margin-top: -5.5px;
  background: #fff; border: 2px solid var(--ev); box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.acct-books input[type=range]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--ev); }
.acct-books input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ev); }

/* Clés d'API */
.acct-api-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 9px; }
.acct-api-empty { font-size: 11.5px; color: var(--dim); padding: 2px 0; }
.acct-api-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #0b1322;
}
.acct-api-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-api-info code { font-size: 12px; color: var(--txt); }
.acct-api-meta { font-size: 11px; color: var(--dim); }
.acct-api-del {
  flex: none; border: 0; background: transparent; color: var(--dim);
  font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.acct-api-del:hover { color: var(--red); background: rgba(255,95,109,.10); }
.acct-api-label {
  width: 100%; padding: 8px 10px; margin-bottom: 7px;
  border-radius: 9px; border: 1px solid var(--line); background: #0b1322; color: var(--txt); font-size: 12.5px;
}
.acct-api-label:focus { outline: none; border-color: var(--green-bd); }
.acct-api-new { margin-top: 9px; }
.acct-api-warn { font-size: 11px; color: var(--orange); margin-bottom: 5px; line-height: 1.45; }
.acct-api-keybox {
  display: flex; align-items: center; gap: 6px; padding: 8px;
  border: 1px dashed var(--green-bd); border-radius: 9px; background: var(--green-bg);
}
.acct-api-keybox code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--txt);
}
.acct-api-keybox button {
  flex: none; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--green-bd); background: transparent; color: var(--ev);
  font-size: 11.5px; font-weight: 700;
}
.acct-api-msg { font-size: 11.5px; margin-top: 7px; color: var(--txt-2); }
.acct-api-msg.err { color: var(--red); }
.acct-api-msg.ok  { color: var(--ev); }
#acct-api-docs { color: var(--ev); font-weight: 650; }
#acct-api-docs:hover { text-decoration: underline; }


/* ================================================================
   17. PANNEAU D'ADMINISTRATION
   ================================================================ */
.admin-modal { max-width: 660px; }
.admin-section {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim); margin: 20px 0 10px;
}
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.admin-stat {
  position: relative; overflow: hidden;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.admin-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.admin-stat .n { font-family: var(--mono); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.admin-stat .l { font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.admin-stat.rev .n { color: var(--ev); }
.admin-stat.rev::before { background: var(--grad-acc); }
.admin-stat.pending .n { color: var(--gold); }
.admin-stat.pending::before { background: var(--gold); }

.admin-grant { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-grant input[type=email] {
  flex: 1; min-width: 160px; background: #0a1120; color: var(--txt);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px;
}
.admin-grant input[type=number] {
  width: 70px; background: #0a1120; color: var(--txt); text-align: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; font-size: 14px;
}
.admin-grant input:focus { outline: none; border-color: var(--green-bd); }
.admin-grant button {
  background: var(--grad-acc); color: #04120b; border: 0; border-radius: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 800; cursor: pointer;
}
.admin-grant button:hover { filter: brightness(1.07); }

.admin-msg { font-size: 12.5px; color: var(--ev); margin: 10px 0 0; word-break: break-all; }
.admin-msg[hidden] { display: none !important; }
.admin-msg.err { color: var(--red); }

.admin-table { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.admin-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--panel-3); border: 1px solid var(--line-soft); border-radius: 10px; font-size: 13px;
}
.admin-row .ar-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); }
.admin-row .ar-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; flex: none; }
.admin-row .ar-badge.on   { background: var(--green-bg); color: var(--ev); }
.admin-row .ar-badge.off  { background: rgba(150,165,190,.12); color: var(--dim); }
.admin-row .ar-badge.pend { background: var(--gold-bg); color: var(--gold); }
.admin-row .ar-exp { font-size: 11.5px; color: var(--dim); flex: none; }
.admin-row .ar-tg  { color: var(--ev); font-size: 11px; }
.admin-row .ar-act {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  border-radius: 9px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; flex: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.admin-row .ar-act.grant { border-color: var(--green-bd); color: var(--ev); }
.admin-row .ar-act.grant:hover { background: var(--green-bg); }
.admin-row .ar-act.revoke:hover { border-color: var(--gold); color: var(--gold); }
.admin-row .ar-act.del { padding: 5px 9px; }
.admin-row .ar-act.del:hover { border-color: var(--red); color: var(--red); }
.admin-row.pending { box-shadow: inset 3px 0 0 var(--gold); }


/* ================================================================
   18. RÉACTIF — 360px → 1400px
   RÈGLE : aucun texte de tableau sous 12px, à AUCUNE largeur.
   Les tableaux larges défilent dans leur conteneur
   (.cmp-wrap / .tscroll / .dscroll), jamais la page.
   ================================================================ */

/* ── ≤ 1080px : la grille de duels reste sur 2 colonnes mais respire moins ── */
@media (max-width: 1080px) {
  .wrap { padding: 0 16px 64px; }
  .vc-metrics { grid-template-columns: repeat(3, 1fr); }
}

/* ── ≤ 900px : cartes et duels sur une colonne ── */
@media (max-width: 900px) {
  .duels { grid-template-columns: 1fr; }
  .vc-body { grid-template-columns: 1fr; }
  .vc-odds { font-size: 38px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat .num { font-size: 26px; }
}

/* ── ≤ 720px : compactage de l'en-tête et des cartes ── */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .brand .sub { display: none; }
  .live { font-size: 11.5px; padding: 4px 10px 4px 8px; }
  .viewtoggle .vt-btn { flex: 1; padding: 10px 8px; }

  .vc-top, .vc-hd { padding: 12px 13px 10px 17px; }
  .vc-ev { padding: 0 13px 0 17px; }
  .vc-body { padding: 13px 13px 13px 17px; }
  .vc-main { padding: 11px 13px 13px 17px; flex-wrap: wrap; }
  .vc-meta { padding: 10px 13px 11px 17px; }
  .vc-foot { padding: 9px 13px 9px 17px; }
  .vc-cmp { padding: 10px 13px 13px 17px; }
  .vc-when { margin-left: 0; }
  .vc-left > .vc-pick { font-size: 21px; }
  .vc-bet { font-size: 19px; }
  .vc-pricebox { min-width: 104px; padding: 10px 14px; }
  .vc-bigodd { font-size: 26px; }
  .vc-metrics { grid-template-columns: repeat(3, 1fr); }

  .cmp-head h3 { font-size: 15.5px; }
  #f-search { min-width: 0; width: 100%; flex: 1 1 100%; order: 3; }
}

/* ── ≤ 560px : mobile. Les tableaux gardent ≥ 12px et défilent. ── */
@media (max-width: 560px) {
  .wrap { padding: 0 12px 56px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 11px 10px; }
  .stat .num { font-size: 22px; }
  .stat .lbl { font-size: 11px; letter-spacing: .08em; }

  .vc-edge { font-size: 19px; padding: 4px 18px 5px 11px; }
  .vc-odds { font-size: 34px; }
  .vc-metrics { grid-template-columns: repeat(2, 1fr); }
  .vc-m { padding: 8px 10px; }

  /* Tableaux : jamais sous 12px — on préfère le défilement horizontal
     du conteneur à une typographie illisible. */
  .cmp-tbl, .cmp-tbl td, .cmp-tbl.outright td { font-size: 12px; }
  .cmp-tbl th { font-size: 12px; letter-spacing: .03em; padding: 9px 4px; }
  .cmp-tbl td { padding: 4px 4px; }
  .cmp-tbl { min-width: 460px; }
  .cmp-tbl.outright { min-width: 520px; }
  /* Libellés de books raccourcis, mais toujours ≥ 12px. */
  .cmp-tbl.outright .bk-full { display: none; }
  .cmp-tbl.outright .bk-short { display: inline; }
  .cc-name { padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-gap, .cc-gap.muted { font-size: 12px; }
  .cmp-grp td { font-size: 12px; padding: 6px 8px; }
  .cmp-edge, .cmp-liq { font-size: 12px; }
  .cmp-legend, .duel-legend { font-size: 12px; gap: 6px 12px; margin-bottom: 8px; }

  .btable th, .btable td { font-size: 12.5px; padding: 8px 9px; }
  .btable thead th { font-size: 12px; }
  .dgrid th, .dgrid td { font-size: 12.5px; padding: 8px 9px; }
  .dgrid thead th { font-size: 12px; }          /* noms des camps : jamais moins */
  .dgrid tr.fair td.bk em {
  font-style: normal; font-size: 12px; letter-spacing: .04em; text-transform: none;
  color: #5d6b85; font-weight: 600; margin-left: 5px;
}
.dgrid tr.fair td.bk { font-size: 12px; }

  .camp .nm { font-size: 14px; }
  .duel-h { padding: 12px 12px 11px; }
  .duel-f > div { font-size: 12px; padding: 8px 10px; }

  .course-bar { gap: 6px; }
  .cs-pill { font-size: 13px; padding: 8px 13px; }
  .market-bar { gap: 5px; }
  .mk-pill { font-size: 12.5px; padding: 6px 11px; }
  .submarket-bar { gap: 6px; }
  .sub-pill { font-size: 12.5px; padding: 5px 6px 7px; }

  /* MOBILE — le menu compte est LONG (Telegram, books, sports, liquidité, clés d'API, déconnexion).
     Ancré en `absolute` sous l'avatar, son bas sortait de l'écran et restait inatteignable.
     Sur téléphone il devient un PANNEAU ancré à l'écran (fixed), dimensionné sur la hauteur
     réellement visible → tout le contenu est atteignable en faisant défiler le menu lui-même. */
  .acct-menu {
    position: fixed;
    top: 60px; left: 10px; right: 10px; width: auto;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));   /* encoche / barre gestuelle */
    z-index: 200;
  }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-grant { flex-wrap: wrap; }
  .admin-grant button { flex: 1; }
  .modal { padding: 24px 20px 20px; }
  .pw-card { padding: 30px 22px 24px; }
  .pw-title { font-size: 27px; }
  .pw-price { font-size: 27px; }
}

/* ── ≤ 400px : très petits écrans ── */
@media (max-width: 400px) {
  .wrap { padding: 0 10px 52px; }
  .brand h1 { font-size: 20px; }
  .brand .logo { width: 38px; height: 38px; border-radius: 12px; }
  .stat .num { font-size: 20px; }
  .stat .lbl { font-size: 10.5px; }        /* hors tableau : toléré */
  .vc-top, .vc-hd, .vc-body, .vc-main, .vc-meta, .vc-foot, .vc-cmp, .vc-ev {
    padding-left: 15px; padding-right: 11px;
  }
  .vc-left > .vc-pick { font-size: 19px; }
  .vc-bet { font-size: 18px; }
  .vc-odds { font-size: 30px; }
  .vc-bigodd { font-size: 24px; }
  .vc-main { gap: 10px; }
  .vc-pricebox { min-width: 96px; padding: 9px 12px; }
  /* Les tableaux ne descendent PAS sous 12px : ils défilent. */
  .cmp-tbl, .cmp-tbl td, .cmp-tbl th { font-size: 12px; }
  .dgrid th, .dgrid td, .dgrid thead th { font-size: 12px; }
  .btable th, .btable td, .btable thead th { font-size: 12px; }
}

/* ── Grands écrans : on laisse respirer, sans dépasser 1180px ── */
@media (min-width: 1240px) {
  .wrap { padding: 0 24px 80px; }
  .vc-body { gap: 20px; }
}

/* ── Accessibilité : respect de « réduire les animations » ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ================================================================
   FACE À FACE — PRÉSENTATION « LISTE BALAYABLE » (choix client, 2026-07-31)
   Un duel = UNE LIGNE. On y lit l'essentiel (valeur, épreuve, meilleure cote de
   chaque camp + son book, fair, liquidité) ; le détail des 5 bookmakers se
   déplie via <details> natif (aucun JS). Remplace la carte-tableau précédente,
   jugée trop dense (10 cotes à balayer par duel).
   ================================================================ */
/* Gabarit de colonnes PARTAGÉ par l'en-tête et chaque ligne → colonnes alignées. */
.listwrap { --grid: 96px 150px minmax(186px, 1fr) minmax(186px, 1fr) 118px 86px 26px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }

.rhead {
  display: grid; grid-template-columns: var(--grid);
  grid-template-areas: "st ctx oa ob fair liq chev";
  gap: 10px 12px; align-items: end; padding: 11px 14px 9px;
  background: #0c1322; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dim);
}
.rhead .h-st { grid-area: st; } .rhead .h-ctx { grid-area: ctx; }
.rhead .h-oa { grid-area: oa; color: var(--A); } .rhead .h-ob { grid-area: ob; color: var(--B); }
.rhead .h-fair { grid-area: fair; } .rhead .h-liq { grid-area: liq; text-align: right; }

/* Bandeau de groupe : valeur détectée / sans valeur / sans référence Pinnacle */
.grp { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 9px 14px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); background: #0a1120; }
.grp:first-of-type { border-top: 0; }
.grp .gt { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.grp.val { background: rgba(0,227,122,.06); }
.grp.val .gt { color: var(--ev); }
.grp .gc { font-size: 12.5px; color: var(--dim); font-family: var(--mono); }
.grp .gnote { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }

.row { position: relative; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #22304c; z-index: 2; }
.row.val::before { background: var(--ev); }
.row.noref::before { background: #39445e; }
.row:hover { background: rgba(34,200,255,.04); }
.row[open] { background: #0d1524; }
.row[open] > .rl { border-bottom: 1px solid var(--line-soft); }

.rl { display: grid; grid-template-columns: var(--grid);
  grid-template-areas: "st ctx oa ob fair liq chev";
  gap: 10px 12px; align-items: center; padding: 11px 14px; cursor: pointer; list-style: none; }
.rl::-webkit-details-marker { display: none; }
.rl:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }

/* 1 — statut de valeur */
.c-st { grid-area: st; min-width: 0; }
.stchip { display: inline-block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14.5px; font-weight: 800; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.stchip.v { background: var(--ev); color: #04120b; }
.stchip.z { background: #101a2c; color: var(--dim); border: 1px solid var(--line); }
.stchip.q { background: transparent; color: #93a1bd; border: 1px dashed var(--border2); }
.stsub { display: block; margin-top: 3px; font-size: 12px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.val .stsub { color: #5fd6ff; }

/* 2 — épreuve */
.c-ctx { grid-area: ctx; min-width: 0; }
.ctx1 { display: block; font-size: 13.5px; font-weight: 750; color: #dfe9f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx2 { display: block; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* DATE / HEURE du duel — facteur de décision : toujours visible, et mise en avant quand le
   départ est imminent (moins de 3 h), car la cote bouge et le pari se ferme. */
.ctx3 { display: block; margin-top: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 700; color: var(--cyan); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ctx3.soon { color: #04120b; background: var(--gold); border-radius: 5px; padding: 0 6px;
  display: inline-block; font-weight: 800; }
.ctx3.off { color: #5d6b85; font-family: var(--sans); font-weight: 600; }

/* 3 & 4 — meilleure cote de chaque camp (couleur du camp, cadre vert si valeur) */
.c-o { min-width: 0; border-radius: 10px; padding: 6px 10px 7px; position: relative; }
.c-o.oa { grid-area: oa; background: var(--A-fill); box-shadow: inset 3px 0 0 var(--A); }
.c-o.ob { grid-area: ob; background: var(--B-fill); box-shadow: inset 3px 0 0 var(--B); }
.c-o.oa.hit { box-shadow: inset 3px 0 0 var(--A), inset 0 0 0 999px var(--best-fill), inset 0 0 0 1px var(--best-bd); }
.c-o.ob.hit { box-shadow: inset 3px 0 0 var(--B), inset 0 0 0 999px var(--best-fill), inset 0 0 0 1px var(--best-bd); }
.onm { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--A); }
.c-o.ob .onm { color: var(--B); }
.oline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin-top: 2px; }
.onum { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800;
  letter-spacing: -.03em; color: #fff; border-bottom: 1px dotted rgba(255,255,255,.3); line-height: 1.15; }
.onum:hover { border-bottom-color: var(--ev); filter: brightness(1.15); }
.c-o.hit .onum { color: var(--best-txt); }
.onum.na { color: #3d4a63; border-bottom: 0; }
.obk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #cfdcf0;
  background: #0b1322; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 6px; white-space: nowrap; }
.bd { display: inline-block; width: 11px; height: 11px; border-radius: 4px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset; }
.vtag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ev); border: 1px solid var(--best-bd); border-radius: 6px; padding: 1px 7px; }
/* Mise conseillée (Kelly) — affichée uniquement sur le camp qui porte la value, juste à côté du
   tag « Valeur » : c'est là qu'on mise, l'info doit être au même endroit que la décision. */
.ktag { display: inline-block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 800; color: #04120b; background: var(--ev);
  border-radius: 6px; padding: 1px 7px; white-space: nowrap; }

/* 5 & 6 — fair Pinnacle + liquidité (TOUJOURS affichés, « — » / « n/a » si absents) */
.c-fair { grid-area: fair; min-width: 0; }
.c-liq { grid-area: liq; min-width: 0; text-align: right; }
.c-fair .k, .c-liq .k { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); display: none; margin-right: 5px; }
.c-fair .v, .c-liq .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px;
  font-weight: 700; color: var(--pinnacle); white-space: nowrap; }
.c-liq .v { color: var(--txt-2); }
.c-fair .v.off, .c-liq .v.off { color: #5d6b85; }

.chev { grid-area: chev; justify-self: end; font-size: 12px; color: var(--dim); border: 1px solid var(--line);
  background: #0b1322; border-radius: 8px; width: 24px; height: 24px; display: grid; place-items: center;
  transition: transform .18s ease; }
.row[open] .chev { transform: rotate(180deg); color: var(--cyan); border-color: rgba(34,200,255,.4); }

/* Tiroir : le détail des 5 bookmakers */
.rd { padding: 12px 14px 14px 17px; background: #090f1c; }
.rdh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-bottom: 9px; }
.rdt { font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-2); }
.rds { font-size: 12.5px; color: var(--dim); }
.rdf { margin: 10px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.rdf b { color: var(--txt); font-weight: 750; }
.rdf b.pos { color: var(--ev); }
/* Meilleure cote dans le tiroir : vert franc quand elle BAT le fair (= value). */
.btable td.best { color: #fff; box-shadow: inset 0 0 0 999px var(--best-fill), inset 0 0 0 1px var(--best-bd); }
.btable td.best.valu { box-shadow: inset 0 0 0 999px rgba(0,227,122,.28), inset 0 0 0 1px var(--best-bd); }
.btable td.noref { text-align: center; color: #8892a4; font-family: var(--sans); font-weight: 700;
  font-size: 12.5px; background-color: rgba(136,146,164,.05); }
.btable tr.refrow td.bk em { font-style: normal; font-size: 12px; font-weight: 600; text-transform: none;
  color: #5d6b85; margin-left: 6px; }

@media (max-width: 1080px) {
  .listwrap { --grid: 96px minmax(150px,1fr) minmax(150px,1fr) 26px; }
  .rhead { display: none; }
  .rl { grid-template-areas: "st ctx ctx chev" "st oa ob chev" "st fair liq chev"; row-gap: 8px; }
  .c-st { align-self: start; padding-top: 2px; }
  .c-fair .k, .c-liq .k { display: inline; }
  .c-liq { text-align: left; }
}
@media (max-width: 640px) {
  .listwrap { --grid: 1fr 1fr; }
  .rl { grid-template-areas: "st ctx" "oa ob" "fair liq"; padding: 11px 12px 12px 14px; row-gap: 9px; }
  .c-st { align-self: center; padding-top: 0; }
  .c-ctx { text-align: right; padding-right: 26px; }
  .chev { position: absolute; top: 11px; right: 10px; }
  .onum { font-size: 18px; }
}

/* ── Paiement : bouton secondaire (PayPal) sous le bouton carte ── */
.pw-cta.pw-alt { background: transparent; color: var(--txt-2); border: 1px solid var(--line);
  margin-top: 8px; font-weight: 700; }
.pw-cta.pw-alt:hover { border-color: var(--stroke-2, #2c3c5e); color: var(--txt); }
/* Moyen de paiement affiché sur chaque abonné (panneau admin). */
.ar-plan { display: inline-block; margin-left: 7px; font-size: 12px; font-weight: 700;
  color: var(--dim); background: #0b1322; border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 0 6px; }
/* Sélecteur de moyen de paiement dans le formulaire d'attribution d'accès. */
.admin-grant select { background: #0b1322; color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px; }

/* Journal des connexions (panneau admin) */
.admin-mini{background:#111a2c;color:#c9d6ee;border:1px solid #22304a;border-radius:8px;
  font-size:12px;padding:2px 6px;margin-left:8px;float:right}
.lg-warn{color:#ffb020}

/* Mes appareils (menu compte) */
.acct-dev-list{margin:8px 0}
.acct-dev-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:12.5px;padding:5px 8px;border-radius:8px;background:#101a2b;margin-bottom:5px}
.acct-dev-row.cur{background:#12241c;border:1px solid #1d4433}