/* Win Pronostic — site public (V3.1, maquette du 8 septembre 2026).
   Un registre, pas une page d'accueil : la liste des pronostics est le héros.
   La carte se lit en trois temps : la sélection et la cote en une seconde ;
   pourquoi (marge, mise, probabilité) ; les détails, rangés dans un dépliant.
   Palette, typographie, boutons, pastilles, cartes et tableaux viennent de
   tokens.css (partagé avec l'admin) ; ici, la mise en page seulement. */

/* ---------------------------------------------------------------- en-tête */

.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
/* Le logo est un JPEG sur fond noir : le mode de fusion efface sa boîte. */
.site-head .logo img { display: block; height: 34px; width: auto; mix-blend-mode: lighten; }
.site-nav { display: flex; gap: 4px; }
.site-nav a {
  display: inline-block;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.site-nav a.on { color: var(--ink); background: var(--surface-2); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }

main { padding: 36px 0 56px; }
.page-methode main .wrap, .page-acces main .wrap { max-width: var(--wrap-read); }

/* ---------------------------------------------------------------- journée : deux colonnes */

.day-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.day-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* Libellé, titre, sous-titre à gauche ; la navigation de journée à droite,
   calée en bas sur desktop, sur la ligne du libellé en mobile. */
.day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow nav" "title nav" "sub nav";
  column-gap: 16px;
  align-items: end;
}
.day .eyebrow { grid-area: eyebrow; }
.day h1 { grid-area: title; }
.day h1.disp { margin-top: 6px; font-size: 56px; }
.day h1.plain { font-size: 1.9rem; }
.day-sub { grid-area: sub; margin-top: 12px; color: var(--dim); font-size: .95rem; max-width: 52ch; }
.day .day-nav { grid-area: nav; align-self: end; }
.day-sub .num { color: var(--ink); }
.day-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.day-nav a, .day-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: .87rem;
  font-weight: 500;
}
.day-nav a.arrow { padding: 0; }
.day-nav a.arrow svg { display: block; }
.day-nav a:hover { color: var(--ink); background: var(--surface-2); }
.day-nav span.off { color: var(--dim); border-color: transparent; }

/* ---------------------------------------------------------------- niveaux : glyphe + libellé */

.lvl { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .87rem; color: var(--ink); }
.dots { display: inline-grid; grid-template-columns: repeat(3, 7px); gap: 3px; }
.dots i { display: block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--lvl-c, var(--ink)); }
.dots i.f { background: var(--lvl-c, var(--ink)); }
.lvl-safe { --lvl-c: var(--safe); }
.lvl-probable { --lvl-c: var(--probable); }
.lvl-chance { --lvl-c: var(--chance); }

.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  font-size: .84rem;
  color: var(--ink-2);
}
.legend .lg .dim { font-weight: 400; }

/* ---------------------------------------------------------------- registre : la carte en trois temps */

.ledger { display: flex; flex-direction: column; gap: 14px; }

.pick {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  min-width: 0;
}
.pick-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .87rem;
  color: var(--dim);
}
.pick-top .push { margin-left: auto; }

/* 1. En une seconde : l'affiche, la sélection en or, la cote en grand. */
.pick-event {
  margin-top: 14px;
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.pick-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-top: 8px;
}
.pick-sel { font-size: 18px; font-weight: 700; color: var(--gold); }
.pick-meta { margin-top: 3px; font-size: .84rem; color: var(--dim); }
.pick-odds { text-align: right; }
.pick-odds .odds { display: block; font-family: var(--mono); font-size: 32px; font-weight: 700; line-height: 1; }
.pick-odds .book { display: block; margin-top: 4px; font-size: .78rem; color: var(--dim); white-space: nowrap; }

/* 2. Pourquoi : la marge est un chiffre, la mise une unité, la probabilité dit d'où elle vient. */
.chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid #2F2A1E;
  font-size: .87rem;
  color: var(--ink-2);
}
.chip b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.chip-marge b { color: var(--gold); }

/* 3. Détails, rangés : la barre seuil / probabilité et la mécanique. */
details.why { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
details.why summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .87rem;
  color: var(--ink-2);
}
details.why summary::-webkit-details-marker { display: none; }
details.why summary svg { flex-shrink: 0; transition: transform .12s ease; }
details.why[open] summary svg { transform: rotate(90deg); }
details.why summary:hover { color: var(--ink); }

.marge-bar {
  position: relative;
  height: 6px;
  margin: 14px 0 8px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: visible;
}
.marge-bar .base {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--be) * 1%);
  background: var(--gold-deep);
  border-radius: 3px 0 0 3px;
}
.marge-bar .gain {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--be) * 1%);
  width: max(0%, calc((var(--p) - var(--be)) * 1%));
  min-width: 3px;
  background: var(--gold);
}
.marge-bar .tick {
  position: absolute; top: -4px;
  left: calc(var(--be) * 1%);
  width: 1px;
  height: 14px;
  background: var(--ink);
}
.marge-legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--dim); }
.marge-legend b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.why-text { margin-top: 10px; font-size: .84rem; color: var(--dim); max-width: 60ch; }
.pick-note { margin-top: 8px; font-size: .84rem; color: var(--dim); max-width: 60ch; }
.pick-note.settle { margin-top: 12px; color: var(--ink-2); }

