/* Mini App Telegram « 📊 Stats ». Charte de l'interface (ux.md) : 4 tailles de
   texte (34 / 15 / 13 / 11), Geist + Geist Mono pour les chiffres, vert = gain,
   rouge = perte, jaune = sélection. Couleurs du thème Telegram, repli sur la
   palette d'app.css. */
:root {
  --bg:    var(--tg-theme-bg-color, #0b0c10);
  --card:  var(--tg-theme-secondary-bg-color, #14161c);
  --text:  var(--tg-theme-text-color, #e9ecef);
  --dim:   var(--tg-theme-hint-color, #8a8f9b);
  --line:  rgba(138, 143, 155, 0.16);
  --green: #5fc28b;
  --red:   #e26d6d;
  --accent: #f5b73c;
  --or: #f2b65c;   /* meilleur jour du mois, comme GMGN */
  --fs-xl: 34px; --fs-md: 15px; --fs-sm: 13px; --fs-xs: 11px;
  --sans: "Geist", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-scheme="light"] { --green: #23935a; --red: #c94545; --line: rgba(0, 0, 0, 0.08); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); }
body {
  font: 400 var(--fs-md)/1.35 var(--sans);
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.dim { color: var(--dim); }

/* En-tête : onglets Résumé / Calendrier + filtre moteur, puis période (ou mois).
   Tout en haut : une barre fixée en bas peut tomber sous la fenêtre de Telegram. */
.entete { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.onglets { flex: 1; }
.onglets button { font-size: var(--fs-md); padding: 7px 0; }
.top { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.seg { display: flex; background: var(--card); border-radius: 10px; padding: 3px; }
.top .seg { flex: 1; }
.seg button { flex: 1; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-sm); color: var(--dim); }
.seg button.on { background: var(--bg); color: var(--text); font-weight: 600; }
.chip { background: var(--card); border-radius: 10px; padding: 9px 12px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.mois { flex: 1; display: flex; align-items: center; justify-content: space-between;
        background: var(--card); border-radius: 10px; padding: 3px; }
.mois span { font-size: var(--fs-sm); font-weight: 600; text-transform: capitalize; }
.mois button { width: 40px; padding: 6px 0; font-size: var(--fs-md); color: var(--dim); }
.mois button:disabled { visibility: hidden; }

/* Chiffre principal */
.hero { margin: 0 2px 18px; }
.hero .tete { display: flex; justify-content: space-between; align-items: center; }
/* Petit segment (unité $ / SOL, Barres / Courbe) */
.seg.petit { padding: 2px; }
.seg.petit button { padding: 3px 10px; font-size: var(--fs-xs); }
.top .seg.petit { flex: none; }
.lbl { font-size: var(--fs-sm); color: var(--dim); }
.hero .val { font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; margin: 6px 0 4px; }
.sub { font-size: var(--fs-sm); color: var(--dim); }
.solde { display: flex; justify-content: space-between; align-items: baseline;
         margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.solde .lbl { align-self: center; }
.solde b { font-weight: 600; }

/* Cartes */
.card { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.card h2 { font-size: var(--fs-xs); font-weight: 600; color: var(--dim); text-transform: uppercase;
           letter-spacing: 0.5px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.card h2 .seg { background: var(--bg); }
.card h2 .seg button { text-transform: none; letter-spacing: 0; }
.card h2 .seg button.on { background: var(--card); }
.card h2 .compte { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-sm); }

/* Graphique en barres (HTML : chiffres lisibles, jamais rognés) */
.barres { position: relative; height: 150px; display: flex; gap: 3px; }
/* Le doigt lit le graphique sans faire défiler la page */
.barres, .courbe-box { touch-action: none; }
.barres .zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.barres .col { position: relative; flex: 1; min-width: 0; }
.barres i { position: absolute; left: 0; right: 0; border-radius: 3px; }
.barres i.pos { background: var(--green); }
.barres i.neg { background: var(--red); }
.barres .lab { position: absolute; left: -6px; right: -6px; text-align: center; font-size: var(--fs-xs); white-space: nowrap; }
.jours { display: flex; gap: 3px; margin-top: 6px; }
.jours span { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--dim); }
.jours span.on { color: var(--text); font-weight: 600; }
.courbe { display: block; width: 100%; height: 150px; }
.lecture { text-align: center; font-size: var(--fs-sm); margin: 10px 0 12px; min-height: 18px; }
.reperes { display: flex; border-top: 1px solid var(--line); padding-top: 10px; }
.reperes div { flex: 1; text-align: center; }
.reperes .lbl, .synthese .lbl, .tuile .lbl { font-size: var(--fs-xs); }
.reperes .num { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; }

/* Listes */
.row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.sous + .row, h2 + .row { border-top: 0; }
.row .t { font-size: var(--fs-xs); color: var(--dim); width: 44px; flex: none; }
.row .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .n { font-size: var(--fs-xs); color: var(--dim); white-space: nowrap; }
.row .v { font-weight: 600; text-align: right; white-space: nowrap; }
.row .chev { color: var(--dim); font-size: var(--fs-md); margin-left: -4px; }
.sous { font-size: var(--fs-xs); color: var(--dim); margin: 10px 0 2px; }
.card h2 + .sous { margin-top: 0; }
.vide { font-size: var(--fs-sm); color: var(--dim); padding: 4px 0 2px; }

/* Calendrier — à la GMGN : carte de synthèse (PnL, jours gagnants, jours
   perdants) bordée en bas par la barre de proportion ; cases de teinte unie,
   numéro du jour au-dessus du montant ; meilleure série sous la grille. */
.synthese { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
            background: var(--card); border-radius: 14px; padding: 12px 14px 15px; margin-bottom: 16px; overflow: hidden; }
.synthese .lbl { white-space: nowrap; }
.synthese .num { font-size: var(--fs-md); font-weight: 600; margin-top: 4px; white-space: nowrap; }
.synthese > div:nth-child(2) { text-align: center; }
.synthese > div:nth-child(3) { text-align: right; }
.ratio { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; height: 3px; }
.ratio i { background: var(--green); }
.ratio i.r { background: var(--red); }
.grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.grille .jsem { font-size: var(--fs-xs); color: var(--dim); text-align: center; padding-bottom: 4px; }
.jour { height: 64px; border-radius: 8px; background: rgba(138, 143, 155, 0.07); border: 1.5px solid transparent;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.jour .d { font-size: var(--fs-md); font-weight: 600; line-height: 1; }
.jour .x { font-size: var(--fs-sm); font-weight: 600; line-height: 1; white-space: nowrap;
           font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.jour.gain { background: rgba(95, 194, 139, 0.15); }
.jour.gain .x { color: var(--green); }
.jour.perte { background: rgba(226, 109, 109, 0.16); }
.jour.perte .x { color: var(--red); }
.jour.vide .d, .jour.fut .d { color: var(--dim); font-weight: 400; }
.jour.vide .x { color: var(--dim); font-weight: 400; }
.jour.fut { background: rgba(138, 143, 155, 0.035); }
.jour.or { background: rgba(232, 160, 74, 0.24); }
.jour.or .x, .tuile .num.or { color: var(--or); }
.jour.auj .d { color: var(--accent); font-weight: 600; }
.jour.sel { border-color: var(--text); }
.serie { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--dim); margin: 14px 2px 14px; }
.serie b { color: var(--text); font-weight: 600; }
.carte-jour .reperes { border-top: 0; padding-top: 2px; }
.carte-jour .reperes .num { font-size: var(--fs-md); }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tuile { background: var(--card); border-radius: 12px; padding: 10px 10px 9px; }
.tuile .num { font-size: var(--fs-md); font-weight: 600; margin: 5px 0 2px; white-space: nowrap; }
.tuile .sub { font-size: var(--fs-xs); }
.note { font-size: var(--fs-xs); color: var(--dim); margin-top: 14px; text-align: center; }

/* Repère du graphique : barre choisie en surbrillance, trait + point sur la courbe */
.barres i { opacity: 0.35; transition: opacity 0.1s; }
.barres .lab { opacity: 0.55; }
.barres .sel i, .barres .sel .lab { opacity: 1; }
.barres .sel .lab { font-weight: 600; }
.courbe-box { position: relative; height: 150px; }
.courbe-box .guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dim); opacity: 0.6; }
.courbe-box .point { position: absolute; width: 11px; height: 11px; border-radius: 50%;
                     border: 2px solid var(--card); transform: translate(-50%, -50%); }

/* Frais : ligne cliquable sous le PnL, détail dépliable */
.frais { display: inline-flex; gap: 6px; align-items: baseline; margin-top: 2px; padding: 2px 0;
         font-size: var(--fs-sm); color: var(--dim); }
.frais .num { color: var(--text); }
.frais-detail { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card); font-size: var(--fs-sm); }
.frais-detail > div { display: flex; justify-content: space-between; padding: 3px 0; }
.frais-detail .dim { font-size: var(--fs-xs); padding-top: 5px; }

.maj { font-size: var(--fs-xs); color: var(--dim); text-align: center; margin-top: 4px; }
.tirer { text-align: center; font-size: var(--fs-xs); color: var(--dim); height: 0; overflow: hidden; transition: height .15s; }
.erreur { text-align: center; color: var(--dim); padding: 60px 20px; font-size: var(--fs-sm); }