:root {
  color-scheme: dark;

  /* Les jetons de landing.css, mot pour mot. Une seule source pour les deux
     cotes du site : si la marque change de couleur, elle change ici et la. */
  --navy:#071b36; --navy-2:#0d2d56; --navy-3:#0a2244;
  --blue:#1769aa; --sky:#5ab6e6;
  --red:#e3263f; --red-dark:#b61731;
  --cream:#f8f5ec; --paper:#f0ede5;
  --muted-dark:#a8bdd4;

  /* Les noms que l application utilise deja, poses sur les jetons ci-dessus.
     --line-strong, --muted-2, --surface : appeles par styles.css sans avoir
     jamais ete definis. Une variable absente ne fait pas d erreur, elle rend
     la propriete muette — c est ce qui rendait du texte invisible. */
  --ink:#f8f5ec;
  --muted:#a8bdd4;
  --muted-2:#8ba4c2;
  --surface:#0a2244;
  --surface-2:#0d2d56;
  --line:rgba(248,245,236,.18);
  --line-strong:rgba(248,245,236,.30);
  --accent:#5ab6e6;
  --accent-2:#5ab6e6;
  --danger:#ff8fa3;
  --shadow:0 26px 60px rgba(1,13,33,.35);

  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* BaseOdds — espace privé
   Même palette que la page publique, proportions inversées : le marine et le crème
   structurent, le ciel porte les données, le rouge est réservé aux alertes et
   aux actions destructives. Un tableau de statistiques ne se lit pas comme une
   page d'accueil. */

/* bloc :root neutralise le 2026-08-27 : il redefinissait
   des jetons apres le bloc principal, donc il gagnait.
:root {
  --navy: #071b36;
  --navy-2: #0d2d56;
  --navy-3: #0a2244;
  --blue: #1769aa;
  --sky: #5ab6e6;
  --red: #e3263f;
  --red-dark: #b61731;
  --cream: #f8f5ec;
  --paper: #f0ede5;
  --ink: #10243a;
  --muted: #a8bdd4;
  --muted-2: #8ba4c2;
  --line: rgba(248, 245, 236, .14);
  --line-strong: rgba(248, 245, 236, .26);
  --shadow: 0 22px 50px rgba(1, 13, 33, .38);

  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
} */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 3px;
}

.eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky);
}

.muted { color: var(--muted); font-size: .92rem; }
.sub { font-size: .8rem; color: var(--muted-2); margin-top: 3px; }

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 0; }
h2 { font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 14px; }

.error {
  color: #ff8fa3;
  background: rgba(227, 38, 63, .12);
  border: 1px solid rgba(227, 38, 63, .4);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: .89rem;
  margin: 14px 0 0;
}

/* ---------- connexion ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(720px 420px at 50% -12%, rgba(23, 105, 170, .34), transparent 62%),
    var(--navy);
}

.auth-card {
  width: min(430px, 100%);
  padding: 38px 34px 34px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--navy-3);
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.85rem; margin: 10px 0 6px; }
.auth-card .muted { margin: 0 0 24px; }

.form-grid { display: grid; gap: 15px; }
.form-grid label { display: grid; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.form-grid input {
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(7, 27, 54, .7);
  color: var(--cream);
}
.form-grid input:focus-visible { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }

/* ---------- boutons ---------- */
.button {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 19px;
  font-size: .92rem;
  font-weight: 650;
  background: var(--blue);
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
  transition: background .16s, border-color .16s;
}
.button:hover { background: #1769aa; }

.button.secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--cream);
}
.button.secondary:hover { background: rgba(248, 245, 236, .08); border-color: var(--sky); }

.button.danger {
  background: transparent;
  border-color: rgba(227, 38, 63, .5);
  color: #ff8fa3;
}
.button.danger:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
/* ---------- ossature ---------- */
.shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  background: var(--navy-3);
  border-right: 1px solid var(--line);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand-mark { display: block; width: 40px; height: 40px; flex: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; }

.side .brand { display: flex; align-items: center; gap: 11px; }
.side .brand > div { display: grid; gap: 2px; min-width: 0; }
.side .brand strong { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; }

.auth-card .brand-mark { width: 64px; height: 64px; margin-bottom: 20px; }

.nav { display: grid; gap: 3px; }
.nav button {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--muted);
  font-size: .94rem;
  font-weight: 550;
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nav button:hover { background: rgba(248, 245, 236, .06); color: var(--cream); }
.nav button.active {
  background: rgba(90, 182, 230, .12);
  color: var(--cream);
  border-left-color: var(--sky);
  font-weight: 650;
}

.side-footer {
  margin-top: auto;
  font-size: .78rem;
  color: var(--muted-2);
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.content { padding: 26px clamp(20px, 3vw, 38px) 48px; min-width: 0; }

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.account {
  text-align: right;
  font-size: .84rem;
  color: var(--muted);
  display: grid;
  gap: 4px;
  justify-items: end;
}
.account strong { display: block; color: var(--cream); font-size: .95rem; }

/* ---------- indicateurs de tête ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.metric {
  background: var(--navy-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}
.metric span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.metric strong {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
/* ---------- panneaux ---------- */
.panel {
  background: var(--navy-3);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 22px;
  margin-bottom: 20px;
}
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.two-col .panel { margin-bottom: 0; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.filter-row label {
  display: grid;
  gap: 6px;
  font-size: .78rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: .02em;
}
.filter-row select,
.filter-row input {
  padding: 10px 13px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(7, 27, 54, .7);
  color: var(--cream);
  min-width: 190px;
}

.notice {
  background: rgba(23, 105, 170, .14);
  border: 1px solid rgba(90, 182, 230, .32);
  border-left: 3px solid var(--sky);
  border-radius: 0 9px 9px 0;
  padding: 14px 17px;
  font-size: .89rem;
  color: var(--muted);
}
.notice strong { color: var(--cream); }

.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted-2);
  font-size: .93rem;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}

