/* ============================================================================
   ICT TRADING COCKPIT — rapport financier clair (fintech sobre)
   Esthétique : fond ivoire-gris très clair nuancé (jamais blanc pur en arrière-
   plan), panneaux blancs à bordures fines + ombres légères, encre sombre,
   vert/rouge financiers profonds recalibrés pour fond clair, accent OR profond
   signature utilisé avec parcimonie. Mono IBM Plex pour TOUS les chiffres,
   display Oswald condensé pour titres/labels. Détail : grille discrète au fond.
   Mobile-first ; bottom-nav sur téléphone, barre d'onglets en haut sur desktop.
   ========================================================================= */

:root {
  /* --- couleurs (rapport financier haut de gamme, pas de pastel criard) --- */
  --bg:        #f0efea;   /* ivoire-gris très clair nuancé, pas #fff pur */
  --bg-2:      #faf9f6;   /* fond légèrement levé (header, nav, inserts) */
  --panel:     #ffffff;   /* panneaux / cartes */
  --panel-2:   #fbfaf7;   /* panneaux survolés / lignes alternées */
  --line:      #dcdad1;   /* bordures fines */
  --line-soft: #e8e6de;
  --text:      #1d232b;   /* encre principale, légèrement froide */
  --muted:     #5a6472;   /* texte secondaire — AA sur --bg ET --panel */
  --dim:       #8a919c;   /* placeholders / décor uniquement */
  --green:     #0c7a4d;   /* gain — vert financier profond, lisible sur clair */
  --green-soft:#bcdfcd;   /* bordures / fonds teintés gain */
  --red:       #b42334;   /* perte — rouge financier profond */
  --red-soft:  #e9c6cb;
  --accent:    #9a6b06;   /* OR/ambre profond signature, avec parcimonie */
  --accent-soft:#e3d4ab;  /* liserés / bordures teintés or */
  --cyan:      #0e7490;   /* accent secondaire froid (équité, liens) */
  --blue:      #2563c4;   /* devise USD (badge news) — teinte déjà utilisée (KZ ny_pm) */

  /* ombres légères et discrètes (remplacent les glows du thème sombre) */
  --shadow-1: 0 1px 2px rgba(22, 27, 34, .05), 0 1px 3px rgba(22, 27, 34, .07);
  --shadow-2: 0 2px 4px rgba(22, 27, 34, .06), 0 10px 28px -14px rgba(22, 27, 34, .20);

  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --disp: "Oswald", "IBM Plex Mono", system-ui, sans-serif;

  --radius: 4px;       /* coins nets, registre rapport */
  --radius-lg: 6px;
  --maxw: 1240px;

  --header-h: 64px;    /* hauteur FIXE du header — la tab-bar sticky se cale dessous */
  --tabbar-h: 0px;     /* desktop = onglets en flux ; surchargé en mobile */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--mono);
  /* Texture : grille fine très discrète, fixée au fond (détail clair subtil). */
  background-image:
    linear-gradient(rgba(29, 35, 43, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 35, 43, .03) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular figures partout (alignement vertical des colonnes de chiffres) */
body, table, .kpi .v, input, select, textarea, button { font-variant-numeric: tabular-nums; }

h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: .02em; }
h2 {
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text); margin: 0 0 .8rem;
  padding-bottom: .45rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .6rem;
}
h2::before {                       /* tick d'accent or devant chaque titre */
  content: ""; width: 8px; height: 8px; flex: 0 0 8px;
  background: var(--accent);
  transform: translateY(1px);
}
.h2-tag {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); font-weight: 500;
  border: 1px solid var(--line); border-radius: 3px; padding: .08rem .4rem;
  background: var(--panel);
}
h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 0 0 .5rem; font-weight: 600;
}

.muted { color: var(--muted); font-size: .76rem; }
.error { color: var(--red); font-size: .82rem; }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* ---------------------------------------------------------------- contrôles */
input, select, textarea, button {
  font: 500 .82rem/1.4 var(--mono);
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .7rem; transition: border-color .15s, box-shadow .15s, color .15s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154, 107, 6, .16);  /* anneau focus visible sur clair */
}
button {
  cursor: pointer; background: var(--panel); color: var(--text);
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600;
  box-shadow: var(--shadow-1);
}
button:hover { border-color: var(--accent); color: var(--accent); }
button:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154, 107, 6, .22);
}
button.active {
  border-color: var(--accent); color: #fff;
  background: var(--accent);
}
.field { display: flex; flex-direction: column; gap: .3rem; }
.field-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); font-weight: 600;
}

