/* =============================================================
   Lotto CI — feuille de style unique.
   Compacte par principe : l'ecran utile d'un Android d'entree de
   gamme fait 640 px de haut. Chaque bloc d'air est un resultat en
   moins a l'ecran.
   ============================================================= */

:root {
  /* --- Marque ------------------------------------------------ */
  --orange:        #EA580C;  /* aplats et bulles gagnantes */
  --orange-strong: #C2410C;  /* texte et boutons, contraste sur blanc */
  --orange-soft:   #FFF1E7;
  --green:         #0E9F6E;
  --green-soft:    #E7F7F1;
  --red:           #DC2626;

  /* --- Neutres ----------------------------------------------- */
  --ink:      #111827;
  --ink-2:    #4B5563;
  --ink-3:    #667085;  /* 4,9:1 sur blanc : lisible en plein soleil */
  --line:     #E9EAEE;
  --surface:  #FFFFFF;
  --ground:   #F4F5F7;

  /* --- Donnees : volontairement loin de l'orange et du vert,
         pour qu'un « numero chaud » ne se confonde jamais avec un
         bouton de validation. --------------------------------- */
  --data-0: #EEF2FF;
  --data-4: #3730A3;

  /* --- Rythme ------------------------------------------------ */
  --gap:    10px;
  --pad:    13px;
  --gutter: 12px;
  --r:      14px;
  --r-sm:   10px;

  --shadow:    0 1px 2px rgba(17, 24, 39, .06), 0 1px 1px rgba(17, 24, 39, .04);
  --shadow-up: 0 -1px 0 var(--line);

  /* Bascule d'un seul point vers Archivo le jour ou la police est
     auto-hebergee et sous-ensemblee. */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --nav-h: 58px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Le doigt glisse, il ne selectionne pas : c'est ce qui distingue
     une app d'une page web. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange-strong); outline-offset: 2px; }

/* ---------------------------------------------------- En-tete */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: -.3px; }
.brand-mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--orange);
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 900;
}
.topbar-spacer { flex: 1; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-2);
}
.icon-btn:active { background: var(--ground); }

/* -------------------------------------------------- Structure */
.screen { padding: var(--gap) var(--gutter) 6px; }
.screen[hidden] { display: none; }

