/* ============ ÓRAMA RUN — feuille de style ============
   Charte Όραμα : fond noir franc, couleurs Google saturées. Mêmes
   jetons, mêmes noms de rôle que /ads et /trading. Ne pas introduire
   de couleur hors de cette liste.

   LA RÈGLE : le vert et le rouge disent le RÉSULTAT, et rien d'autre —
   ici, séance honorée ou séance manquée. Une séance « du jour » ou un
   onglet actif se signalent en BLEU (--acc). Sans cette discipline,
   l'onglet sélectionné se lirait comme une séance validée.
   ======================================================================== */
:root{
  color-scheme: dark;

  --bg:#000000; --bg2:#0A0A0B; --panel:#121316; --panel2:#1A1B1E;
  --line:#2A2B2E; --line2:#3C4043;
  --txt:#FFFFFF; --txt2:#BDC1C6; --txt3:#9AA0A6;

  /* Résultat — et RIEN d'autre */
  --pos:#34A853; --pos-dim:rgba(52,168,83,.14);
  --neg:#EA4335; --neg-dim:rgba(234,67,53,.14);
  --warn:#FBBC05;

  /* Interface : sélection, focus, actions */
  --acc:#4285F4; --acc2:#1A73E8;

  /* Identité du module dans la famille Órama : Ads est bleu, Trading
     vert, Run ambre. Même teinte que --warn, et c'est assumé — elle ne
     sert qu'à la marque (logo, nom du module), jamais à un état. */
  --mod:#FBBC05; --mod-clair:#FDD663;

  --r:14px; --shadow:0 8px 30px rgba(0,0,0,.45);
  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
h1,h2,h3,h4{font-family:var(--font)}
body{
  background:
    radial-gradient(1100px 600px at 78% -12%, rgba(66,133,244,.07), transparent 60%),
    radial-gradient(900px 500px at 5% 105%, rgba(251,188,5,.05), transparent 60%),
    var(--bg);
  color:var(--txt);
  font:14px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.num,table,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--mono)}
.dim{color:var(--txt2)} .dim3{color:var(--txt3)}

/* ---------- Layout ---------- */
/* Barre latérale à partir de 900 px, bandeau d'onglets horizontal en
   dessous. Pas de tiroir escamotable : quatre sections tiennent dans une
   bande défilante, et une appli qu'on ouvre en short au bord de la route
   ne doit demander aucun geste avant d'afficher le plan du jour. */
#app{display:flex;flex-direction:column;min-height:100vh}
aside{
  background:var(--verre-bas);backdrop-filter:var(--verre-flou);-webkit-backdrop-filter:var(--verre-flou);
  border-bottom:1px solid var(--line);padding:13px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;
  background:var(--panel2);border:1px solid var(--line);
  display:grid;place-items:center;
}
.brand .mark svg{display:block;width:22px;height:22px}
.brand h1{font-size:14px;font-weight:600;letter-spacing:-.01em}
.brand p{font-size:11px;color:var(--txt3);margin-top:1px;letter-spacing:.02em}
.brand p .mod{color:var(--mod-texte,var(--mod-clair));font-weight:600}
/* Bouton de retour au portail. Discret par construction : on le cherche
   quand on en a besoin, il ne doit pas concurrencer la navigation. */
.retour{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
  margin-left:4px;border-radius:9px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);
  color:var(--txt3);font-size:15px;line-height:1;transition:.14s;
}
.retour:hover{border-color:var(--line2);color:var(--txt);background:var(--panel2)}
.retour:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

nav{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;margin-left:auto;
    -webkit-overflow-scrolling:touch;max-width:100%}
nav::-webkit-scrollbar{display:none}
nav button{
  all:unset;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:10px;
  color:var(--txt2);font-size:13.5px;cursor:pointer;font-weight:500;transition:.14s;white-space:nowrap;
}
nav button:hover{background:var(--survol);color:var(--txt)}
nav button.on{background:linear-gradient(180deg,rgba(66,133,244,.22),rgba(66,133,244,.07));
  color:var(--txt);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc)}
nav button .ico{opacity:.9;font-size:14px}