/* ------------------------------------------------------------------- login */
/* [hidden] doit l'emporter sur display:flex (sinon l'overlay reste affiché). */
#login-overlay[hidden], #app[hidden], .tab-panel[hidden] { display: none !important; }
#login-overlay {
  display: flex; min-height: 100vh; min-height: 100dvh;
  align-items: center; justify-content: center; padding: 1.2rem;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(154, 107, 6, .06), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, rgba(14, 116, 144, .05), transparent 55%);
}
#login-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  width: min(94vw, 380px); padding: 2rem 1.8rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 24px 60px -24px rgba(22, 27, 34, .28), var(--shadow-1);
}
.login-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.login-mark {
  font-size: 1.7rem; color: var(--accent); line-height: 1;
}
.login-wordmark { display: flex; flex-direction: column; }
.login-title {
  font-family: var(--disp); font-weight: 700; font-size: 1.18rem;
  letter-spacing: .06em; color: var(--text);
}
.login-sub {
  font-size: .58rem; letter-spacing: .22em; color: var(--muted);
  text-transform: uppercase; margin-top: .15rem;
}
#login-form button[type="submit"] {
  margin-top: .3rem; padding: .7rem; background: var(--accent); color: #fff;
  border-color: var(--accent); font-size: .78rem;
}
#login-form button[type="submit"]:hover { filter: brightness(1.1); }
.login-foot {
  text-align: center; font-size: .62rem; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase; margin: .2rem 0 0;
}

/* ------------------------------------------------------------------- header */
/* Hauteur FIXE (--header-h) : la tab-bar sticky prend top:var(--header-h) et ne
   peut plus être recouverte au scroll (bug revue #1). Pas de wrap interne. */
header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  height: var(--header-h);
  padding: 0 clamp(.8rem, 3vw, 2rem);
  background: rgba(250, 249, 246, .92);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand-mark { font-size: 1.4rem; color: var(--accent); line-height: 1; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title {
  font-family: var(--disp); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .05em; white-space: nowrap;
}
.brand-sub {
  font-size: .58rem; letter-spacing: .18em; color: var(--muted);
  text-transform: uppercase; display: flex; align-items: center; gap: .35rem;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(12, 122, 77, .15); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.header-actions {
  display: flex; align-items: center; gap: .7rem; flex-wrap: nowrap;
  justify-content: flex-end; min-width: 0;
}
#sync-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
#account-select { max-width: 180px; }
#logout-btn { background: transparent; border-color: var(--line); box-shadow: none; }
#logout-btn:hover { border-color: var(--red); color: var(--red); }

/* ------------------------------------------------------------------ onglets */
#tab-bar {
  display: flex; gap: .15rem; align-items: stretch;
  padding: 0 clamp(.6rem, 3vw, 2rem);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: var(--header-h); z-index: 15;  /* sous le header fixe */
  overflow-x: auto; scrollbar-width: none;
}
#tab-bar::-webkit-scrollbar { display: none; }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--muted); box-shadow: none;
  padding: .85rem .95rem; display: flex; align-items: center; gap: .45rem;
  white-space: nowrap; letter-spacing: .07em; transition: color .15s, border-color .15s, background .15s;
}
.tab:hover { color: var(--text); background: rgba(22, 27, 34, .04); }
.tab:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--accent);
}
.tab-ico { font-size: .9rem; opacity: .7; }
/* Deux libellés par onglet : long (desktop) / court (bottom-nav mobile, revue #2). */
.tab-txt-short { display: none; }
.tab[aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent);
  background: linear-gradient(180deg, rgba(154, 107, 6, .07), transparent);
}
.tab[aria-selected="true"] .tab-ico { opacity: 1; }

/* --------------------------------------------------------------- panneaux */
/* (le masquage .tab-panel[hidden] est géré par la règle !important du bloc login) */
#tab-panels { max-width: var(--maxw); margin: 0 auto; padding-bottom: 3rem; }
section {
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(.8rem, 3vw, 2rem);
  animation: fadein .3s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.section-head h2 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }

/* ------------------------------------------------------- filtre de période */
#period-filter { display: flex; gap: .3rem; flex-wrap: wrap; }
#period-filter button { padding: .4rem .65rem; }

/* ----------------------------------------------------- horloges de sessions */
/* Bandeau en tête de « Vue d'ensemble » : Paris · Bangkok · New York en temps
   réel (heure d'été gérée côté JS via Intl — jamais d'offset codé en dur).
   Thème clair maison : cadran ivoire, encre sombre, aiguille des secondes en
   or, liseré coloré par place. Pied : offset UTC · heure numérique · jour.
   Graduations (.clock-mark) et aiguilles (.clock-hand) injectées par
   initClocks() dans app.js. Surcharges mobile dans la section RESPONSIVE. */
#section-clocks { padding-bottom: 0; }   /* colle au bloc KPI qui suit */
.clock-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
}
.clock-card {
  background: linear-gradient(180deg, #fffdf4, var(--panel) 60%);
  border: 1px solid var(--line); border-top: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  box-shadow: var(--shadow-1);
}
.clock-card.paris   { border-top-color: var(--cyan); }
.clock-card.bangkok { border-top-color: var(--green); }
.clock-card.newyork { border-top-color: var(--accent); }
.clock-top {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: .5rem;
}
.clock-city {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-family: var(--disp); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.clock-city .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;     /* @keyframes pulse déjà défini (live-dot) */
}
.clock-card.paris   .dot { background: var(--cyan);   box-shadow: 0 0 0 3px rgba(14, 116, 144, .15); }
.clock-card.bangkok .dot { background: var(--green);  box-shadow: 0 0 0 3px rgba(12, 122, 77, .15); }
.clock-card.newyork .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(154, 107, 6, .15); }
.session-tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .14rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.clock-face {
  position: relative; width: 172px; height: 172px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #faf9f6 58%, #f0efea 100%);
  border: 2px solid var(--accent-soft);
  box-shadow: inset 0 2px 6px rgba(22, 27, 34, .06), var(--shadow-1);
}
.clock-face::before {                 /* axe central (or) */
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
  background: var(--accent); box-shadow: 0 0 0 2px rgba(154, 107, 6, .18);
}
.clock-mark {
  position: absolute; width: 2px; height: 8px; top: 7px; left: 50%;
  transform-origin: center 79px; background: rgba(29, 35, 43, .3);
}
.clock-mark.big { height: 13px; background: var(--text); }   /* 12 / 3 / 6 / 9 */
.clock-hand {
  position: absolute; top: 50%; left: 50%; transform-origin: bottom;
  transform: translate(-50%, -100%) rotate(0deg); border-radius: 999px;
}
.clock-hand.hour   { height: 46px; width: 4px; background: var(--text); }
.clock-hand.minute { height: 66px; width: 3px; background: var(--cyan); }
.clock-hand.second { height: 72px; width: 2px; background: var(--accent); }
.clock-hand.second::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); top: 60px; left: 50%; transform: translateX(-50%);
}
.clock-foot {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: .4rem;
}
.clock-foot .off { font-family: var(--mono); font-weight: 600; font-size: .68rem; color: var(--muted); }
.clock-foot .digital {                /* heure numérique mise en valeur (centre) */
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  letter-spacing: .02em; color: var(--text);
}
.clock-foot .date {
  font-family: var(--disp); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: .66rem; color: var(--muted);
}

/* ---------------------------------------------------------------- KPI cards */
#kpi-cards {
  display: grid; gap: .7rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.kpi {
  position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .85rem .9rem .8rem;
  box-shadow: var(--shadow-1);
}
.kpi::before {                      /* liseré gauche d'accent */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .6;
}
.kpi .v {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15;
}
.kpi .v.pos { color: var(--green); }
.kpi .v.neg { color: var(--red); }
.kpi .l {
  color: var(--muted); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .14em; margin-top: .3rem; font-weight: 600;
}

/* Carte vedette « SOLDE ACTUEL » : instantané du dernier relevé de compte,
   indépendante du filtre de période — LE chiffre que le PM vient voir. */