/* ---------- tableaux ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .91rem;
}
th {
  text-align: left;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
tbody tr:hover td { background: rgba(248, 245, 236, .035); }

.player { color: var(--cream); font-weight: 650; letter-spacing: -.005em; }

.probability {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

/* ---------- pastilles de confiance ---------- */
.pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .28em .7em;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill.high { background: rgba(90, 182, 230, .18); color: #8fd3f4; border-color: rgba(90, 182, 230, .42); }
.pill.medium { background: rgba(23, 105, 170, .2); color: #a8bdd4; border-color: rgba(23, 105, 170, .5); }
.pill.low { background: rgba(248, 245, 236, .07); color: var(--muted-2); border-color: var(--line-strong); }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions .button { padding: 7px 13px; font-size: .82rem; }

/* ---------- adaptations ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    overflow-x: auto;
  }
  .nav { grid-auto-flow: column; gap: 4px; }
  .nav button { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav button.active { border-left: none; border-bottom-color: var(--sky); }
  .side-footer { display: none; }
  .top { flex-direction: column; }
  .account { text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .nav button { transition: none; }
}

/* ===== BASEODDS V3 — selecteur d'actions et fiche joueur ===== */

/* ---------- onglets de categorie ---------- */

.selector .tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.selector .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .01em;
  transition: background .15s, border-color .15s, color .15s;
}
.selector .tab:hover {
  background: rgba(248, 245, 236, .06);
  border-color: var(--sky);
  color: var(--cream);
}
.selector .tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--cream);
}
.tab-count {
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(7, 27, 54, .45);
  color: inherit;
}
.selector .tab.active .tab-count { background: rgba(7, 27, 54, .38); }

/* ---------- pastilles de seuil ---------- */

.thresholds {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.thresholds-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: 4px;
}
.chip {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(7, 27, 54, .5);
  color: var(--cream);
  font-size: .84rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s;
}
.chip:hover { border-color: var(--sky); background: rgba(23, 105, 170, .2); }
.chip.active {
  background: var(--blue);
  border-color: var(--blue);
}
.chip-sub {
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: .01em;
}
.chip.active .chip-sub { color: rgba(248, 245, 236, .78); }

/* ---------- modele probabiliste ---------- */