.section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 16px 2px 8px;
}
.section-head:first-child { margin-top: 4px; }
.section-title {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}
.section-meta { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* ------------------------------------------- Carte principale */
/* Le dernier tirage : c'est pour lui qu'on ouvre l'app a 21 h. */
.hero { padding: var(--pad); }
.hero-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hero-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.hero-sub { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.badge {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 999px; text-transform: uppercase;
}
.badge-phys { background: var(--orange-soft); color: var(--orange-strong); }
.badge-virt { background: var(--data-0); color: var(--data-4); }

/* ----------------------------------------------- Les numeros */
.balls { display: flex; gap: 6px; }
.ball {
  flex: 1; aspect-ratio: 1; max-width: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800; letter-spacing: -.5px;
}
/* Gagnants pleins, machine en contour : la difference se lit d'un
   coup d'oeil, sans une ligne de texte pour l'expliquer. */
.ball-win { background: var(--orange); color: #fff; font-size: 18px; }
.ball-mac { background: var(--surface); border: 1.5px solid #D5D8DE; color: var(--ink-2); font-size: 16px; }

.balls-mac { margin-top: 7px; }
.balls-mac .ball { max-width: 41px; }

.line-tag {
  display: flex; align-items: center; gap: 6px;
  margin: 9px 0 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.line-tag::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.no-machine {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--ground); color: var(--ink-2);
  font-size: 12px; font-weight: 600;
}

/* ------------------------------------------------- Actions */
.actions { display: flex; gap: 8px; margin-top: 11px; }
.btn {
  height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 800; font-size: 14.5px; letter-spacing: -.2px;
  transition: transform .09s ease;
}
/* L'enfoncement, c'est ce qui donne la sensation native. */
.btn:active { transform: scale(.97); }
.btn-primary { flex: 1; background: var(--orange-strong); color: #fff; }
.btn-ghost {
  width: 44px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-2);
}

/* --------------------------------------------- Prochain tirage */
.next {
  display: flex; align-items: center; gap: 10px;
  padding: 11px var(--pad);
}
.next-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--data-0); color: var(--data-4);
  display: grid; place-items: center;
}
.next-name { font-weight: 700; font-size: 14.5px; }
.next-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.next-count {
  margin-left: auto; text-align: right;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 16px; color: var(--orange-strong);
}

/* ------------------------------------------------- Le slider */
/* « Les slides » : un rail qui accroche, comme sur mobile natif. */
.rail {
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

.mini { width: 158px; padding: 11px; }
.mini-head { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
.mini-name {
  font-size: 12.5px; font-weight: 800; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-time { font-size: 10.5px; font-weight: 700; color: var(--ink-3); flex: none; }
.mini .balls { gap: 4px; }
.mini .ball { max-width: 26px; font-size: 12px; border-radius: 50%; }
.mini .ball-mac { font-size: 11px; border-width: 1px; }
.mini .balls-mac { margin-top: 4px; }

.mini-wait { opacity: .62; }
.mini-wait .mini-slot {
  height: 26px; border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--line) 0 26px, transparent 26px 30px);
}
.mini-wait .mini-slot + .mini-slot { margin-top: 4px; height: 22px; }

/* -------------------------------------------- Liste compacte */
.rows { display: flex; flex-direction: column; gap: 7px; }
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--pad);
  width: 100%; text-align: left;
  transition: transform .09s ease;
}
.row:active { transform: scale(.985); }
.row-id { min-width: 0; flex: 1; }
.row-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.row-balls { display: flex; gap: 4px; flex: none; }
.row-balls .ball { width: 27px; height: 27px; max-width: none; font-size: 12px; }

/* ------------------------------------------------ Squelettes */
/* Jamais de page blanche : le vide donne l'impression d'un plantage. */
.skel { background: var(--line); border-radius: 6px; animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.skel-ball { width: 100%; aspect-ratio: 1; max-width: 52px; border-radius: 50%; }

.empty {
  padding: 26px var(--pad); text-align: center;
  color: var(--ink-3); font-size: 13px; font-weight: 600;
}

/* --------------------------------------- Navigation du bas */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); box-shadow: var(--shadow-up);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3);
  font-size: 10px; font-weight: 700; letter-spacing: -.1px;
}
.nav-item svg { width: 21px; height: 21px; }
.nav-item[aria-selected="true"] { color: var(--orange-strong); }
.nav-item:active { background: var(--ground); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px);
  transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: #fff;
  padding: 10px 15px; border-radius: 11px;
  font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 40; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.offline {
  display: none;
  padding: 7px var(--gutter);
  background: var(--orange-soft); color: var(--orange-strong);
  font-size: 12px; font-weight: 700; text-align: center;
}
body.is-offline .offline { display: block; }

/* Au-dela de 520 px on centre : l'app reste une app, elle ne
   s'etale pas en page web. */
