/* Garde-fou : une règle d'auteur sur `display` passe toujours devant le style
   par défaut du navigateur pour `[hidden] { display: none }`. Sans cette
   règle, un élément dont une classe force `display` (ex. la feuille modale en
   flex) reste visible malgré l'attribut `hidden`. */
[hidden] {
  display: none !important;
}

/* Direction artistique : iOS clair, monochrome.
   Fond gris très clair + cartes blanches = listes groupées iOS (Réglages).
   Aucun accent coloré : la hiérarchie vient du contraste et de la
   typographie. Seule couleur conservée, sémantique : le rouge du direct. */
:root {
  --bg: #f2f2f7;          /* systemGroupedBackground */
  --card: #fff;
  --text: #000;
  --text-2: rgba(60, 60, 67, 0.6);   /* secondaryLabel */
  --text-3: rgba(60, 60, 67, 0.3);   /* tertiaryLabel */
  --separator: rgba(60, 60, 67, 0.18);
  --fill: rgba(118, 118, 128, 0.12); /* tertiarySystemFill */
  --live: #ff3b30;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Grand titre de navigation iOS */
.topbar {
  padding: 8px 16px 6px;
}

.topbar h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Segmented control iOS */
.segmented {
  display: flex;
  gap: 2px;
  margin: 8px 16px 4px;
  padding: 2px;
  background: var(--fill);
  border-radius: 9px;
}

.segmented__item {
  flex: 1;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 4px;
  white-space: nowrap;
}

.segmented__item.active {
  background: var(--card);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
}

main {
  padding: 12px 16px 44px;
}

.status {
  text-align: center;
  color: var(--text-2);
  padding: 40px 0;
  font-size: 15px;
}

/* --- Listes groupées iOS --- */

.group {
  margin-bottom: 26px;
}

.group__title {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 7px 16px;
}

/* Repère du jour courant dans le calendrier */
.group__title--today {
  color: var(--text);
  font-weight: 700;
}

.row--empty {
  color: var(--text-3);
  font-style: italic;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.group__footer {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  margin: 8px 16px 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  /* Séparateur en retrait à gauche, comme les listes iOS */
  box-shadow: inset 0 -0.5px 0 var(--separator);
}

.card > .row:last-child,
.card > *:last-child {
  box-shadow: none;
}

.row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row__title {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__sub {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__value {
  font-size: 17px;
  color: var(--text-2);
  white-space: nowrap;
}

.row__value--big {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.chevron {
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
}

/* --- Nav semaine --- */

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.week-nav button {
  background: var(--card);
  border: none;
  color: var(--text);
  border-radius: 8px;
  min-width: 44px;
  padding: 6px 0;
  font-size: 20px;
  line-height: 1.2;
  font-family: inherit;
}

.week-nav button:active {
  background: var(--fill);
}

#week-label {
  font-size: 15px;
  font-weight: 600;
}

/* --- Ligne de match --- */

.match-row {
  cursor: pointer;
  padding-right: 12px;
}

.match-row:active {
  background: var(--fill);
}

.match-row__time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 40px;
  flex-shrink: 0;
}

.match-row__time-label {
  font-size: 13px;
  color: var(--text-2);
}

.match-row__score {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
}

.match-row--live .match-row__score {
  color: var(--live);
}

.match-row__teams {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-row__team {
  font-size: 15px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-badge {
  font-size: 11px;
  color: var(--text-2);
  background: var(--fill);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}

/* --- Grille --- */

.grille-status {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 12px;
}

.grille-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 14px;
}

#grille-count {
  background: var(--card);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 15px;
  font-family: inherit;
}

.grille-legend__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pick-badge {
  min-width: 24px;
  text-align: center;
  background: var(--text);
  color: var(--card);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
}

.grille-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.grille-table {
  border-collapse: collapse;
  font-size: 14px;
  width: 100%;
}

.grille-table th,
.grille-table td {
  padding: 9px 10px;
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 -0.5px 0 var(--separator);
}

.grille-table th {
  color: var(--text-2);
  font-weight: 400;
  font-size: 12px;
}

.grille-table tr:last-child td {
  box-shadow: none;
}

.grille-table td:first-child,
.grille-table th:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
  color: var(--text-2);
  text-align: left;
}

.grille-table td:last-child {
  font-weight: 600;
}

/* Pronostic qui s'écarte de la combinaison n°1 = point de bascule */
.grille-cell--diff {
  background: var(--fill);
  font-weight: 600;
}

/* --- Statistiques --- */

.empty-state {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin-bottom: 26px;
  text-align: center;
}

.empty-state__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}

.empty-state__text {
  font-size: 15px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}

.verdict {
  font-size: 17px;
  font-weight: 600;
  width: 24px;
  text-align: center;
}

.verdict--ok { color: var(--text); }
.verdict--ko { color: var(--text-3); }

/* --- Feuille modale (bottom sheet iOS) --- */

.sheet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.sheet__card {
  position: relative;
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  border-radius: 14px 14px 0 0;
  padding: 8px 16px 32px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet__grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--text-3);
  margin: 0 auto 8px;
}

.sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-2);
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
}

.sheet__header {
  padding: 6px 0 18px;
}

.sheet__header h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 10px 0 3px;
  padding-right: 34px;
}

.sheet__subtitle {
  color: var(--text-2);
  font-size: 15px;
  margin: 0;
}

.odds-table {
  width: 100%;
  border-collapse: collapse;
}

.odds-table th,
.odds-table td {
  padding: 10px 8px;
  text-align: center;
  font-size: 15px;
  box-shadow: inset 0 -0.5px 0 var(--separator);
}

.odds-table tr:last-child td {
  box-shadow: none;
}

.odds-table th {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}

.odds-table th:first-child,
.odds-table td:first-child {
  text-align: left;
  padding-left: 16px;
}

.odds-table__empty {
  color: var(--text-2);
  font-size: 15px;
}

.prediction-card {
  padding: 16px;
}

/* Barre empilée 1/N/2. Monochrome : les trois issues se distinguent par la
   valeur de gris, pas par la couleur. */
.odds-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--fill);
}

.odds-bar__seg--1 { background: #000; }
.odds-bar__seg--n { background: #9a9aa0; }
.odds-bar__seg--2 { background: #d1d1d6; }

.outcomes {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}

.outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  box-shadow: inset 0 -0.5px 0 var(--separator);
}

.outcome:last-child {
  box-shadow: none;
}

.outcome__key {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.outcome__key--1 { background: #000; color: #fff; }
.outcome__key--n { background: #9a9aa0; color: #fff; }
.outcome__key--2 { background: #d1d1d6; color: #000; }

.outcome__label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcome__value {
  font-size: 17px;
  font-weight: 600;
}

/* Comparaison au marché */
.market-compare {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--separator);
}

.market-compare__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

.market-compare__head .muted {
  font-size: 12px;
}

.market-compare__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.market-compare__row > div {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.market-compare__key {
  display: block;
  font-size: 11px;
  color: var(--text-2);
}

.market-compare__val {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}

.market-compare__delta {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 1px;
}

.market-compare__hint {
  font-size: 12px;
  color: var(--text-2);
  margin: 8px 0 0;
}

/* Statistiques dérivées */
.pred-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.pred-stat {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}

.pred-stat__value {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.pred-stat__label {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.25;
}

/* Scores les plus probables */
.top-scores {
  margin-top: 18px;
}

.top-scores h4 {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  margin: 0 0 8px;
}

.top-scores ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.top-scores li {
  flex: 1;
  text-align: center;
}

.score-chip {
  display: block;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.top-scores .muted {
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.prediction-note {
  font-size: 12px;
  color: var(--text-2);
  margin: 16px 0 0;
  line-height: 1.4;
}

.prediction-scorers {
  margin-top: 22px;
}

.prediction-scorers h4 {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 7px 16px;
}

/* --- Contexte de match : forme, confrontations, repos -------------------- */
/* Volontairement plus sobre que la carte de prédiction : ce sont des faits
   bruts, ils ne doivent pas concurrencer visuellement le pronostic. */

.ctx-card {
  padding: 14px 16px 12px;
}

.ctx-side + .ctx-side {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--separator);
}

.ctx-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ctx-side__team {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctx-side__pills {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Monochrome assumé : le remplissage code le résultat, pas la couleur :
   cohérent avec la DA et lisible pour un daltonien. */
.pill {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--text);
}

.pill--v { background: var(--text); color: var(--card); }
.pill--n { background: var(--fill); color: var(--text); border-color: var(--separator); }
.pill--d { background: transparent; color: var(--text-2); border-color: var(--separator); }
.pill--\? { background: transparent; color: var(--text-3); border-color: var(--separator); }

.ctx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-2);
}

.ctx-row__date {
  flex-shrink: 0;
  width: 52px;
  color: var(--text-3);
}

/* Le nom des équipes est ce qui déborde en 390 px : c'est lui qui se tronque,
   jamais le score ni la pastille de résultat. */
.ctx-row__teams {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.ctx-row__comp {
  flex-shrink: 0;
  font-size: 11px;
}

.ctx-h2h {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--separator);
}

.ctx-h2h__head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.ctx-h2h__head .muted {
  font-weight: 400;
  font-size: 13px;
}

.ctx-note {
  font-size: 13px;
  margin: 14px 0 0;
}

.ctx-disclaimer {
  font-size: 11px;
  line-height: 1.4;
  margin: 16px 0 0;
}

/* --- Statistiques d'un match joué --------------------------------------- */

.stats-card {
  padding: 14px 16px;
}

.stat-line + .stat-line {
  margin-top: 14px;
}

.stat-line__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
}

.stat-line__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stat-line__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
  overflow: hidden;
}

.stat-line__bar span {
  display: block;
  height: 100%;
  background: var(--text);
}

.stat-line__hint {
  font-size: 12px;
  margin: 6px 0 0;
}

/* --- Pronostic figé confronté au résultat -------------------------------- */
/* Le succès et l'échec se distinguent par le trait et le remplissage, pas par
   du vert et du rouge : la DA est monochrome, et un pronostic raté n'est pas
   une alerte, c'est la moitié du temps, par construction. */

.verdict-card {
  padding: 14px 16px 12px;
  border: 1px solid var(--separator);
}

.verdict--hit { border-color: var(--text); }

.verdict-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.verdict-badge {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 1px solid var(--text);
}

.verdict--hit .verdict-badge { background: var(--text); color: var(--card); }
.verdict--miss .verdict-badge { color: var(--text-2); border-color: var(--separator); }

.verdict-headline {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

/* L'issue réellement survenue est soulignée dans la barre et la légende :
   sans repère, on ne sait pas si le modèle était loin ou juste malchanceux. */
.odds-bar__seg--truth {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.outcome--truth .outcome__label,
.outcome--truth .outcome__value {
  font-weight: 600;
  color: var(--text);
}

.verdict-scores {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.verdict-score {
  flex: 1;
  background: var(--fill);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}

.verdict-score__value {
  display: block;
  font-size: 19px;
  font-weight: 600;
}

.verdict-score__label {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

.verdict-market {
  font-size: 13px;
  margin: 14px 0 0;
}

/* --- Grille : résultats au fil des matchs -------------------------------- */

.grille-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-2);
  margin: 0 16px 10px;
}

.grille-progress__score {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Sur une case de combinaison : pronostic vérifié, démenti, ou pas encore
   joué. Le trait porte l'information, jamais la couleur seule. */
.grille-table td.cell--hit {
  background: var(--text);
  color: var(--card);
}

.grille-table td.cell--miss {
  color: var(--text-3);
  text-decoration: line-through;
}

.grille-legend__result {
  font-size: 12px;
  color: var(--text-2);
  margin-left: 8px;
}

.grille-row--dead td:first-child {
  opacity: 0.45;
}

/* --- Bandeau de pronostic ------------------------------------------------ */
/* Ce que la carte annonce, en une ligne : l'issue et le score qui va avec.
   Le reste de la carte détaille cette annonce, il ne la contredit plus. */

.pred-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid var(--separator);
}

.pick-badge--lg {
  width: 34px;
  height: 34px;
  font-size: 16px;
  flex-shrink: 0;
}

.pred-headline__title {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.pred-headline__sub {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
}

/* --- Article d'avant-match ----------------------------------------------- */

.preview-card {
  padding: 14px 16px 6px;
}

.preview-absents {
  font-size: 14px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--separator);
}

.preview-absents__label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-bottom: 3px;
}

/* Repliées par défaut sauf les absents : l'article fait 3 000 signes, tout
   dérouler d'un coup enterrerait le pronostic sous un mur de texte. */
.preview-section {
  border-top: 0.5px solid var(--separator);
}

.preview-section:first-of-type {
  border-top: none;
}

.preview-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-section > summary::-webkit-details-marker { display: none; }

/* Chevron sans rotation : un `transform` sur ce pseudo-élément débordait de
   10 px hors du bloc (la zone débordante d'une transformation compte dans le
   scrollWidth), ce qui rendait la section scrollable latéralement en 390 px. */
.preview-section > summary::after {
  content: "▾";
  color: var(--text-3);
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 10px;
}

.preview-section[open] > summary::after { content: "▴"; }

.preview-section > p {
  margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

/* Buteur probable que l'article donne absent : signalé, pas retiré. Le
   rapprochement se fait sur le nom de famille et peut confondre deux
   homonymes, effacer à tort serait pire que prévenir. */
.row--doubtful .row__title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--text-2);
}

/* `.row__sub` tronque à l'ellipse par défaut, ce qui convient à un sous-titre
   court mais coupait l'avertissement au milieu. Ici, le message EST
   l'information : il doit passer à la ligne plutôt que disparaître. */
.row--doubtful .row__sub {
  font-style: italic;
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}

.row--doubtful .row__value {
  color: var(--text-3);
}

/* --- Équipes suivies ----------------------------------------------------- */
/* Marquage sobre : un filet à gauche et le nom en gras. La DA est monochrome
   et une couleur d'accent ici casserait tout le reste de l'écran. */

.match-row--fav {
  box-shadow: inset 2px 0 0 var(--text);
}

.match-row__team--fav {
  font-weight: 600;
}

/* Minute de jeu d'un match en cours, sous le score. Rouge du direct, déjà
   utilisé pour le score, seule couleur sémantique de la DA. */
.match-row__minute {
  font-size: 11px;
  font-weight: 600;
  color: var(--live);
  line-height: 1.1;
}

/* --- Carte de prédiction, blocs de marchés ------------------------------- */
/* Chaque famille de prédictions est une liste groupée iOS identique au reste
   de l'app. Elles étaient auparavant présentées dans trois mises en page
   différentes, ce qui donnait une carte bariolée alors qu'il ne s'agit que de
   probabilités comparables entre elles. */

.prediction-block {
  margin-top: 22px;
}

.prediction-block h4 {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 7px 16px;
}

/* La ligne qui porte l'annonce principale du bloc : score exact retenu,
   pronostic figé. Un filet à gauche suffit à la distinguer sans couleur. */
.row--pred-key {
  box-shadow: inset 2px 0 0 var(--text), inset 0 -0.5px 0 var(--separator);
}

.row--pred-key .row__title {
  font-weight: 600;
}

.row--pred-key .row__value {
  color: var(--text);
  font-weight: 600;
}

/* Issue retenue, mise en avant dans la légende de la barre. */
.outcome--picked .outcome__label,
.outcome--picked .outcome__value {
  font-weight: 600;
  color: var(--text);
}

/* --- Bilan des prédictions d'un match joué ------------------------------- */
/* Vérifié ou démenti se lisent au symbole et au contraste, pas à la couleur :
   la DA est monochrome, et un pronostic raté n'est pas une alerte. */

.row--verdict {
  gap: 12px;
}

.verdict-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid var(--separator);
  color: var(--text-2);
}

.row--verdict-hit .verdict-mark {
  background: var(--text);
  border-color: var(--text);
  color: var(--card);
}

.row--verdict-miss .row__title {
  color: var(--text-2);
}

.row--verdict-miss .row__value {
  color: var(--text-3);
}

/* Ni vérifié ni démenti : les buts attendus sont une moyenne, pas un pari.
   Le repère reste creux, sans le noir plein du succès ni l'effacement de
   l'échec, pour qu'on voie tout de suite que cette ligne ne se note pas. */
.row--verdict-neutre .verdict-mark {
  color: var(--text-2);
  border-color: var(--separator);
}

.row--verdict-neutre .row__value {
  color: var(--text-2);
}

/* --- Barre de jours (calendrier) ---------------------------------------- */
/* Navigation au jour plutôt qu'à la semaine : c'est le geste attendu sur
   mobile, et une journée de football se lit d'un écran, pas sept. */

.day-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.day {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: none;
  border-radius: 9px;
  padding: 7px 2px 6px;
  font-family: inherit;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}

.day__name {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.day__num {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

/* Le nombre de matchs occupe toujours sa ligne, même vide : sans ça les
   boutons changent de hauteur d'un jour à l'autre et la barre tressaute. */
.day__count {
  font-size: 10px;
  color: var(--text-3);
  min-height: 12px;
}

.day--today .day__num {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.day--active {
  background: var(--text);
}

.day--active .day__name,
.day--active .day__num,
.day--active .day__count {
  color: var(--card);
}

.empty-day {
  text-align: center;
  color: var(--text-3);
  font-size: 15px;
  padding: 40px 16px;
}

/* --- Pastille de pronostic sur une ligne de match ------------------------ */
/* Permet de suivre la réussite en balayant la liste, sans ouvrir les fiches.
   Le contour seul vaut "en attente", le plein vaut "vérifié", le barré
   "démenti" : aucune couleur n'est nécessaire. */

.pick-pill {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--separator);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pick-pill--hit {
  background: var(--text);
  border-color: var(--text);
  color: var(--card);
}

.pick-pill--miss {
  color: var(--text-3);
  text-decoration: line-through;
}

/* Note du bandeau de grille : occupe toute la largeur sous les chiffres,
   parce qu'elle nuance ce qu'ils veulent dire et ne doit pas se lire comme
   un indicateur de plus. */
.grille-progress__note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 2px;
}

/* --- Tableau de bord des statistiques ------------------------------------ */

/* Chiffres clés en tuiles : deux colonnes tiennent sur un écran de 320 px
   sans rogner les nombres, et la grille se remplit d'elle-même selon le
   nombre de tuiles disponibles (le rendement disparaît sans cotes archivées). */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 26px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 13px 14px;
}

.kpi__value {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kpi__label {
  font-size: 13px;
  font-weight: 500;
  margin-top: 3px;
}

.kpi__detail {
  font-size: 12px;
  color: var(--text-2);
}

/* Le solde est la seule valeur de l'app qui ait un sens directionnel : un
   rendement négatif doit se voir sans lire le signe. */
.kpi--neg .kpi__value { color: var(--live); }

.gain--neg { color: var(--live); }

/* --- Frise des pronostics notés ------------------------------------------ */

.serie-card {
  padding: 14px 16px;
}

.serie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.serie__case {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  flex: none;
}

.serie__case--hit { background: var(--text); }

.serie__case--miss {
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--separator);
}

.serie__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-3);
}

.serie__key {
  display: flex;
  align-items: center;
  gap: 4px;
}

.serie__key .serie__case {
  width: 10px;
  height: 10px;
}

/* --- Barres de proportion ------------------------------------------------ */

/* Une barre en plus du pourcentage : sur une liste de championnats, l'oeil
   compare des longueurs bien plus vite que des nombres. */
.bar {
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
  overflow: hidden;
  margin-top: 6px;
}

.bar > span {
  display: block;
  height: 100%;
  background: var(--text);
  border-radius: 2px;
}

.bar--ghost > span { background: var(--text-3); }

/* Valeur et effectif empilés à droite : le taux seul induit en erreur, les
   deux collés se lisent comme un bloc. */
.row__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex: none;
}

.row__stack .row__sub { font-size: 11px; }

/* --- Calibration --------------------------------------------------------- */

.calib {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}

.calib__line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calib__tag {
  font-size: 11px;
  color: var(--text-2);
  width: 52px;
  flex: none;
}

.calib__line .bar {
  flex: 1;
  margin-top: 0;
}

.calib__num {
  font-size: 12px;
  width: 38px;
  text-align: right;
  flex: none;
}

/* --- Santé de la collecte ------------------------------------------------ */

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
  flex: none;
}

.dot--warning { background: var(--text-3); }
.dot--error { background: var(--live); }

/* Seul sous-titre de l'app autorisé à passer à la ligne : un message de
   panne tronqué à "aucun passage depuis…" ne sert à rien. */
.sante__detail {
  white-space: normal;
  overflow: visible;
}

/* --- Onglet Équipes ------------------------------------------------------ */

.eq-block { margin-bottom: 32px; }

.eq-sub {
  font-size: 12px;
  color: var(--text-2);
  margin: 12px 16px 6px;
}

.eq-form {
  display: flex;
  gap: 4px;
  margin: 0 16px 4px;
}

.eq-score {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

.eq-when {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

/* --- Match mis en avant dans la journée ---------------------------------- */

/* Un liseré, pas une carte à part : la ligne garde sa place chronologique
   dans son championnat, on la remarque sans casser la lecture de la liste. */
.match-row--spot {
  box-shadow: inset 3px 0 0 var(--text), inset 0 -0.5px 0 var(--separator);
}

/* Redit explicitement le liseré : la règle générique qui retire le
   séparateur de la dernière ligne d'une carte effacerait sinon les deux
   ombres d'un coup, et le match mis en avant ne se distinguerait plus. */
.card > .match-row--spot:last-child {
  box-shadow: inset 3px 0 0 var(--text);
}

/* Troisième ligne de la colonne des équipes : la mention se place sous les
   deux noms, sans élargir la ligne ni déplacer la pastille de pronostic. */
.spot-note {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.3;
  white-space: normal;
  margin-top: 3px;
}

/* ========================================================================
   Formats tablette et bureau
   ========================================================================

   L'app est pensée mobile d'abord et le reste : tout ce qui suit n'ajoute
   que de la mise à l'échelle. Aucun composant n'est redessiné, aucune
   information n'apparaît ou ne disparaît selon la taille de l'écran, sinon
   il faudrait vérifier deux interfaces au lieu d'une.

   Le problème résolu ici est précis : sans largeur maximale, une ligne de
   match s'étirait sur 1900 px, avec l'heure collée à gauche et le chevron
   perdu à droite. Illisible, et la faute la plus banale d'une interface
   mobile affichée sur un écran large. */

/* --- Tablette et petit portable : on centre, une seule colonne ---------- */

@media (min-width: 700px) {
  .appbar,
  main {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  main {
    padding: 16px 20px 60px;
  }

  /* La feuille qui montait du bas devient une boîte de dialogue centrée :
     le geste de glissement n'existe pas à la souris, et une feuille collée
     en bas d'un grand écran laisse une bande vide au-dessus. */
  .sheet {
    align-items: center;
    padding: 24px;
  }

  .sheet__card {
    max-width: 560px;
    border-radius: 14px;
    padding: 8px 24px 28px;
    max-height: 86vh;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
  }

  .sheet__grabber {
    display: none;
  }
}

/* --- Bureau : deux colonnes, barre d'onglets sur une ligne -------------- */

@media (min-width: 1040px) {
  .appbar,
  main {
    max-width: 1080px;
  }

  /* Titre à gauche, onglets à droite : la place existe, autant ne pas
     dépenser deux lignes de hauteur pour quatre boutons. */
  .appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 4px 2px;
  }

  .topbar {
    padding: 8px 12px 6px;
  }

  .segmented {
    flex: none;
    width: 420px;
    margin: 0 12px;
  }

  .segmented__item {
    font-size: 14px;
    padding: 8px 6px;
  }

  main {
    padding: 18px 16px 80px;
  }

  /* Colonnes CSS plutôt qu'une grille : les blocs par championnat n'ont pas
     tous la même hauteur, et une grille laisserait des trous sous les plus
     courts. Les colonnes les empilent au plus serré. `break-inside` garde
     chaque championnat d'un seul tenant, sinon la liste se couperait au
     milieu et la deuxième colonne afficherait des matchs sans leur titre de
     compétition. */
  .week-groups,
  .stats-detail {
    column-gap: 24px;
  }

  .stats-detail {
    columns: 2;
  }

  /* Le calendrier ne passe à deux colonnes que s'il a au moins deux
     compétitions à y mettre. C'est la journée la plus courante qui l'impose :
     une soirée de Ligue Europa n'affiche qu'un seul bloc, et il resterait
     seul à gauche avec la moitié de l'écran vide à droite. Une seule
     compétition, donc une seule colonne, ramenée à une largeur de lecture
     confortable plutôt qu'étirée sur 1400 px. */
  .week-groups {
    max-width: 620px;
  }

  .week-groups:has(.group:nth-of-type(2)) {
    max-width: none;
    columns: 2;
  }

  .week-groups > .group,
  .stats-detail > .group {
    break-inside: avoid;
    /* Sans ça, Chrome coupe malgré `break-inside` sur les blocs longs. */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Une équipe par colonne : elles se comparent d'un coup d'oeil, ce qui est
     exactement ce qu'on vient chercher dans cet onglet. Même garde-fou que
     le calendrier : avec une seule équipe suivie, pas de colonne vide. */
  .equipes-view {
    max-width: 620px;
  }

  .equipes-view:has(.group:nth-of-type(2)) {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
    align-items: start;
  }

  /* Les quatre chiffres clés sur une ligne. */
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .kpi__value {
    font-size: 30px;
  }

  /* Les jours restent sur une ligne mais respirent. */
  .day {
    padding: 8px 0 7px;
  }

  .sheet__card {
    max-width: 620px;
  }
}

/* --- Grand écran : trois colonnes pour la journée ----------------------- */

/* Une soirée de coupe d'Europe aligne une trentaine de matchs répartis sur
   plusieurs compétitions : à cette largeur, deux colonnes obligent encore à
   faire défiler pour voir la fin de la journée. */
@media (min-width: 1500px) {
  .appbar,
  main {
    max-width: 1400px;
  }

  /* Même condition d'un cran plus haut : trois colonnes seulement s'il y a
     trois compétitions à afficher, sinon on retombe sur des colonnes vides. */
  .week-groups:has(.group:nth-of-type(3)) {
    columns: 3;
  }
}

/* --- Souris : survol ---------------------------------------------------- */

/* `hover: hover` exclut les écrans tactiles, où l'état de survol reste collé
   après un appui et fait passer une ligne pour sélectionnée. */
@media (hover: hover) {
  .match-row:hover,
  .equipes-view .row[data-match-id]:hover {
    background: var(--fill);
    cursor: pointer;
  }

  .segmented__item:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }

  .week-nav button:hover,
  .day:hover,
  .sheet__close:hover {
    cursor: pointer;
  }

  .day:not(.day--active):hover {
    background: var(--fill);
  }
}

/* --- Grille : écart au réel --------------------------------------------- */

/* Trois compteurs côte à côte, la note en dessous sur toute la largeur.
   Volontairement sobre : ce bloc nuance la grille, il ne doit pas se lire
   comme un indicateur de performance de plus. */
.realisme {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.realisme__case {
  flex: 1;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.realisme__val {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}

.realisme__lbl {
  font-size: 13px;
}

.realisme__att {
  font-size: 11px;
  color: var(--text-2);
}

/* Le chiffre s'éloigne nettement de la moyenne : c'est exactement ce qu'on
   vient regarder, il passe donc en rouge du direct, seule couleur sémantique
   de l'app. */
.realisme__case--ecart .realisme__val {
  color: var(--live);
}

.realisme__note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  margin: 4px 0 0;
}

/* --- Prix du marché sous une probabilité du modèle ----------------------- */

/* Discret et sur sa propre ligne : c'est un point de comparaison, pas un
   deuxième pronostic. La cote est mise en avant dans la ligne parce que
   c'est elle qu'on va chercher, le pourcentage servant à situer l'écart. */
.cote {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
}

.cote__val {
  font-weight: 600;
  color: var(--text);
  background: var(--fill);
  border-radius: 5px;
  padding: 1px 5px;
}

/* --- Meilleur pari ------------------------------------------------------- */

/* Encadré plus marqué que les autres blocs : c'est la seule ligne de la
   fiche qui dit "voilà ce que je jouerais". Le liseré passe au noir plein
   une fois le pari vérifié, s'efface s'il est démenti. */
.bet-card {
  padding: 13px 16px;
  box-shadow: inset 3px 0 0 var(--text-3);
}

.bet-card--hit { box-shadow: inset 3px 0 0 var(--text); }
.bet-card--miss { box-shadow: inset 3px 0 0 var(--separator); }
.bet-card--miss .bet-title { color: var(--text-2); }

.bet-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bet-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bet-title {
  font-size: 17px;
  font-weight: 600;
}

/* L'espérance de gain, mise en avant sans être criarde : c'est un chiffre
   conditionnel ("si le modèle a raison"), pas une promesse. */
.bet-ev {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.bet-card .edge-reasons {
  margin-top: 10px;
}

/* --- Badge de confiance -------------------------------------------------- */
.pred-confidence {
  margin-bottom: 8px;
}
.conf-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.conf--high { background: #d1fae5; color: #065f46; }
.conf--med  { background: #fef3c7; color: #92400e; }
.conf--low  { background: #fee2e2; color: #991b1b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .conf--high { background: #064e3b; color: #6ee7b7; }
  :root:not([data-theme="light"]) .conf--med  { background: #78350f; color: #fde68a; }
  :root:not([data-theme="light"]) .conf--low  { background: #7f1d1d; color: #fca5a5; }
}
:root[data-theme="dark"] .conf--high { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .conf--med  { background: #78350f; color: #fde68a; }
:root[data-theme="dark"] .conf--low  { background: #7f1d1d; color: #fca5a5; }

/* --- Meilleure cote ------------------------------------------------------ */
.odds-best {
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 4px;
}

/* --- Meilleur pari dans le calendrier ------------------------------------ */
.best-bet-dot {
  font-size: 13px;
  color: #f59e0b;
  margin-right: 2px;
  flex-shrink: 0;
}

/* --- Recherche d'équipe -------------------------------------------------- */
.team-search {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
}
.team-search__input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 16px;
}
.team-search__btn {
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.team-remove {
  margin-left: 6px;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
}

/* --- Grille : noms d'équipes sur deux lignes ----------------------------- */
.grille-legend__home {
  white-space: normal;
}
.grille-legend__away {
  white-space: normal;
}

/* --- Agents & Stratégies ------------------------------------------------- */
.agents__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--separator);
}
.agents__row:last-child { border-bottom: none; }
.agents__row--leader { background: var(--card-highlight, rgba(250,204,21,.08)); }
.agents__rank {
  font-size: 18px;
  min-width: 28px;
  text-align: center;
}
.agents__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agents__name {
  font-weight: 600;
  font-size: 14px;
}
.agents__label {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agents__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.agents__stat {
  font-size: 12px;
  color: var(--text-2);
}
.agents__roi {
  font-size: 14px;
  font-weight: 700;
}
.agents__roi--pos { color: #22c55e; }
.agents__roi--neg { color: #ef4444; }

/* --- Point de confiance dans la liste de matchs -------------------------- */
.conf-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}
.conf-dot--high { background: #22c55e; }
.conf-dot--med  { background: #f59e0b; }
.conf-dot--low  { background: #ef4444; }

/* --- Filtre par ligue (Calendrier) --------------------------------------- */
.league-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px 8px;
  scrollbar-width: none;
}
.league-filter::-webkit-scrollbar { display: none; }
.league-pill {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--separator);
  border-radius: 20px;
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.league-pill--active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* --- Graphe ROI dans le temps -------------------------------------------- */
.roi-graph-card { padding: 12px 16px 8px; }
.roi-svg { width: 100%; height: auto; display: block; }
.roi-zero-line { stroke: var(--separator); stroke-dasharray: 3 3; stroke-width: 1; }
.roi-axis-lbl { font-size: 9px; fill: var(--text-2); font-family: inherit; }
.roi-graph__caption { font-size: 12px; color: var(--text-2); margin: 6px 0 0; text-align: center; }

.agents__open {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin-top: 2px;
}