.kpi-hero {
  grid-column: span 2;
  background: linear-gradient(180deg, #fffdf4, var(--panel) 55%);
  border-color: var(--accent-soft);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-2);
  padding: .95rem 1.1rem .9rem;
}
.kpi-hero::before { display: none; }   /* le filet or en tête remplace le liseré */
.kpi-hero .l { margin: 0 0 .45rem; color: var(--accent); font-size: .66rem; }
.kpi-hero .v { font-size: 2.15rem; letter-spacing: -.02em; color: var(--text); }
.kpi-hero .s { color: var(--muted); font-size: .7rem; margin-top: .4rem; }

/* Desktop large : grille KPI en 4 colonnes fixes → bloc 2 rangées net
   (solde en vedette sur 2 colonnes + 2 KPI, puis 4 KPI). */
@media (min-width: 1024px) {
  #kpi-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ charts */
/* Cadre de graphique : hauteur FIXE, position relative. Chart.js
   (maintainAspectRatio:false, responsive:true) remplit le cadre. Le canvas reste
   un enfant bloc normal — surtout PAS de !important ni de position:absolute, qui
   casseraient le calcul de taille de Chart.js. */
.chart-frame {
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .8rem .7rem .6rem; margin: .7rem 0 1.1rem;
  position: relative; height: 340px;
  box-shadow: var(--shadow-1);
}
.chart-frame--pie { height: 280px; }

/* État vide d'un graphe (ex. courbe d'équité, filtre court sans trade) :
   message discret centré dans le cadre ; le canvas dessous est masqué. */
.chart-empty {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  color: var(--muted); font-size: .82rem; letter-spacing: .02em;
}

.pie-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pie-card { display: flex; flex-direction: column; }
.pie-card .chart-frame { margin: auto 0 0; }  /* cadres alignés en bas de rangée */
.pie-sub {
  color: var(--muted); font-size: .7rem; line-height: 1.45;
  margin: -.15rem 0 .55rem;
}

/* ----------------------------------------------------------------- conseils */
#advice-cards { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.advice {
  background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .8rem .95rem; font-size: .82rem; line-height: 1.5;
  box-shadow: var(--shadow-1);
}
.advice strong {
  font-family: var(--disp); font-weight: 600; letter-spacing: .03em;
  color: var(--accent); text-transform: uppercase; font-size: .82rem;
  display: block; margin-bottom: .25rem;
}

/* ------------------------------------------------- news à risque (calendrier) */
/* Bandeau d'alerte (overview, sous les horloges) + tableau de la semaine (onglet
   Analyse Marché). Données USD/EUR impact High depuis Supabase (table
   news_events, alimentée par la sync). Rendu par renderNews() dans app.js.
   Surcharges mobile dans la section RESPONSIVE (≤ 720px). */
.news-alert {
  display: flex; align-items: center; gap: .6rem;
  border-radius: var(--radius); padding: .6rem .85rem;
  font-size: .82rem; font-weight: 600;
}
.news-alert.warn {
  background: linear-gradient(180deg, rgba(180, 35, 52, .10), rgba(180, 35, 52, .04));
  border: 1px solid var(--red-soft); color: var(--red);
}
.news-alert.calm {
  background: linear-gradient(180deg, rgba(12, 122, 77, .09), rgba(12, 122, 77, .03));
  border: 1px solid var(--green-soft); color: var(--green);
}
.news-alert .ico { font-size: 1rem; line-height: 1; }
.news-today { margin-top: .6rem; }    /* liste des news du jour sous le bandeau */