@media (min-width: 520px) {
  .topbar, .screen, .nav { max-width: 520px; margin-inline: auto; }
  .nav { left: 50%; transform: translateX(-50%); border-inline: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =============================================================
   Feuilles glissantes
   Une boite de dialogue centree est un reflexe de bureau. Sur
   mobile, ce qui arrive vient du bas, a portee du pouce.
   ============================================================= */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 24, 39, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: 88vh; overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 8px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  transform: translateY(101%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.sheet.open { transform: translateY(0); }

.sheet-grab {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--line); margin: 4px auto 12px;
}
.sheet-title { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.sheet-sub { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.sheet-body { margin-top: 14px; }

/* ------------------------------------------- Saisie des numeros */
.num-grid { display: flex; gap: 7px; }
.num-input {
  flex: 1; min-width: 0; aspect-ratio: 1; max-width: 56px;
  border: 2px solid var(--line); border-radius: 50%;
  background: var(--surface);
  text-align: center;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 800; color: var(--ink);
  -moz-appearance: textfield;
}
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input:focus { outline: none; border-color: var(--orange); }
.num-input.filled { background: var(--orange); border-color: var(--orange); color: #fff; }
.num-grid-mac .num-input.filled { background: var(--surface); border-color: var(--ink-2); color: var(--ink); }

.field-label {
  display: flex; align-items: center; gap: 7px;
  margin: 14px 0 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.field-label .hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* ----------------------------------------- Champs de formulaire */
.input {
  width: 100%; height: 46px;
  padding: 0 13px;
  border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600;
}
.input:focus { outline: none; border-color: var(--orange); }
.input + .input { margin-top: 9px; }

.sheet-actions { margin-top: 16px; }
.sheet-actions .btn-primary { width: 100%; }

.notice {
  margin-top: 12px; padding: 11px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.notice-info { background: var(--data-0); color: var(--data-4); }
.notice-warn { background: var(--orange-soft); color: var(--orange-strong); }
.notice-ok { background: var(--green-soft); color: #0A6B4A; }

.link-btn {
  margin-top: 12px; width: 100%;
  font-size: 13px; font-weight: 700; color: var(--orange-strong);
  padding: 8px;
}

/* Carte en attente : cliquable, donc elle doit le montrer. */
.mini-wait { cursor: pointer; transition: transform .09s ease; }
.mini-wait:active { transform: scale(.97); }
.mini-wait .mini-cta {
  margin-top: 7px; text-align: center;
  font-size: 11px; font-weight: 800; color: var(--orange-strong);
}

/* =============================================================
   La Grille 90
   Le public ne lit pas les graphiques, mais il connait par coeur
   la grille du bulletin. On recolore donc toujours le meme objet
   au lieu de tracer des courbes : un seul repere visuel a
   apprendre, et toutes les analyses se lisent a travers lui.
   ============================================================= */

/* Echelle de donnees : indigo, volontairement etrangere a l'orange
   et au vert de la marque. Un numero chaud ne doit jamais pouvoir
   se confondre avec un bouton de validation. */
:root {
  --l0-bg: #EEF2FF; --l0-fg: #3730A3;
  --l1-bg: #C7D2FE; --l1-fg: #312E81;
  --l2-bg: #A5B4FC; --l2-fg: #1E1B4B;
  --l3-bg: #4F46E5; --l3-fg: #FFFFFF;
  --l4-bg: #312E81; --l4-fg: #FFFFFF;
}

.chips { padding-bottom: 2px; }
.chip {
  flex: 0 0 auto;
  height: 34px; padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 700; letter-spacing: -.2px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .09s ease;
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.chip .chip-n { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 600; }
.chip[aria-pressed="true"] .chip-n { opacity: .8; }

/* ------------------------------------------------- Fiabilite */
/* Jamais une statistique sans ce bandeau : sur la plupart des
   tirages nommes, l'echantillon ne permet aucune conclusion. */
.reliability {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px var(--pad); margin-top: var(--gap);
}
.rel-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; flex: none; }
.rel-faible  { background: var(--red); box-shadow: 0 0 0 3px #FEE2E2; }
.rel-moyenne { background: #D97706; box-shadow: 0 0 0 3px #FEF3C7; }
.rel-bonne   { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.rel-title { font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; }
.rel-text { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-top: 2px; line-height: 1.35; }

/* ----------------------------------------------- La grille */
.grid-card { padding: var(--pad); margin-top: var(--gap); }
.grid90 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 7px;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 800;
  transition: transform .08s ease;
}
.cell:active { transform: scale(.9); }
.cell-0 { background: var(--l0-bg); color: var(--l0-fg); }
.cell-1 { background: var(--l1-bg); color: var(--l1-fg); }
.cell-2 { background: var(--l2-bg); color: var(--l2-fg); }
.cell-3 { background: var(--l3-bg); color: var(--l3-fg); }
.cell-4 { background: var(--l4-bg); color: var(--l4-fg); }
/* Un ecart que le hasard n'explique pas, apres correction de
   Bonferroni. C'est rare, et ca doit le rester. */
.cell-sig { box-shadow: 0 0 0 2px var(--orange); }

.legend {
  display: flex; align-items: center; gap: 7px;
  margin-top: 11px;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
}
.legend-scale { display: flex; gap: 2px; flex: none; }
.legend-scale i {
  width: 17px; height: 9px; border-radius: 2px; display: block;
}
.legend-max { margin-left: auto; }

.stat-row { display: flex; align-items: center; gap: 10px; padding: 11px var(--pad); }
.stat-label { font-size: 13.5px; font-weight: 700; }
.stat-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.stat-verdict {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.verdict-uniforme { background: var(--green-soft); color: #0A6B4A; }
.verdict-ecart { background: #FEE2E2; color: #991B1B; }
.verdict-court { background: var(--ground); color: var(--ink-2); }

/* ------------------------------------- Fiche d'un numero */
.num-hero { display: flex; align-items: center; gap: 12px; }
.num-badge {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 800;
}
.kv { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv-k { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.kv-v {
  margin-left: auto; font-family: var(--font-display);
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14.5px;
}
.mini-balls { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.mini-ball {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--data-0); color: var(--data-4);
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px;
}

.rank-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rank-label { font-size: 9.5px; font-weight: 700; color: var(--ink-3); letter-spacing: -.1px; }

/* ------------------------------------------------- Filtres croises */
.filter-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 12px; font-weight: 800;
}
.filter-btn:active { transform: scale(.96); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-btn span:not(:empty) {
  background: var(--orange); color: #fff;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-size: 10px; font-variant-numeric: tabular-nums;
}

/* Le compteur d'echantillon : il doit rester sous les yeux pendant
   qu'on filtre, sinon on croit decouvrir ce qu'on a fabrique. */
.sample-meter { margin-top: 9px; }
.sample-bar {
  height: 6px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-top: 6px;
}
.sample-bar i { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.bar-bonne { background: var(--green); }
.bar-moyenne { background: #D97706; }
.bar-faible { background: var(--red); }
.sample-line {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.sample-line b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.sample-line span { margin-left: auto; color: var(--ink-3); font-weight: 600; }

.weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.weekday-grid .chip { width: 100%; justify-content: center; padding: 0; height: 38px; }

/* =============================================================
   Ma methode
   Le differenciateur du produit : ce n'est pas l'app qui dit
   quoi jouer, c'est le joueur qui met sa methode a l'epreuve.
   ============================================================= */

.strategy { padding: var(--pad); }
.strategy-top { display: flex; align-items: flex-start; gap: 10px; }
.strategy-name { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.strategy-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* Le ROI, en grand. C'est le chiffre qui tranche. */
.roi {
  margin-left: auto; flex: none; text-align: right;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.roi b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.roi span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.roi-perte b, .roi-perte span { color: var(--red); }
.roi-gain b, .roi-gain span { color: var(--green); }

.strategy-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
}
.stat-cell { text-align: center; }
.stat-cell b {
  display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 800;
}
.stat-cell span { font-size: 10px; font-weight: 700; color: var(--ink-3); }

/* Le nuage des methodes au hasard, et ou se situe la sienne. */
.baseline { margin-top: 11px; }
.baseline-track {
  position: relative; height: 22px; margin-top: 7px;
}
.baseline-band {
  position: absolute; top: 8px; height: 6px; border-radius: 999px;
  background: var(--data-0);
}
.baseline-mid { position: absolute; top: 5px; width: 2px; height: 12px; background: var(--data-4); opacity: .45; }
.baseline-you {
  position: absolute; top: 2px; width: 3px; height: 18px; border-radius: 2px;
  background: var(--orange-strong);
}
.baseline-legend {
  display: flex; font-size: 10px; font-weight: 700; color: var(--ink-3); margin-top: 2px;
}
.baseline-legend span:last-child { margin-left: auto; }

.spark { display: block; width: 100%; height: 42px; margin-top: 10px; }

.pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.pill-pending { background: var(--data-0); color: var(--data-4); }
.pill-failed { background: #FEE2E2; color: #991B1B; }

.formula-row { display: flex; align-items: center; gap: 10px; padding: 11px var(--pad); }
.formula-code {
  width: 42px; flex: none; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  padding: 5px 0; border-radius: 8px; background: var(--ground); color: var(--ink-2);
}
.formula-return {
  margin-left: auto; flex: none; text-align: right;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 15px;
}
.return-bad { color: var(--red); }
.return-mid { color: #B45309; }

/* =============================================================
   Le Carnet
   Ce que le joueur faisait sur papier. Le pronostic verrouille
   est la piece qui rend le bilan credible : s'il pouvait etre
   retouche, chacun se souviendrait d'avoir eu raison.
   ============================================================= */

.bilan { padding: var(--pad); margin-top: var(--gap); }
.bilan-net {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.05;
}
.bilan-net.perte { color: var(--red); }
.bilan-net.gain { color: var(--green); }
.bilan-label { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 2px; }

.forecast { padding: 11px var(--pad); display: flex; align-items: center; gap: 10px; }
.forecast-id { min-width: 0; flex: 1; }
.forecast-name { font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; }
.forecast-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.forecast-balls { display: flex; gap: 4px; flex: none; }
.forecast-balls .ball { width: 26px; height: 26px; max-width: none; font-size: 11.5px; }

.verdict-tag {
  flex: none; min-width: 58px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px;
}
.tag-gagne { background: var(--green-soft); color: #0A6B4A; }
.tag-perdu { background: #FEE2E2; color: #991B1B; }
.tag-attente { background: var(--data-0); color: var(--data-4); }

/* L'horodatage : c'est lui qui prouve que le pronostic precede le tirage. */
.locked {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--ink-3);
}

.bet-row { padding: 11px var(--pad); display: flex; align-items: center; gap: 10px; }
.bet-amount {
  margin-left: auto; flex: none; text-align: right;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 14.5px;
}
.bet-amount.perte { color: var(--red); }
.bet-amount.gain { color: var(--green); }

.note-row { padding: 11px var(--pad); }
.note-body { font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; }
.note-meta { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 5px; }

.textarea {
  width: 100%; min-height: 96px; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; resize: vertical;
}
.textarea:focus { outline: none; border-color: var(--orange); }

.swipe-del {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
}
.swipe-del:active { background: var(--ground); color: var(--red); }

/* ------------------------------------------------- A surveiller */
/* Ces numeros ne sortiront pas plus que les autres : trois croyances
   ont ete testees et refutees (docs/analyse-initiale.md). La liste ne
   repose que sur des faits verifiables, et le bandeau le dit. */
.watch-card { padding: var(--pad); margin-top: 2px; }
.watch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.watch-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px; border-radius: 10px; background: var(--ground);
  transition: transform .09s ease;
}
.watch-cell:active { transform: scale(.94); }
.watch-cell.record { background: var(--orange-soft); }
.watch-num {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line);
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 14px; color: var(--ink);
}
.watch-cell.record .watch-num { border-color: var(--orange); color: var(--orange-strong); }
.watch-gap {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 800; color: var(--ink-2);
}
.watch-ratio { font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.watch-cell.record .watch-ratio { color: var(--orange-strong); }

/* ---------------------------------------- Carte de resultat detaillee */
.result-card { padding: var(--pad); }
.result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.result-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.3px; }
.result-time { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.result-card .balls { gap: 5px; }
.result-card .ball { max-width: 42px; font-size: 15px; }
.result-card .balls-mac .ball { max-width: 34px; font-size: 13px; }
.result-card .line-tag { margin: 8px 0 4px; }

/* ------------------------------------------------- Page Historique */
.turbo-stat {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.turbo-stat:last-child { border-bottom: 0; }
.turbo-stat b {
  margin-left: auto; font-family: var(--font-display);
  font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink);
}
.combo-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px var(--pad);
}
.combo-balls { display: flex; gap: 4px; }
.combo-balls .ball { width: 28px; height: 28px; max-width: none; font-size: 12px; }
.combo-count {
  margin-left: auto; font-family: var(--font-display);
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; color: var(--ink-2);
}

/* --------------------------------------------- Page interne */
.back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0 10px -4px; padding: 6px 8px;
  font-size: 13.5px; font-weight: 700; color: var(--orange-strong);
  border-radius: 8px;
}
.back-btn:active { background: var(--orange-soft); }
.page-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.7px; }
.page-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); font-weight: 600; }

/* Le groupe « sortis recemment » : la croyance la plus repandue, rendue
   parce que le joueur la cherche — jamais parce qu'elle predit. */
.watch-cell.hot { background: var(--data-0); }
.watch-cell.hot .watch-num { border-color: var(--data-4); color: var(--data-4); }
.watch-cell.hot .watch-ratio { color: var(--data-4); }
.watch-split { display: flex; gap: 3px; justify-content: center; }
.watch-split span {
  font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 4px;
}
.split-w { background: var(--orange-soft); color: var(--orange-strong); }
.split-m { background: var(--ground); color: var(--ink-2); }

/* ------------------------------ Le contexte d'une sortie */
/* Une frequence dit « 553 fois ». Elle ne dit pas avec quoi. Ces lignes
   montrent le tirage entier : le numero cherche en orange, ceux qui
   l'accompagnaient en retrait. */
.appearance { padding: 10px var(--pad); }
.appearance + .appearance { border-top: 1px solid var(--line); }
.app-head {
  display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.app-head .app-date { margin-left: auto; font-weight: 600; color: var(--ink-3); font-size: 11px; }
.app-line { display: flex; align-items: center; gap: 4px; }
.app-line + .app-line { margin-top: 5px; }
.app-tag {
  width: 16px; flex: none;
  font-size: 9px; font-weight: 800; color: var(--ink-3); text-transform: uppercase;
}
.app-ball {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 800;
  background: var(--ground); color: var(--ink-3);
}
.app-ball.cible { background: var(--orange); color: #fff; }
.app-ball.mac { background: transparent; border: 1.5px solid var(--line); }
.app-ball.mac.cible { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ------------------------------------------- Page Historique */
.norme-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px var(--pad);
}
.norme-balls { display: flex; gap: 5px; flex: none; }
.norme-balls .ball { width: 32px; height: 32px; max-width: none; font-size: 13px; }
.norme-split { display: flex; gap: 4px; margin-top: 3px; }
.norme-split span { font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.norme-count {
  margin-left: auto; text-align: right; flex: none;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.norme-count b { display: block; font-size: 16px; font-weight: 800; }
.norme-count span { font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.norme-count.remarquable b { color: var(--orange-strong); }

/* La pagination : six ans font plus de quinze mille tirages, on en sert
   une tranche et on dit ou l'on en est. */
.pager {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--gap); padding: 10px var(--pad);
}
.pager button {
  height: 34px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.pager button:disabled { opacity: .4; }
.pager button:not(:disabled):active { transform: scale(.96); }
.pager-info {
  flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.pair-search { display: flex; gap: 7px; align-items: center; margin-top: 4px; }
.pair-search .num-input { max-width: 52px; }
.pair-search .btn { height: 44px; padding: 0 16px; flex: none; }