.model-note {
  margin: 16px 0 0;
  font-size: .85rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pill.model {
  background: rgba(23, 105, 170, .18);
  border: 1px solid rgba(90, 182, 230, .35);
  color: var(--sky);
  text-transform: none;
  letter-spacing: .02em;
}
.pill.model-convolution {
  background: rgba(227, 38, 63, .13);
  border-color: rgba(227, 38, 63, .35);
  color: #f47186;
}
.pill.model-poisson {
  background: rgba(248, 245, 236, .09);
  border-color: var(--line-strong);
  color: var(--cream);
}

/* ---------- lien vers la fiche joueur ---------- */

.link-player {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--cream);
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.link-player:hover {
  color: var(--sky);
  border-bottom-color: var(--sky);
}

/* ---------- fiche joueur : cartes d'action ---------- */

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.market-card {
  background: rgba(7, 27, 54, .55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.market-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.market-card h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.seuils { display: grid; gap: 9px; }
.seuil-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.seuil-head strong {
  color: var(--cream);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(248, 245, 236, .1);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
}
.market-card details { margin-top: 2px; }
.market-card summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 650;
  color: var(--sky);
  letter-spacing: .02em;
}
.market-card details p {
  margin: 9px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- fiche joueur : statistiques de saison ---------- */

.stat-panel h3 {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  /* Le fond porte la couleur du panneau : la derniere rangee incomplete
     se fond alors dans la carte au lieu de laisser un bloc vide. */
  background: var(--navy-3);
}
.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
}
.stat-line span { color: var(--muted-2); }
.stat-line strong {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

@media (max-width: 720px) {
  .selector .tabs { gap: 6px; }
  .selector .tab { padding: 8px 12px; font-size: .82rem; }
  .market-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ===== BASEODDS — equipes et effectifs (espace prive) =====
   N utilise que les variables definies dans :root plus haut. */

.division { margin-top: 22px; }
.division:first-of-type { margin-top: 14px; }
.division h3 {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.team-grid {
  display: grid;
  /* Une division compte cinq equipes : viser cinq colonnes sur large ecran. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.team-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.team-card:hover {
  border-color: var(--accent);
  background: #123a68;
  transform: translateY(-1px);
}
.team-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.team-card .abbr {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 10px;
  background: rgba(90, 182, 230, .12);
  color: var(--accent);
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .04em;
}
.team-card .team-name {
  font-weight: 750;
  font-size: .96rem;
  line-height: 1.25;
}
.team-card .sub { margin-top: 0; font-size: .75rem; line-height: 1.35; }

/* Le compte de joueurs a cote du titre de poste. */
h2 .count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(90, 182, 230, .13);
  color: var(--accent-2);
  font-size: .74rem;
  font-weight: 800;
  vertical-align: middle;
}

/* .link-player est deja defini plus haut : on ne le redefinit pas ici. */

/* Une barre qui ne contient qu un bouton de retour n a pas besoin
   de la hauteur d un panneau complet. */
.panel.slim { padding: 11px 13px; }

/* Une metrique dont la valeur est du texte, pas un nombre. */
.metric.text strong { font-size: 1.06rem; line-height: 1.3; margin-top: 9px; }

@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ===== BASEODDS — correctif couleur des cartes d equipe =====
   styles.css contient deux blocs :root. Le second redefinit --ink en bleu
   fonce (#10243a). Ma carte d equipe s en servait pour la couleur de son
   texte, sur un fond fonce : le nom devenait illisible.
   On fixe donc les couleurs en dur ici, plutot que de dependre d une variable
   dont la valeur depend de l ordre des blocs dans le fichier. */

.team-card { color: #f8f5ec; }
.team-card .team-name { color: #f8f5ec; }
.team-card .sub { color: #a8bdd4; }
.team-card:hover .team-name { color: #5ab6e6; }
.division h3 { color: #5ab6e6; }
h2 .count { color: #5ab6e6; }

/* ===== BASEODDS — equipes cliquables dans les prochains matchs =====
   Couleurs en dur : styles.css contient deux blocs :root et --ink y change
   de valeur selon l ordre. Une variable n est pas fiable ici. */

.link-team {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 750;
  color: #f8f5ec;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.link-team:hover { color: #5ab6e6; border-bottom-color: #5ab6e6; }
.link-team:focus-visible { outline: 2px solid #5ab6e6; outline-offset: 2px; }
.arobase { color: #a8bdd4; padding: 0 4px; }

/* ===== BASEODDS — l ecart du duel, visible par ligne =====
   Couleurs en dur : styles.css contient deux blocs :root et --ink y change
   de valeur selon l ordre. */

.duel {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: help;
}
.duel.hausse { background: rgba(90, 182, 230, .14); color: #8fd3f4; }
.duel.baisse { background: rgba(227, 38, 63, .13); color: #ffb0bd; }
.duel.neutre { background: rgba(90, 182, 230, .12); color: #9ed4f2; }

.chip.duel-filter {
  align-self: end;
  border: 1px solid rgba(248, 245, 236, .26);
  border-radius: 9px;
  padding: 10px 14px;
  background: transparent;
  color: #a8bdd4;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.chip.duel-filter:hover { border-color: #5ab6e6; color: #f8f5ec; }
.chip.duel-filter.active {
  background: rgba(90, 182, 230, .16);
  border-color: #5ab6e6;
  color: #8fd3f4;
}

/* ===== BASEODDS — le partant adverse, cliquable dans le classement =====
   La regle est plus specifique que le .link-player general : la pastille
   garde sa couleur, seul le soulignement signale le lien. */

.duel .link-player.duel-lien {
  font: inherit;
  font-weight: 800;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.duel .link-player.duel-lien:hover { color: #f8f5ec; text-decoration-thickness: 2px; }
.duel .link-player.duel-lien:focus-visible { outline: 2px solid #f8f5ec; outline-offset: 2px; }

/* ===== BASEODDS — page de methodologie =====
   Couleurs en dur : styles.css contient deux blocs :root et --ink y change de
   valeur selon l ordre. */

.panel.doc { line-height: 1.62; }
.panel.doc h2 {
  margin: 0 0 14px;
  font-size: 1.18rem;
  color: #f8f5ec;
}
.panel.doc h3 {
  margin: 24px 0 8px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5ab6e6;
}
.panel.doc p { margin: 0 0 12px; color: #cbdaeb; }
.panel.doc p.muted { color: #a8bdd4; font-size: .9rem; }
.panel.doc ul { margin: 0 0 12px; padding-left: 20px; color: #cbdaeb; }
.panel.doc li { margin-bottom: 5px; }
.panel.doc strong { color: #f8f5ec; }
.panel.doc em { color: #cbdaeb; font-style: italic; }
.panel.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(90, 182, 230, .1);
  color: #9ed4f2;
}

.formule {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 3px solid #5ab6e6;
  border-radius: 0 9px 9px 0;
  background: rgba(90, 182, 230, .07);
  color: #d5e6f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
}

.doc-table { font-size: .88rem; }
.doc-table th { white-space: nowrap; }
.doc-table td { vertical-align: top; }
.doc-table code { font-size: .8em; }
.doc-table .sub { margin-top: 4px; }
.doc-table .oui { color: #8fd3f4; font-weight: 800; }
.doc-table .non { color: #8ba4c2; }

.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

@media (max-width: 700px) {
  .formule { font-size: .8rem; }
}

/* ===== BASEODDS — veille et etat du systeme (administration) =====
   Couleurs en dur : styles.css contient deux blocs :root et --ink y change de
   valeur selon l ordre. */

.etat-ok, .etat-mal {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 11px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 800;
  vertical-align: middle;
}
.etat-ok { background: rgba(90, 182, 230, .15); color: #8fd3f4; }
.etat-mal { background: rgba(227, 38, 63, .15); color: #ffb0bd; }

.alertes {
  margin: 0 0 16px;
  padding: 12px 14px 12px 32px;
  border-left: 3px solid #ff8fa3;
  border-radius: 0 9px 9px 0;
  background: rgba(227, 38, 63, .08);
  color: #ffd7dd;
  line-height: 1.55;
}
.alertes li { margin-bottom: 6px; }

.veille-grille, .sys-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.veille-carte, .sys-bloc {
  padding: 13px 15px;
  border: 1px solid rgba(248, 245, 236, .14);
  border-radius: 12px;
  background: #0d2d56;
}
.veille-carte.mal { border-color: #ff8fa3; background: rgba(227, 38, 63, .07); }
.veille-carte h3, .sys-bloc h3 {
  margin: 0 0 8px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5ab6e6;
}
.veille-carte.mal h3 { color: #ffb0bd; }
.veille-carte .sub { margin-top: 3px; color: #a8bdd4; font-size: .84rem; line-height: 1.45; }

.sys-titre { margin-top: 26px; }
.sys-table { font-size: .82rem; table-layout: fixed; width: 100%; }
.sys-table td { padding: 6px 8px; border-bottom: 1px solid rgba(248, 245, 236, .08); vertical-align: top; }
.sys-table td:first-child { color: #a8bdd4; padding-right: 14px; width: 42%; }
.sys-table tr:last-child td { border-bottom: 0; }
.sys-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
  color: #d5e6f5;
  background: none;
  padding: 0;
  word-break: break-word;
}

@media (max-width: 560px) {
  .veille-grille, .sys-grille { grid-template-columns: 1fr; }
}

/* ===== BASEODDS — le guide dans l espace prive =====
   Memes classes que la page publique, couleurs de l application. En dur :
   styles.css contient deux blocs :root et --ink y change de valeur. */

.guide-prive .guide-intro { font-size: 1.02rem; line-height: 1.65; color: #cbdaeb; margin: 0 0 22px; }
.guide-prive .guide-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.guide-prive .guide-sommaire a {
  padding: 6px 12px;
  border: 1px solid rgba(248, 245, 236, .2);
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 650;
  color: #a8bdd4;
  text-decoration: none;
}
.guide-prive .guide-sommaire a:hover { border-color: #5ab6e6; color: #f8f5ec; }
.guide-prive .guide-section { margin: 0 0 34px; scroll-margin-top: 20px; }
.guide-prive .guide-section h2 { margin: 0 0 12px; font-size: 1.22rem; color: #f8f5ec; }
.guide-prive .guide-section p { margin: 0 0 12px; line-height: 1.66; color: #cbdaeb; }
.guide-prive .guide-section ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.66; color: #cbdaeb; }
.guide-prive .guide-section li { margin-bottom: 7px; }
.guide-prive .guide-section strong { color: #f8f5ec; }
.guide-prive .guide-note {
  padding: 12px 15px;
  border-left: 3px solid #5ab6e6;
  border-radius: 0 9px 9px 0;
  background: rgba(90, 182, 230, .07);
  color: #cbdaeb;
  font-size: .92rem;
}
.guide-prive .guide-def { margin: 0 0 12px; }
.guide-prive .guide-def dt { margin-top: 14px; font-weight: 750; color: #5ab6e6; }
.guide-prive .guide-def dd { margin: 4px 0 0; line-height: 1.6; color: #cbdaeb; }


/* ===== BASEODDS — palette du site public =====
   Ce bloc ne touche qu aux elements dont la FORME change, pas seulement la
   couleur : le bouton principal (turquoise plein -> rouge du site), le panneau
   lateral (qui recoit la marque) et les champs de saisie. Tout le reste a ete
   converti par la table de correspondance et n a rien a faire ici.

   On y ecrit avec les variables et non plus en dur : le :root fait desormais
   autorite, la raison qui obligeait a figer les couleurs a disparu. */

/* Le fond : le marine du site, avec la meme lueur haute que la page d accueil. */
body {
  background:
    radial-gradient(circle at 15% -10%, rgba(23, 105, 170, .55), transparent 42%),
    var(--navy);
}

/* Le bouton principal est celui du site public : rouge, texte creme, meme
   ombre portee. C est le seul rouge de l interface — il ne doit donc jamais
   servir a autre chose qu a l action principale d un ecran. */
.button {
  background: var(--red);
  color: var(--cream);
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 650;
  box-shadow: 0 10px 26px rgba(227, 38, 63, .28);
}
.button:hover { background: var(--red-dark); filter: none; }
.button.secondary {
  background: transparent;
  color: var(--cream);
  border-color: var(--line);
  box-shadow: none;
}
.button.secondary:hover { border-color: var(--sky); background: rgba(90, 182, 230, .1); }
/* Le bouton destructeur reste creux : il ne doit pas ressembler au bouton
   principal, qui vient justement de devenir rouge lui aussi. */
.button.danger {
  background: transparent;
  border-color: rgba(227, 38, 63, .55);
  color: #ff8fa3;
  box-shadow: none;
}
.button.danger:hover { background: rgba(227, 38, 63, .13); border-color: var(--red); }

/* La table de correspondance envoie le turquoise ET le bleu clair vers le meme
   ciel : les pastilles « confiance elevee » et « moderee » deviendraient
   indiscernables. On leur redonne trois teintes distinctes — ciel, creme,
   ambre — et l ordre reste lisible sans lire l etiquette. */
.pill.high { background: rgba(90, 182, 230, .16); color: #8fd3f4; }
.pill.medium { background: rgba(248, 245, 236, .13); color: #dce5ef; }
.pill.low { background: rgba(255, 180, 94, .14); color: #ffd09a; }

/* Champs de saisie : fond marine, halo ciel a la mise au point. */
input, select { background: var(--navy); }
input:focus, select:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(90, 182, 230, .18);
}

/* Le panneau lateral, et la marque dedans. Le dessin vient de marque.js,
   lui-meme extrait de la page publique. */
.side { background: rgba(7, 27, 54, .92); }

.side .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 22px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.side .brand-mark { display: block; width: 38px; height: 38px; flex: none; }
.side .brand-mark svg { display: block; width: 100%; height: 100%; }
/* Repli : si la page publique porte encore une marque en texte, on lui donne
   au moins la pastille rouge plutot que deux lettres nues. */
.side .brand-mark-texte {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--red);
  color: var(--cream);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;
}
.side .brand-mots { display: block; min-width: 0; }
.side .brand-nom {
  display: block;
  color: var(--cream);
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.side .brand-sous {
  display: block;
  margin-top: 3px;
  color: var(--muted-dark);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* La navigation reprend le trait ciel du menu public : soulignement a
   l entree, fond plein pour l onglet courant. */
.nav button { border-left: 2px solid transparent; border-radius: 0 9px 9px 0; }
.nav button:hover { background: rgba(90, 182, 230, .1); color: var(--cream); }
.nav button.active {
  background: rgba(90, 182, 230, .14);
  border-left-color: var(--sky);
  color: var(--cream);
}

/* Cartes : le meme voile que .glass-card cote public, sans le flou — il coute
   cher a l affichage sur un tableau de plusieurs centaines de lignes. */
.metric, .panel {
  background: linear-gradient(135deg, rgba(13, 45, 86, .74), rgba(10, 34, 68, .74));
  border-color: var(--line);
}
.auth-card { background: rgba(13, 45, 86, .74); border-color: var(--line); }

/* Les liens de l application prennent le ciel du site. */
.content a { color: var(--sky); }
.content a:hover { color: var(--cream); }

@media (max-width: 900px) {
  .side .brand { padding: 0 0 12px; }
}

/* ===== BASEODDS — le selecteur de langue =====
   Exactement le bouton .language du site public : meme pilule, meme
   bordure, meme survol ciel. Il n y a aucune raison qu il differe. */
.side .language {
  display: block;
  margin: 0 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.side .language:hover { border-color: var(--sky); background: rgba(90, 182, 230, .1); }


/* ===== BASEODDS — logos d equipe et photos de joueur =====
   Tailles fixes et flex:none : une image qui arrive apres le texte ne
   doit pas faire sauter la ligne deja lue. */
.logo-eq { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px;
  margin-right: 7px; flex: none; }
.logo-eq-place { display: inline-block; }
.team-card .abbr { display: grid; place-items: center; }
.team-card .abbr .logo-eq { width: 36px; height: 36px; margin: 0; vertical-align: middle; }
.photo-joueur { width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--navy-3); border: 1px solid var(--line); vertical-align: -13px;
  margin-right: 13px; flex: none; }
.photo-mini { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  background: var(--navy-3); border: 1px solid var(--line); vertical-align: -9px;
  margin-right: 9px; flex: none; }
@media (max-width: 560px) {
  .photo-joueur { width: 36px; height: 36px; vertical-align: -10px; margin-right: 9px; }
  .photo-mini { display: none; }
}


/* ===== BASEODDS — la marque sur les cartes d authentification =====
   Meme dessin que partout ailleurs, pose au-dessus du titre. Le repli en
   texte reprend la pastille rouge, comme dans le panneau lateral. */
.auth-card { position: relative; }
.auth-marque { display: block; width: 52px; height: 52px; margin-bottom: 18px; }
.auth-marque .brand-mark { display: block; width: 100%; height: 100%; }
.auth-marque .brand-mark svg { display: block; width: 100%; height: 100%; }
.auth-marque .brand-mark-texte {
  display: grid; place-items: center; border-radius: 14px;
  background: var(--red); color: var(--cream); font-weight: 800; font-size: 1.1rem;
}
/* .language n est stylee que dans le panneau lateral et dans landing.css :
   sur cette carte le bouton retombait sur l apparence par defaut du
   navigateur, gris et plein. On lui donne ici la meme pilule que sur le
   site public. */
.auth-langue {
  position: absolute; top: 20px; right: 20px;
  background: transparent; border: 1px solid var(--line); color: var(--cream);
  border-radius: 999px; padding: 6px 13px; font-size: .78rem; font-weight: 650;
  letter-spacing: .06em; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.auth-langue:hover { border-color: var(--sky); background: rgba(90, 182, 230, .1); }


/* ===== BASEODDS — le mot de passe temporaire =====
   Il ne s affiche qu une fois : il doit se voir, se selectionner d un
   clic, et ne pas se confondre avec le reste de l ecran. */
.mdp-bloc {
  margin: 0 0 20px; padding: 16px 18px; border-radius: 13px;
  border: 1px solid rgba(90, 182, 230, .45); background: rgba(90, 182, 230, .10);
}
.mdp-texte { margin: 6px 0 12px; line-height: 1.55; font-size: .92rem; }
.mdp-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mdp-valeur {
  /* user-select: all — un seul clic selectionne la valeur entiere. */
  user-select: all; -webkit-user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; letter-spacing: .04em; color: var(--cream);
  background: var(--navy); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 14px; word-break: break-all;
}
.mdp-etat { margin: 10px 0 0; font-size: .85rem; color: var(--sky); min-height: 1.2em; }
@media (max-width: 560px) { .mdp-ligne { flex-direction: column; align-items: stretch; } }


/* ===== BASEODDS — colonne de nombres =====
   Chiffres alignes a droite et a chasse fixe : on compare une colonne
   de nombres du regard, pas en la lisant. */
.nombre { text-align: right; font-variant-numeric: tabular-nums; }


/* ===== BASEODDS — barre de filtre =====
   Elle reste en place pendant que le tableau se redessine : c est ce qui
   permet de continuer a taper sans perdre le curseur. */
.filtre-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 16px; }
.filtre-barre input[type="search"] { flex: 1 1 260px; min-width: 0; }
.filtre-barre select { flex: 0 0 auto; }
.filtre-compte { color: var(--muted); font-size: .82rem;
  font-variant-numeric: tabular-nums; margin-left: auto; }
@media (max-width: 560px) {
  .filtre-barre { flex-direction: column; align-items: stretch; }
  .filtre-compte { margin-left: 0; }
}


/* ===== BASEODDS — l espace prive sur telephone =====
   La barre laterale devient un bandeau colle en haut, et la navigation passe
   derriere un bouton. Auparavant les sept entrees defilaient horizontalement :
   « Administration » etait hors de l ecran, derriere un defilement invisible. */

.side-actions { display: flex; align-items: center; gap: 9px; }
.app-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--cream);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.app-menu svg { width: 18px; height: 13px; display: block; }
.app-menu svg rect { fill: currentColor; }
.app-menu:hover { border-color: var(--sky); background: rgba(90, 182, 230, .1); }
.app-menu[aria-expanded="true"] { border-color: var(--sky); background: rgba(90, 182, 230, .14); }

/* Un tableau de huit colonnes doit defiler a TOUTES les largeurs, pas
   seulement sous 560 px : entre 560 et 900 il debordait la page entiere. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* LA cause du defilement lateral de toute l application sur telephone : un
     element de grille ne retrecit pas sous la largeur minimale de son contenu.
     Un tableau de huit colonnes imposait donc sa largeur — 972 px mesures sur
     un ecran de 390 — a la page entiere, bandeau du haut compris, ce qui
     poussait le bouton de menu hors de l ecran. minmax(0, 1fr) et min-width: 0
     autorisent enfin le retrecissement, et le defilement retourne la ou il
     doit etre : dans le tableau seul. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .content, .panel, .metric, .top, .table-wrap { min-width: 0; }

  .side {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(7, 27, 54, .96);
    backdrop-filter: blur(14px);
  }
  .side .brand {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-bottom: 0;
  }
  .side .language { margin: 0; }
  .app-menu { display: inline-flex; }

  /* Le panneau n est PAS positionne en absolu : .side passe en retour a la
     ligne et grandit sur place. Deux blocs absolus au meme top:100% — la
     navigation et l avertissement — se seraient superposes. */
  .side.menu-ouvert { flex-wrap: wrap; }
  .side .nav { display: none; }
  .side.menu-ouvert .nav {
    display: grid;
    /* La regle d origine met la navigation en quatre colonnes qui defilent :
       il faut la neutraliser explicitement, sinon les entrees restent
       tronquees dans le panneau. */
    grid-template-columns: 1fr;
    overflow-x: hidden;
    gap: 0;
    order: 3;
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    max-height: 60vh;
    overflow-y: auto;
  }
  .side.menu-ouvert .nav button {
    padding: 14px 4px;
    font-size: 1rem;
    border-radius: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .side.menu-ouvert .nav button:last-of-type { border-bottom: 0; }

  /* L avertissement etait purement masque sur mobile. Un avertissement qu on
     cache sur la moitie des ecrans n en est plus un : il reparait ici. */
  .side-footer { display: none; }
  .side.menu-ouvert .side-footer {
    display: block;
    order: 4;
    width: 100%;
    margin: 0;
    padding: 12px 4px 4px;
  }

  .content { padding: 22px 16px 40px; }
  .top { display: block; }
  .account { text-align: left; margin-top: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .side { padding: 10px 14px; }
  .side .brand-nom { font-size: .98rem; }
  .side .brand-mark { width: 32px; height: 32px; }
  .content { padding: 20px 14px 40px; }
  h1 { font-size: 1.5rem; }
  .stats { grid-template-columns: 1fr; }
}

/* ===== BASEODDS — le menu mobile s empile =====
   « display: flex » rend « grid-template-columns » sans effet : le
   resultat ne depend plus de quelle regle l emporte sur l autre. La
   feuille d origine peut continuer a demander quatre colonnes, elles ne
   s appliqueront pas. */
@media (max-width: 900px) {
  .side.menu-ouvert .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .side.menu-ouvert .nav button {
    width: 100%;
    text-align: left;
    white-space: normal;
  }
}

/* ===== BASEODDS — listes numerotees de la documentation ===== */
.panel.doc ol { margin: 0 0 12px; padding-left: 22px; color: #c6d4e3; }
.panel.doc ol li { margin-bottom: 8px; }
.panel.doc ol li::marker { color: #8fc8ff; font-weight: 800; }

/* ===== BASEODDS — les onglets de l administration =====
   Colles en haut sur grand ecran : les quatre sections restent atteignables
   quelle que soit la position dans un tableau long. En mobile la barre reste
   dans le flux : l en-tete lateral y est deja colle, et deux elements colles
   l un sur l autre se recouvrent. */
.onglets {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 45, 86, .82);
  backdrop-filter: blur(12px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.onglets .onglet {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.onglets .onglet:hover { color: var(--ink); background: rgba(248, 245, 236, .07); }
.onglets .onglet.actif { background: var(--blue); color: #fff; }
.onglets .badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}
.onglets .onglet.actif .badge { background: rgba(255, 255, 255, .26); }
.onglets .point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(227, 38, 63, .22);
}
/* En mobile la barre reste dans le flux et les quatre onglets se repartissent
   sur la largeur, en passant a la ligne s il le faut. Les laisser defiler
   horizontalement cacherait le quatrieme hors de l ecran — un onglet qu on ne
   voit pas est un onglet qui n existe pas. */
@media (max-width: 900px) {
  .onglets {
    position: static;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .onglets .onglet {
    flex: 1 1 40%;
    justify-content: center;
    padding: 10px;
  }
}
/* ===== BASEODDS — les matchs en direct ===== */
.direct-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.direct-carte {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 45, 86, .45);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.direct-carte:hover { border-color: var(--line-strong); background: rgba(13, 45, 86, .75); }
.direct-carte.live { border-left: 3px solid var(--red); }
.direct-carte.final { opacity: .72; }
.direct-eq {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  color: var(--muted);
}
.direct-eq.devant { color: var(--ink); }
.direct-eq .logo-eq { width: 24px; height: 24px; }
.direct-abbr { flex: 1 1 auto; font-weight: 800; letter-spacing: .04em; }
.direct-points { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.direct-score.gros .direct-eq { padding: 7px 0; }
.direct-score.gros .direct-eq .logo-eq { width: 34px; height: 34px; }
.direct-score.gros .direct-points { font-size: 1.7rem; }
.direct-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.direct-etat { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; }
.direct-etat.vivant { color: #ff8fa3; }
.direct-etat.fini { color: var(--muted-2); }
.direct-etat.attente { color: var(--muted); font-weight: 700; }
.direct-compte { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.pouls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: pouls 1.6s ease-in-out infinite;
}
@keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pouls { animation: none; } }

.direct-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.direct-tete .direct-score { flex: 0 1 320px; min-width: 220px; }
h3 .count { color: var(--accent); }
.direct-situation { display: flex; flex-direction: column; gap: 5px; text-align: right; }

.direct-barre { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 14px; }
.direct-recherche, .direct-barre select {
  flex: 1 1 190px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(7, 27, 54, .6);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
}
.direct-barre select { flex: 0 1 190px; }

.direct-fil { list-style: none; margin: 0; padding: 0; }
.direct-action {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.direct-action:last-child { border-bottom: 0; }
.direct-action.point { background: rgba(227, 38, 63, .07); }
.direct-manche {
  flex: 0 0 44px;
  color: var(--muted-2);
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.direct-fait { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.direct-evenement { color: var(--accent); font-weight: 800; font-size: .82rem; }
.direct-desc { color: var(--ink); font-size: .92rem; }
.direct-tableau {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.direct-ind {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(143, 200, 255, .12);
  color: #b7dcff;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.direct-ind.atteint { background: rgba(88, 208, 188, .16); color: #7ce7d5; }
.photo-mini { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }

@media (max-width: 700px) {
  .direct-situation { text-align: left; }
  .direct-barre select { flex: 1 1 100%; }
}

/* ===== Series eliminatoires : debut (bloc 144) ===== */
/* Les series eliminatoires.
   Texte secondaire en opacite plutot qu en couleur : la palette a deux gris
   (--muted fond clair, --muted-dark fond sombre) et l opacite marche sur les
   deux. Bordures : var(--line) d abord pour tous, puis un color-mix qui
   s adapte au fond la ou il est reconnu. */

.series-tete { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.saisons { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.saison { padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: .7; font: inherit; cursor: pointer; }
.saison:hover { opacity: 1; }
.saison.actif { background: var(--blue); color: var(--cream); opacity: 1; }

.tableau-series { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
.ronde h3 { margin: 0 0 10px; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--sky); }

.serie { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--line); border-color: color-mix(in srgb, currentColor 20%, transparent); border-radius: 12px; }
.serie-close { opacity: .68; }
/* Avant le debut des series, TOUTES les equipes sont des espaces reserves :
   a .45 c est la page entiere qui semblait eteinte. .7 dit « pas encore
   determine » sans donner l impression d un ecran en panne. */
.serie-reserve { opacity: .7; }

.serie-tete { display: grid; gap: 7px; }
.serie-camp { display: flex; align-items: center; gap: 9px; }
.serie-camp img { width: 22px; height: 22px; flex: 0 0 auto; }

/* LE JETON CLAIR DERRIERE LES LOGOS — regle GLOBALE, et assumee comme telle.
   Quatre logos sont invisibles sur --navy : leur teinte la plus claire a un
   rapport de contraste proche de 1 (Yankees #132448 -> 1.13, Padres #2f241c
   -> 1.14, Tigers #0c2c56 -> 1.24, Athletics #003831 -> 1.32). Trois autres
   frolent la limite. Ce defaut existe partout ou .logo-eq sert : effectifs,
   fiche joueur, En direct — pas seulement dans les series.
   box-sizing: border-box et object-fit: contain sont la pour qu AUCUNE mise
   en page ne bouge : la boite garde exactement sa taille, l image se range
   dedans. La regle d origine n est pas remplacee, elle est complete. */
.logo-eq { background: var(--cream); border-radius: 50%; padding: 2px;
  box-sizing: border-box; object-fit: contain; }
.camp-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-v { min-width: 1.4em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.camp-gagnant { font-weight: 700; }
.camp-perdant { opacity: .6; }

.serie-format { margin: 10px 0 2px; font-size: .78rem; opacity: .6; }
.serie-etat { margin: 4px 0; font-size: .85rem; }
.serie-live { color: var(--sky); }
.serie-finie { opacity: .65; }
.pastille-live { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--red); }

.serie-barre { display: flex; height: 6px; margin-top: 12px; border-radius: 3px; overflow: hidden; background: var(--line); background: color-mix(in srgb, currentColor 16%, transparent); }
.serie-barre span { display: block; height: 100%; background: var(--sky); }
.serie-chiffres { display: flex; justify-content: space-between; margin-top: 5px; font-size: .78rem; opacity: .75; font-variant-numeric: tabular-nums; }

/* Une serie terminee n a plus de probabilite : afficher « 0 % / 100 % »
   quand le vainqueur est connu, c est du theatre. Le nom suffit. */
.serie-close .serie-barre, .serie-close .serie-chiffres { display: none; }

.serie-mouvement { margin: 9px 0 0; font-size: .82rem; }
.serie-muet { opacity: .6; }
.serie-delta { color: var(--sky); font-variant-numeric: tabular-nums; }

.serie-deroule { margin-top: 12px; }
.serie-deroule summary { font-size: .78rem; opacity: .6; cursor: pointer; }
.serie-deroule summary:hover { opacity: 1; }
.serie-matchs { margin: 9px 0 0; padding: 0; list-style: none; font-size: .82rem; }
.serie-matchs li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); border-top-color: color-mix(in srgb, currentColor 14%, transparent); }
.m-num { opacity: .5; font-variant-numeric: tabular-nums; }
.m-lieu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-score { font-variant-numeric: tabular-nums; }
.m-si, .m-date { opacity: .55; }
.m-live { color: var(--sky); }
.m-prevu { opacity: .7; }

.note-series { margin-top: 20px; font-size: .78rem; line-height: 1.55; opacity: .65; }
.note-source { margin-top: 6px; }
.avis-perime { margin-bottom: 12px; font-size: .8rem; color: var(--red); }

@media (max-width: 520px) {
  .tableau-series { grid-template-columns: 1fr; gap: 14px; }
  .serie { padding: 12px 13px; }
}
/* ===== Series eliminatoires : fin (bloc 144) ===== */

/* ===== Apercu du match : debut (bloc 162) ===== */
/* L apercu d un match. Deux cartes de meme poids, jamais un favori. */

.ap-avis { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--sky);
  border-radius: 0 10px 10px 0; background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: .86rem; line-height: 1.55; }
.ap-avis strong { display: block; margin-bottom: 4px; }

.ap-barre { display: flex; height: 8px; margin: 4px 0 6px; border-radius: 4px; overflow: hidden;
  background: var(--line); background: color-mix(in srgb, currentColor 16%, transparent); }
.ap-barre span { display: block; height: 100%; background: var(--sky); }
.ap-barre-chiffres { display: flex; justify-content: space-between; font-size: .8rem;
  opacity: .8; font-variant-numeric: tabular-nums; }
.ap-bilan { margin: 10px 0 20px; font-size: .82rem; opacity: .7; }

.ap-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; align-items: start; }
.ap-carte { padding: 16px 18px; border: 1px solid var(--line);
  border-color: color-mix(in srgb, currentColor 20%, transparent); border-radius: 12px; }

.ap-affiche { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 0 0 16px; font-size: 1.15rem; font-weight: 700; }
.ap-camp { display: inline-flex; align-items: center; }
.ap-quand { flex-basis: 100%; font-size: .8rem; font-weight: 400; opacity: .6; }

.ap-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ap-equipe { font-weight: 700; font-size: 1.02rem; }
.ap-role { margin-left: auto; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; opacity: .55; }
.ap-at { opacity: .45; font-weight: 400; }

.ap-ligne { display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-size: .86rem; border-top: 1px solid var(--line);
  border-top-color: color-mix(in srgb, currentColor 12%, transparent); }
.ap-ligne > span:first-child { flex: 1; opacity: .7; }
.ap-ligne strong { font-variant-numeric: tabular-nums; }
.ap-muet { opacity: .55; }

.ap-pastilles { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0 10px; }
.ap-pastille { padding: 3px 7px; border-radius: 5px; font-size: .72rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-pastille.gagne { background: color-mix(in srgb, var(--sky) 22%, transparent); }
.ap-pastille.perdu { background: color-mix(in srgb, var(--red) 18%, transparent); }

.ap-partant { margin: 8px 0 4px; font-size: .84rem; }
.ap-bras { margin-left: 6px; font-size: .74rem; opacity: .6; }

.ap-compte { margin: 16px 0 6px; font-size: .88rem; }
.ap-joueurs { margin: 0; padding: 0; list-style: none; }
.ap-joueur { display: grid; grid-template-columns: 1fr auto 4.4em 3.6em; gap: 8px;
  align-items: baseline; padding: 5px 0; font-size: .85rem;
  border-top: 1px solid var(--line);
  border-top-color: color-mix(in srgb, currentColor 10%, transparent); }
.ap-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ap-poste { font-size: .74rem; opacity: .55; }
.ap-prob { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-ecart { text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; }
.ap-ecart.haut { color: var(--sky); }
.ap-ecart.bas { opacity: .5; }

.ap-attente { margin: 14px 0 0; padding-left: 11px; font-size: .84rem; line-height: 1.5;
  opacity: .72; border-left: 2px solid var(--line);
  border-left-color: color-mix(in srgb, currentColor 22%, transparent); }

.ap-note { margin-top: 18px; font-size: .78rem; line-height: 1.55; opacity: .65; }
.lien-apercu { padding: 4px 11px; font-size: .76rem; }

@media (max-width: 560px) {
  .ap-cartes { grid-template-columns: 1fr; gap: 14px; }
  .ap-carte { padding: 13px 14px; }
  .ap-joueur { grid-template-columns: 1fr auto 4.2em 3.4em; }
}
/* ===== Apercu du match : fin (bloc 162) ===== */