/* Win Pronostic — tokens et primitives PARTAGÉS (site public + admin).
   Système visuel V3.1 (audit du 8 septembre 2026) : un noir à peine réchauffé
   pour que l'or lui appartienne, UN SEUL or réservé à la marque, à la sélection,
   à la marge et aux actions ; les niveaux sont portés par un glyphe (●●● / ●●○ /
   ●○○) et les états par des couleurs sémantiques distinctes. Trois rayons,
   trois rôles ; deux largeurs selon la nature de la page.
   Chargé avant public.css et wp.css, qui n'ajoutent que leur mise en page. */

:root {
  --bg: #0B0A08;
  --surface: #14120E;
  --surface-2: #1B1812;
  --line: #3D3724;          /* bords de cartes (≈ 1,7:1, visibles sans être durs) */
  --line-soft: #2A261C;     /* séparateurs internes */
  --line-strong: #6B6248;   /* composants interactifs (3,1:1 sur la surface) */
  --ink: #F3EFE6;
  --ink-2: #DDD8CC;
  --dim: #A39F92;

  --gold: #E8B40C;
  --gold-text: #E8B40C;
  --gold-soft: rgba(232, 180, 12, .16);
  --gold-deep: #6F5A18;

  --safe: #3DBF77;
  --probable: #F3EFE6;
  --chance: #F07A5A;

  --won: #3DBF77;
  --lost: #F07A5A;
  --void: #A39F92;
  --pending: #A39F92;
  --retracted: #858074;     /* 5,0:1 sur le fond, 4,75:1 sur la surface (AA) */

  --won-soft: rgba(61, 191, 119, .45);
  --lost-soft: rgba(240, 122, 90, .45);

  --display: "Archivo", "Inter Tight", system-ui, sans-serif;
  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r: 10px;        /* cartes */
  --r-sm: 6px;      /* boutons, puces, champs */
  --r-pill: 999px;  /* badges */
  --wrap: 1040px;   /* application (Jour, Historique, admin élargit) */
  --wrap-read: 720px; /* lecture (Méthode, accès) */
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0; }

/* Display : dates, affiches de match, grands chiffres. Jamais le corps. */
.disp { font-family: var(--display); font-stretch: 118%; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.eyebrow { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 500; }

.num {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dim { color: var(--dim); }
.small { font-size: .87rem; }
.tiny { font-size: .8rem; }
.nowrap { white-space: nowrap; }
.pos { color: var(--won); }
.neg { color: var(--lost); }
.mt { margin-top: 18px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- niveaux */

.lvltag { font-weight: 600; }
.lvltag.safe { color: var(--safe); }
.lvltag.probable { color: var(--probable); }
.lvltag.chance { color: var(--chance); }

/* ---------------------------------------------------------------- états et résultats */

/* En attente : un état neutre, en mono, sans couleur de marque. */
.state {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pending);
  white-space: nowrap;
}
.res {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.res .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.res-won { color: var(--won); border-color: var(--won-soft); }
.res-lost { color: var(--lost); border-color: var(--lost-soft); }
.res-void { color: var(--void); }
.res-pending { color: var(--pending); }
.res-retracted { color: var(--retracted); border-style: dashed; }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  color: #0B0A08;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #F2C130; border-color: #F2C130; color: #0B0A08; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.btn-sm { padding: 5px 10px; font-size: .8rem; }

/* ---------------------------------------------------------------- champs */

.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.field label { font-size: .87rem; color: var(--dim); }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
.err { margin-top: 10px; color: var(--lost); font-size: .87rem; }

/* ---------------------------------------------------------------- messages */

.flashes { list-style: none; margin: 0 0 16px; padding: 0; }
.flashes li {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: .88rem;
}
.flashes li + li { margin-top: 8px; }
.flashes li.ok { border-color: var(--won-soft); }
.flashes li.error { border-color: var(--lost-soft); }

/* ---------------------------------------------------------------- cartes, indicateurs, tableaux */

.card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.card h3 { margin-bottom: 8px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.kpi {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.kpi .k { font-size: .78rem; color: var(--dim); }
.kpi .v { margin-top: 2px; font-family: var(--mono); font-weight: 700; font-size: 1.35rem; }
.kpi .v.gold { color: var(--gold); }
.kpi .v.neg { color: var(--lost); }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th, table.t td { padding: 8px 8px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
table.t thead th { border-top: 0; color: var(--dim); font-weight: 500; font-size: .78rem; }
table.t tbody th { color: var(--dim); font-weight: 500; white-space: nowrap; }
table.t tbody tr:hover { background: var(--surface-2); }
table.t td.n, table.t th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.t thead th.n { font-family: var(--font); }

/* ---------------------------------------------------------------- accès (code abonné, connexion admin) */

.gate { max-width: 560px; padding-top: 12px; }
.gate .card { max-width: 420px; margin: 0 auto; }
/* Le logo 3D en grand : son fond noir disparaît par fusion, il entre en douceur. */
.logo-3d {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto 4px;
  mix-blend-mode: lighten;
  animation: logo-in .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes logo-in {
  from { opacity: 0; transform: scale(.92) translateY(10px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .logo-3d { animation: none; } }