main{flex:1;min-width:0;padding:22px 26px 80px;max-width:1180px;width:100%;margin-inline:auto}
@media(max-width:640px){ main{padding:16px 14px 70px} aside{padding:11px 13px} }

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.topbar h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.topbar .sub{font-size:12.5px;color:var(--txt3);margin-top:3px;line-height:1.5;max-width:62ch}
.spacer{flex:1}
.btn{all:unset;padding:7px 13px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
     font-size:12.5px;color:var(--txt2);cursor:pointer;font-weight:600;transition:.14s}
.btn:hover{border-color:var(--line2);color:var(--txt);background:var(--panel2)}
.btn.acc{background:var(--acc-plein);border-color:var(--acc-plein);color:#fff}
.btn.acc:hover{filter:brightness(1.12)}

/* ---------- Cards / KPI ---------- */
.grid{display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;
      position:relative;overflow:hidden;margin-bottom:14px}
.card h3{font-size:12.5px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .hint{font-size:11px;color:var(--txt3);font-weight:500;margin-left:auto}
.card .csub{font-size:11.5px;color:var(--txt3);margin-top:3px;margin-bottom:13px;line-height:1.55;max-width:74ch}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--acc);opacity:.55}
.kpi.k-pos::after{background:var(--pos)} .kpi.k-neg::after{background:var(--neg)} .kpi.k-warn::after{background:var(--warn)}
.kpi .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--txt3);font-weight:700}
.kpi .val{font-size:25px;font-weight:750;letter-spacing:-.03em;margin-top:7px;line-height:1.1;
          font-variant-numeric:tabular-nums}
.kpi .val.sm{font-size:19px}
.kpi .meta{font-size:11px;color:var(--txt3);margin-top:5px;line-height:1.45}

/* Chips / badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:999px;font-size:11px;
  font-weight:700;background:var(--creux);color:var(--txt2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.badge.p{background:var(--pos-dim);color:var(--pos)}
.badge.n{background:var(--neg-dim);color:var(--neg)}
.badge.a{background:rgba(66,133,244,.16);color:var(--acc)}
.badge.w{background:rgba(251,188,5,.15);color:var(--warn)}

/* ---------- Compte à rebours ---------- */
.cr{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    background:linear-gradient(120deg,rgba(66,133,244,.13),rgba(251,188,5,.06) 70%,transparent);
    border:1px solid rgba(66,133,244,.26);border-radius:var(--r);padding:17px 19px;margin-bottom:14px}