.news-list {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden;
}
.news-row {
  display: grid; grid-template-columns: 92px 56px 1fr auto;
  align-items: center; gap: .7rem; padding: .55rem .85rem;
  border-bottom: 1px solid var(--line-soft);
}
.news-row:last-child { border-bottom: none; }
.news-row:hover { background: var(--panel-2); }
.news-row.today {                     /* jour courant : surligné (cf. kpi-hero) */
  background: #fffdf4; border-left: 3px solid var(--accent);
  padding-left: calc(.85rem - 3px);
}
.news-when { display: flex; flex-direction: column; line-height: 1.15; }
.news-day {
  font-family: var(--disp); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.news-time {
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.news-cur {
  justify-self: start; font-family: var(--disp); font-weight: 700;
  font-size: .64rem; letter-spacing: .08em; padding: .12rem .4rem;
  border-radius: 3px; border: 1px solid;
}
.news-cur.usd { color: var(--blue); border-color: rgba(37, 99, 196, .4); background: rgba(37, 99, 196, .07); }
.news-cur.eur { color: var(--accent); border-color: var(--accent-soft); background: rgba(154, 107, 6, .08); }
.news-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.news-title {
  font-weight: 600; font-size: .84rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .4rem;
}
.news-title .warnico { color: var(--red); }
.news-fc {
  color: var(--muted); font-size: .7rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.news-flag {
  justify-self: end; font-family: var(--disp); font-weight: 600;
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; padding: .14rem .45rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.news-flag.live { color: var(--red); border-color: var(--red-soft); background: rgba(180, 35, 52, .07); }
.news-flag.soon { color: var(--accent); border-color: var(--accent-soft); background: rgba(154, 107, 6, .07); }
.news-flag.past { color: var(--dim); border-color: var(--line-soft); }
.news-empty { color: var(--muted); font-size: .82rem; padding: .3rem 0; }

/* ------------------------------------------------------------------ tables */
.table-wrap {
  position: relative; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: .2rem .4rem;
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}
/* ombres d'indication de scroll horizontal (mobile) */
.table-wrap::before, .table-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 24px;
  pointer-events: none; z-index: 2; opacity: .9;
}
.table-wrap::before { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
.table-wrap::after  { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }
table {
  width: 100%; border-collapse: collapse; font-size: .8rem;
  font-family: var(--mono);
}
th {
  font-family: var(--disp); font-weight: 600; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  position: sticky; top: 0; background: var(--panel); z-index: 1;
}
th, td {
  padding: .5rem .6rem; border-bottom: 1px solid var(--line-soft);
  text-align: right; white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; }
/* Generated tables carry their header as the first <tr> (no <thead>) — keep it hover-free. */
table tr:not(:first-child):hover { background: rgba(22, 27, 34, .03); }
tr.total td {
  font-weight: 700; color: var(--text);
  border-top: 1px solid var(--accent); border-bottom: none;
}
td .pos, td .neg { font-weight: 600; }

/* contrôles compta / fiscal */
.compta-controls, .fiscal-actions {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem;
}
#section-fiscal > .field { max-width: 220px; margin-bottom: 1rem; }
/* Table de synthèse fiscale : libellés longs (« Résultat net réalisé… ») autorisés
   à passer à la ligne — lisible sur mobile sans scroll horizontal (revue #11).
   Scope : 1re table (bilan) uniquement ; les mois des relevés restent sur 1 ligne. */
#fiscal-view th,
#fiscal-view > .table-wrap:first-of-type td:first-child { white-space: normal; }
#pro-metrics { margin-top: 1.2rem; }
#pro-metrics h3 { margin-top: 0; }

.disclaimer {
  background: linear-gradient(180deg, rgba(154, 107, 6, .07), rgba(154, 107, 6, .03));
  border: 1px solid var(--accent-soft); border-radius: var(--radius);
  padding: .75rem .9rem; font-size: .76rem; line-height: 1.5; color: var(--text);
  margin-top: 1rem;
}

/* dépôts/retraits + events */
#events-list { margin-top: .4rem; }
#events-list h3 { margin-top: .8rem; }
.ev-pager {                       /* pagination 5 lignes (demande PM) */
  display: flex; gap: .55rem; align-items: center; justify-content: flex-end;
  margin-top: .5rem;
}
.ev-pager button { padding: .3rem .6rem; }
.ev-pager button[disabled] { opacity: .4; cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------- analyse */
#analysis-content {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; overflow-x: auto;
  font-family: var(--mono); font-size: .86rem; line-height: 1.65;
  box-shadow: var(--shadow-1);
}
#analysis-content h1, #analysis-content h2, #analysis-content h3 {
  font-family: var(--disp); color: var(--text); border: none; padding: 0;
  display: block; text-transform: none; letter-spacing: .01em;
}
#analysis-content h1 { font-size: 1.3rem; margin: .2rem 0 .8rem; }
#analysis-content h2 { font-size: 1.08rem; margin: 1.2rem 0 .6rem; color: var(--accent); }
#analysis-content h2::before { display: none; }
#analysis-content h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--cyan); }
#analysis-content code {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 3px;
  padding: .05rem .35rem; font-size: .82em; color: var(--accent);
}
#analysis-content pre { background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: .8rem; overflow-x: auto; }
#analysis-content a { color: var(--cyan); }
#analysis-content blockquote {
  border-left: 3px solid var(--accent); margin: .6rem 0; padding: .2rem .9rem;
  color: var(--muted); background: rgba(22, 27, 34, .025);
}
#analysis-content table { font-size: .78rem; margin: .8rem 0; }
#analysis-content th, #analysis-content td {
  border: 1px solid var(--line); text-align: left;
}
#analysis-content ul, #analysis-content ol { padding-left: 1.3rem; }