/* États */
.pick.is-retracted { background: transparent; border-style: dashed; }
.pick.is-retracted .pick-event, .pick.is-retracted .pick-sel, .pick.is-retracted .pick-odds .odds {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.pick.is-retracted .chips, .pick.is-retracted details.why { display: none; }
.pick-retract { margin-top: 12px; font-size: .87rem; color: var(--ink-2); }
.pick-retract .reason { color: var(--ink); }

/* ---------------------------------------------------------------- combiné */

.combo {
  padding: 18px 22px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r);
  background: var(--surface);
}
.combo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.combo-head h2 { color: var(--gold); font-size: 1.1rem; }
.combo-nums { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.combo-nums .k { display: block; font-size: .76rem; color: var(--dim); }
.combo-nums .v { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; }
.combo-nums .v.sub { font-size: .8rem; font-weight: 500; color: var(--dim); }
.combo-legs { list-style: none; margin: 12px 0 0; padding: 0; }
.combo-legs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
}
.combo-legs .sel { color: var(--gold); font-weight: 600; }
.combo-legs .retracted-leg { color: var(--dim); text-decoration: line-through; }
.combo-note { margin-top: 10px; font-size: .8rem; color: var(--dim); }

/* ---------------------------------------------------------------- journée vide : une preuve de sélectivité */

.empty { margin-top: 4px; }
.badge-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: .87rem;
  color: var(--ink-2);
}
.badge-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.empty .lead { margin-top: 12px; color: var(--dim); font-size: .95rem; max-width: 50ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.fact small { display: block; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); line-height: 1.3; }
.fact b { display: block; margin-top: 3px; font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fact b.gold { color: var(--gold); }
.fact b.neg { color: var(--lost); }
.fact b a { color: inherit; }
.empty .btn { margin-top: 16px; }

/* ---------------------------------------------------------------- colonne de contexte */

.rail { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; min-width: 0; }
.rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bilan-big { margin-top: 12px; font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
.bilan-big.neg { color: var(--lost); }
.bilan-sub { margin-top: 4px; font-size: .84rem; color: var(--dim); }
.spark { display: block; width: 100%; height: auto; margin-top: 14px; }
.spark-zero { stroke: var(--line-soft); stroke-width: 1; }
.spark-area { fill: var(--gold); fill-opacity: .08; }
.spark-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-end { fill: var(--gold); }
.kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.kpi3 small { display: block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.kpi3 b { display: block; margin-top: 2px; font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bilan-wait { margin-top: 12px; }
.bilan-wait b { display: block; font-weight: 600; }
.bilan-wait p { margin-top: 6px; font-size: .87rem; color: var(--dim); }
.rail-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .87rem; color: var(--ink-2); }
.rail-link svg, .rail-help svg { flex-shrink: 0; }
.recent { list-style: none; margin: 10px 0 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .87rem; }
.recent li:last-child { border-bottom: 0; }
.recent li a { color: var(--ink); }
.recent li a.on { color: var(--gold); }
.recent .val { color: var(--dim); white-space: nowrap; }
.rail-help { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: .87rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- historique */

.page-historique .kpis { margin-top: 16px; grid-template-columns: repeat(2, 1fr); }
.page-historique .card { margin-top: 16px; }
.note { margin-top: 12px; font-size: .87rem; color: var(--dim); max-width: 70ch; }

/* ---------------------------------------------------------------- méthode */

.day + .prose, .day + .note { margin-top: 22px; }
.prose { max-width: 66ch; }
.prose h2 { margin: 26px 0 6px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 10px; color: var(--ink-2); }
.prose ul { margin: 0 0 10px; padding-left: 18px; color: var(--ink-2); }
.prose li { margin: 3px 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- pied */

.site-foot { border-top: 1px solid var(--line); padding: 26px 0 30px; font-size: .87rem; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px; }
.foot-brand strong { font-weight: 600; }
.foot-brand p { margin-top: 6px; color: var(--dim); max-width: 34ch; }
.foot-links { display: flex; flex-direction: column; gap: 6px; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--gold); }
.foot-legal { display: block; margin-top: 18px; font-size: .8rem; color: var(--dim); }

/* ---------------------------------------------------------------- desktop */

@media (min-width: 960px) {
  .day-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .page-historique .kpis { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 720px) and (max-width: 959px) {
  .page-historique .kpis { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .site-head .wrap { flex-wrap: wrap; min-height: 60px; row-gap: 0; }
  .site-head .logo { padding: 12px 0; }
  .site-nav { width: calc(100% + 32px); margin: 0 -16px; padding: 0 12px; gap: 0; border-top: 1px solid var(--line-soft); }
  .site-nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 0; color: var(--dim); font-size: .9rem; }
  .site-nav a:hover { background: transparent; }
  .site-nav a.on { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
  main { padding: 22px 0 28px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .day { grid-template-areas: "eyebrow nav" "title title" "sub sub"; align-items: center; row-gap: 4px; }
  .day .day-nav { align-self: center; }
  .day-nav a, .day-nav span { height: 44px; min-width: 44px; }
  .day h1.disp { font-size: 40px; }
  .day h1.plain { font-size: 1.55rem; }
  .site-head .logo img { height: 30px; }
  .pick { padding: 16px; }
  .pick-event { font-size: 20px; }
  .pick-sel { font-size: 17px; }
  .pick-odds .odds { font-size: 30px; }
  .chip { font-size: .84rem; padding: 6px 10px; }
  .combo { padding: 14px 16px; }
  .combo-legs li { flex-direction: column; gap: 2px; }
  .rail-card { padding: 16px; }
  .bilan-big { font-size: 34px; }
  .facts { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:first-child { grid-column: 1 / -1; }
  .fact { padding: 8px 10px; }
  .site-foot .wrap { grid-template-columns: 1fr; gap: 12px; }
  .foot-links { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .foot-links .eyebrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  details.why summary svg { transition: none; }
}