.cr .j{font-size:44px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.cr .j small{font-size:14px;font-weight:600;color:var(--txt2);letter-spacing:0;margin-left:7px}
.cr .t{font-size:13.5px;font-weight:650}
.cr .t span{display:block;font-size:11.5px;color:var(--txt3);font-weight:500;margin-top:3px;line-height:1.5}
.cr .obj{margin-left:auto;text-align:right}
.cr .obj b{font-size:20px;font-weight:750;letter-spacing:-.02em;display:block}
.cr .obj span{font-size:11px;color:var(--txt3)}
@media(max-width:560px){ .cr .obj{margin-left:0;text-align:left} }

/* ---------- Séances ---------- */
.sem{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.sem.now{border-color:rgba(66,133,244,.5);box-shadow:0 0 0 1px rgba(66,133,244,.18)}
.sem-h{display:flex;align-items:center;gap:13px;padding:14px 16px;cursor:pointer;transition:.14s;flex-wrap:wrap}
.sem-h:hover{background:var(--survol)}
.sem-n{font-size:11px;font-weight:700;color:var(--txt3);letter-spacing:.09em;text-transform:uppercase;
       min-width:64px}
.sem-t{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sem-t span{display:block;font-size:11px;color:var(--txt3);font-weight:500;margin-top:2px}
.sem-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sem-km{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sem-km span{font-size:11px;color:var(--txt3);font-weight:500}
.chev{color:var(--txt3);font-size:12px;transition:.2s;width:14px;text-align:center}
.sem.open .chev{transform:rotate(90deg)}
.sem-b{display:none;border-top:1px solid var(--line);background:var(--bg2);padding:15px 16px}
.sem.open .sem-b{display:block}
.but{background:rgba(66,133,244,.07);border:1px solid rgba(66,133,244,.18);border-radius:11px;
     padding:11px 13px;font-size:12.5px;line-height:1.65;color:var(--txt2);margin-bottom:14px}

/* Une séance : la case, le libellé, les chiffres, le détail. */
.sc{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:9px;
    background:var(--survol);transition:.14s}
.sc.fait{border-color:rgba(52,168,83,.4);background:var(--pos-dim)}
.sc.rate{border-color:rgba(234,67,53,.35);background:var(--neg-dim)}
.sc.today{box-shadow:inset 3px 0 0 var(--acc)}
.sc-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ck{all:unset;width:22px;height:22px;flex:0 0 22px;border-radius:7px;border:1.5px solid var(--line2);
    cursor:pointer;display:grid;place-items:center;font-size:12px;color:transparent;transition:.14s}
.ck:hover{border-color:var(--acc)}
/* Aplat sous du blanc, pas encre sur la page : `--pos` y tombe à 3,06
   et `--neg` à 3,92 dans le thème sombre. */
.ck.on{background:var(--pos-plein);border-color:var(--pos-plein);color:#fff}
.ck.off{background:var(--neg-plein);border-color:var(--neg-plein);color:#fff}
.sc-d{font-size:11px;color:var(--txt3);font-weight:600;text-transform:capitalize;min-width:74px}
.sc-n{font-size:13.5px;font-weight:650}
.sc-m{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sc-txt{font-size:12.5px;color:var(--txt2);line-height:1.65;margin-top:9px;padding-left:33px}
@media(max-width:560px){ .sc-txt{padding-left:0} .sc-m{margin-left:33px} }
.sc-in{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px;padding-left:33px}
@media(max-width:560px){ .sc-in{padding-left:0} }
.fld{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
     border-radius:10px;padding:5px 10px}
.fld label{font-size:10px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.fld input{all:unset;width:58px;color:var(--txt);font-size:13px;font-variant-numeric:tabular-nums;
           font-family:var(--mono)}
.fld input:focus{color:var(--mod-texte,var(--mod-clair))}
.fld .u{font-size:11px;color:var(--txt3)}

/* ---------- Graphiques ---------- */
.chart svg{display:block;width:100%;overflow:visible}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11.5px;color:var(--txt2);margin-top:11px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
thead th{text-align:right;padding:9px 11px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--txt3);font-weight:700;background:var(--bg2);white-space:nowrap;border-bottom:1px solid var(--line)}
thead th:first-child,tbody td:first-child{text-align:left}
tbody td{padding:8px 11px;text-align:right;border-bottom:1px solid rgba(42,43,46,.55);white-space:nowrap}
/* Les cellules que l'on veut à gauche. La classe `l` était posée dans
   le HTML depuis le début — sur les noms de séance, les verdicts, les
   libellés — mais aucune règle ne la définissait : les en-têtes
   s'alignaient à gauche et leurs colonnes à droite. */
tbody td.l{text-align:left}
tbody tr:hover{background:var(--survol)}
tbody tr.hi{background:rgba(66,133,244,.10)}

/* ---------- Constats / bascules ---------- */
.ins{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:12px;
     padding:13px 15px;margin-bottom:10px}
.ins.hi{border-left-color:var(--neg)} .ins.md{border-left-color:var(--warn)}
.ins.lo{border-left-color:var(--acc)} .ins.ok{border-left-color:var(--pos)}
.ins h4{font-size:13.5px;font-weight:700;margin-bottom:6px}
.ins p{font-size:12.5px;color:var(--txt2);line-height:1.68}
.ins p + p{margin-top:7px}
.ins b{color:var(--txt);font-weight:650}

/* Allures de référence */
.all{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.all .a{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.all .a .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3);font-weight:700}
.all .a .v{font-size:17px;font-weight:750;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
           font-family:var(--mono)}
.all .a .m{font-size:11px;color:var(--txt3);margin-top:4px;line-height:1.45}

/* Barre de progression */
.bar{height:7px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;background:var(--acc);border-radius:99px;transition:width .4s}
.bar i.p{background:var(--pos)}

.foot{font-size:11px;color:var(--txt3);line-height:1.7;margin-top:26px;padding-top:16px;
      border-top:1px solid var(--line)}
.foot b{color:var(--txt2)}

/* Le découpage au kilomètre, replié sous la lecture par répétitions :
   gardé pour mémoire, pas pour être cru. */
details.au-km{margin-top:12px}
details.au-km summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--txt2);padding:4px 0}
details.au-km summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}