/* ----------------------------------------------------------------- journal */
#journal-list { display: grid; gap: .65rem; }
.trade-card {
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .8rem .9rem;
  box-shadow: var(--shadow-1);
}
.trade-head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem;
  align-items: center; font-weight: 600; font-size: .88rem;
}
.trade-head > span:first-child { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.trade-meta {
  color: var(--muted); font-size: .74rem; margin-top: .4rem; line-height: 1.6;
}
.trade-card > div:nth-of-type(2) {  /* verdict line */
  margin-top: .4rem; font-size: .8rem; color: var(--text);
  padding: .35rem .5rem; background: var(--bg-2); border-radius: var(--radius);
  border-left: 2px solid var(--line);
}
.trade-card textarea {
  width: 100%; min-height: 54px; margin-top: .55rem; resize: vertical;
  background: var(--bg-2);
}
.note-save { margin-top: .4rem; }
.note-status { margin-left: .5rem; font-size: .72rem; }
.dir {
  font-family: var(--disp); font-weight: 700; font-size: .76rem;
  letter-spacing: .08em; padding: .1rem .45rem; border-radius: 3px;
}
.dir-long  { color: var(--green); border: 1px solid var(--green-soft); background: rgba(12, 122, 77, .07); }
.dir-short { color: var(--red);   border: 1px solid var(--red-soft);   background: rgba(180, 35, 52, .06); }
.trade-id { color: var(--muted); font-size: .8rem; }
.trade-net { font-weight: 700; font-size: .95rem; }
.trade-pips { color: var(--muted); font-size: .76rem; }
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--disp); border-radius: 3px; padding: .14rem .5rem;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg-2);
}
.badge-edge   { color: var(--accent); border-color: var(--accent-soft); background: rgba(154, 107, 6, .08); }
.badge-noedge { color: var(--muted); }

/* -------------------------------------------------------------- calendrier */
/* TradeCalendar (①bis) — structure de la référence PM (docs/photos) adaptée au
   thème clair : grille hairline 7 colonnes, numéro de jour discret en haut à
   droite, carte teintée vert/rouge/gris dans les jours tradés, pastille or sur
   le jour courant, jours hors mois estompés. */
#cal-nav { display: flex; gap: .3rem; align-items: center; }
#cal-nav button { padding: .35rem .6rem; }
#cal-month-label {
  font-family: var(--disp); font-weight: 600; font-size: .86rem;
  letter-spacing: .04em; min-width: 9.5ch; text-align: center;
}
#trade-calendar {
  margin-top: 1rem;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--line);                 /* filets hairline entre cases */
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
}
.cal-wd {
  background: var(--bg-2); padding: .48rem .3rem; text-align: center;
  font-family: var(--disp); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--text);
}
.cal-day {
  background: var(--panel); min-height: 96px; padding: .35rem;
  display: flex; flex-direction: column; min-width: 0;
}
.cal-num {
  align-self: flex-end; font-size: .66rem; font-weight: 600;
  color: var(--muted); line-height: 1; padding: .16rem .3rem;
}
.cal-out { background: var(--bg-2); }
.cal-out .cal-num { color: var(--dim); }
.cal-out .cal-card { opacity: .55; }
.cal-today {                               /* jour courant : case en vedette */
  background: #fffdf4;                     /* fond doré très léger (cf. kpi-hero) */
  box-shadow: inset 0 0 0 2px var(--accent);
  position: relative;
}
.cal-today-label {                         /* « TODAY » en grand, centré (demande PM) */
  position: absolute; inset: 0;            /* couvre la case entière */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .14em; color: var(--cyan); pointer-events: none;
}
.cal-today .cal-num {                      /* pastille « aujourd'hui » (or) */
  background: var(--accent); color: #fff; border-radius: 999px;
  min-width: 1.6em; text-align: center;
}
.cal-card {
  flex: 1; margin-top: .25rem; padding: .4rem .45rem;
  border: 1px solid; border-radius: var(--radius);
  display: flex; flex-direction: column; gap: .28rem; min-width: 0;
}
.cal-gain { background: rgba(12, 122, 77, .08);  border-color: var(--green-soft); }
.cal-loss { background: rgba(180, 35, 52, .06);  border-color: var(--red-soft); }
.cal-be   { background: rgba(90, 100, 114, .07); border-color: var(--line); }
.cal-sym {                                 /* paire(s) tradée(s) — réf. PM */
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  color: var(--cyan);                      /* bleu (accent froid du thème) */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-pnl {
  font-weight: 700; font-size: .8rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-gain .cal-pnl { color: var(--green); }
.cal-loss .cal-pnl { color: var(--red); }
.cal-be   .cal-pnl { color: var(--muted); }
.cal-chip {
  align-self: flex-start; font-family: var(--disp); font-weight: 600;
  font-size: .52rem; letter-spacing: .12em; padding: .12rem .4rem;
  border-radius: 3px; color: #fff;
}
.cal-gain .cal-chip { background: var(--green); }
.cal-loss .cal-chip { background: var(--red); }
.cal-be   .cal-chip { background: var(--muted); }
.cal-n { margin-top: auto; font-size: .58rem; color: var(--muted); }

/* =========================================================== RESPONSIVE === */

/* Desktop large : layout journal en 2 colonnes pour densité salle de marché */
@media (min-width: 1024px) {
  #journal-list { grid-template-columns: 1fr 1fr; }
}

/* MOBILE : la barre d'onglets devient une bottom-nav fixe (touch ≥ 44px) */
@media (max-width: 720px) {
  :root { --tabbar-h: 60px; }
  /* + safe-area : ne pas passer sous l'indicateur home iPhone (revue #8) */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  header { padding: 0 .8rem; }
  .brand-title { font-size: .9rem; }
  #sync-info { display: none; }                 /* gagne de la place mobile */
  .header-actions { gap: .5rem; }

  #tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    z-index: 30; padding: 0 0 env(safe-area-inset-bottom, 0px); gap: 0;
    border-top: 1px solid var(--line); border-bottom: none;
    background: rgba(250, 249, 246, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px -14px rgba(22, 27, 34, .25);
    justify-content: space-between;
  }
  .tab {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: .15rem;
    padding: .5rem .2rem; min-height: 56px; justify-content: center;
    border-bottom: none; border-top: 2px solid transparent;
  }
  .tab[aria-selected="true"] {
    border-top-color: var(--accent); border-bottom: none;
    background: linear-gradient(0deg, rgba(154, 107, 6, .08), transparent);
  }
  .tab-ico { font-size: 1.1rem; }
  /* Libellés COURTS sur la bottom-nav (revue #2 : les longs se superposaient
     entre 381 et ~520px) + ellipsis garde-fou si un libellé dépasse quand même. */
  .tab-txt-full { display: none; }
  .tab-txt-short {
    display: block; font-size: .54rem; letter-spacing: .03em;
    text-align: center; line-height: 1.1; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .chart-frame { height: 300px; }
  .chart-frame--pie { height: 260px; }
  .kpi .v { font-size: 1.3rem; }
  .kpi-hero { grid-column: 1 / -1; }            /* solde pleine largeur mobile */
  .kpi-hero .v { font-size: 1.85rem; }

  /* Horloges : 3 colonnes resserrées, cadran réduit (96px), pied empilé. Grille en
     minmax(0,1fr) + espacements/paddings minimaux pour que 3 cadrans de 96px tiennent
     SANS déborder. Avant : 3×96px + marges dépassaient ~360px → débordement horizontal
     → dézoom du navigateur → bande vide à droite (retour PM 2026-06-14). Les
     graduations suivent le cadran (transform-origin). */
  #section-clocks { padding-left: .15rem; padding-right: .15rem; }
  .clock-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
  .clock-card { padding: .55rem .1rem .6rem; gap: .45rem; }
  .clock-city { font-size: .6rem; letter-spacing: .06em; gap: .3rem; }
  .session-tag { display: none; }
  .clock-face { width: 96px; height: 96px; border-width: 1px; }
  .clock-mark { height: 5px; top: 5px; transform-origin: center 43px; }
  .clock-mark.big { height: 8px; }
  .clock-hand.hour { height: 26px; width: 3px; }
  .clock-hand.minute { height: 37px; width: 2px; }
  .clock-hand.second { height: 40px; width: 1.5px; }
  .clock-hand.second::after { top: 33px; width: 6px; height: 6px; }
  .clock-foot { flex-direction: column; gap: .15rem; }
  .clock-foot .digital { font-size: .84rem; }
  .clock-foot .off, .clock-foot .date { font-size: .58rem; }

  /* News : grille resserrée (jour+heure / titre+prév. / statut), badge devise
     masqué (la couleur revient dans le titre via ⚠️ et le statut). */
  .news-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "when main" "when flag";
    row-gap: .15rem; column-gap: .6rem;
  }
  .news-when { grid-area: when; }
  .news-main { grid-area: main; }
  .news-cur { display: none; }
  .news-flag { grid-area: flag; justify-self: start; }

  .section-head { align-items: flex-start; }
  th, td { padding: .45rem .55rem; }

  /* Calendrier mobile : paire + montant (avec devise) + nombre de trades visibles
     dans chaque jour tradé (demande PM 2026-06-14). Cases élargies au maximum —
     section quasi pleine largeur + marges de case minimales + sans letter-spacing —
     pour que « EURUSD » et le montant ne soient plus tronqués. Seul le badge reste
     masqué (la couleur de la case porte déjà gain/perte). */
  #section-calendar { padding-left: .1rem; padding-right: .1rem; }
  .cal-day { min-height: 84px; padding: .18rem .04rem; }
  .cal-card { padding: .18rem .08rem; gap: .08rem; }
  .cal-sym { display: block; font-size: .52rem; letter-spacing: 0; }
  .cal-pnl { font-size: .54rem; letter-spacing: -.02em; }
  .cal-n { display: block; font-size: .48rem; letter-spacing: 0; }
  .cal-chip { display: none; }
  .cal-num { font-size: .54rem; padding: .08rem .1rem; }
  .cal-today-label { font-size: .72rem; letter-spacing: .08em; }
}

@media (max-width: 340px) {
  .tab-txt-full, .tab-txt-short { display: none; } /* icônes seules sur très petit */
  .tab { min-height: 48px; }
}

/* Accessibilité : pas d'animations pour qui les refuse (revue #7).
   Côté Chart.js, app.js coupe aussi Chart.defaults.animation. */
@media (prefers-reduced-motion: reduce) {
  .live-dot, .clock-city .dot { animation: none; }
  section { animation: none; }
  input, select, textarea, button, .tab { transition: none; }
}

/* ============================================================== IMPRESSION */
/* Vue fiscale imprimable : FOND BLANC, encre noire, le reste masqué. */
@media print {
  body.print-fiscal {
    background: #fff !important; color: #000 !important;
    background-image: none !important; padding: 0;
  }
  body.print-fiscal #login-overlay,
  body.print-fiscal header,
  body.print-fiscal #tab-bar,
  body.print-fiscal .fiscal-actions,
  body.print-fiscal #section-fiscal > .field,
  body.print-fiscal .tab-panel:not([data-panel="fiscal"]) { display: none !important; }
  body.print-fiscal .tab-panel[data-panel="fiscal"] { display: block !important; }
  body.print-fiscal #tab-panels { max-width: none; padding: 0; }
  body.print-fiscal section { animation: none; padding: 0; }
  body.print-fiscal h2 { color: #000 !important; border-color: #000; }
  body.print-fiscal h2::before { background: #000 !important; }
  body.print-fiscal .table-wrap {
    background: #fff !important; border-color: #999; overflow: visible;
    box-shadow: none;
  }
  body.print-fiscal .table-wrap::before,
  body.print-fiscal .table-wrap::after { display: none; }
  body.print-fiscal table, body.print-fiscal th, body.print-fiscal td {
    color: #000 !important; border-color: #999 !important; background: #fff !important;
  }
  body.print-fiscal th { color: #000 !important; }
  body.print-fiscal .pos, body.print-fiscal .neg,
  body.print-fiscal .h2-tag { color: #000 !important; }
  body.print-fiscal .disclaimer {
    background: #fff !important; border-color: #999; color: #000 !important;
  }
}