@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   PIPSTER PRO · SaaS — surcouche du terminal
   Bandeau de plan, identité utilisateur, verrous et fenêtre d'upsell.
   Aucune règle ne touche aux sélecteurs consommés par app.js.
═══════════════════════════════════════════════════════════════════ */

/* ─── Bandeau de plan ─────────────────────────────────────────────── */

.saas-band {
  flex: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 16px;
  font-size: 12px; color: var(--text-2);
  background: linear-gradient(90deg, rgba(78, 127, 255, .13), rgba(139, 92, 246, .08));
  border-bottom: 1px solid var(--border);
}
/* Les trois états du bandeau (essai, aperçu, palier gratuit) ont des textes
   très proches : l'icône est ce qui les sépare au premier coup d'œil. */
.saas-band-ico { flex: none; display: grid; place-items: center; color: var(--accent); }
.saas-band-ico svg { width: 15px; height: 15px; }
.saas-band.is-trial .saas-band-ico { color: #26a69a; }

.saas-band strong { color: var(--text); font-weight: 600; }
.saas-band .saas-band-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.saas-band a {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--accent);
}
.saas-band a:hover { background: var(--accent-hover); }
.saas-band a.ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); }
.saas-band a.ghost:hover { color: var(--text); background: rgb(var(--veil) / .05); }
.saas-band button.saas-band-close {
  display: grid; place-items: center;
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  border-radius: 5px; padding: 3px;
}
.saas-band button.saas-band-close svg { width: 14px; height: 14px; }
.saas-band button.saas-band-close:hover { color: var(--text); }

/* ─── Barre du haut : le blanc des boutons ────────────────────────
   #F2F2F2 est réservé à l'état ACTIF ou survolé d'un bouton de la barre.
   Au repos ils restent en gris secondaire : tout mettre au même blanc
   effacerait la distinction entre l'unité de temps en cours et les
   autres, que TradingView marque justement par ce contraste.        */

body #toolbar .iv-btn:hover,
body #toolbar .iv-btn.active,
body #toolbar .tf-more:hover,
body #toolbar .tf-more.open,
body #toolbar button:hover,
body #toolbar .saas-link:hover,
body #toolbar #presetSelect:hover { color: var(--toolbar-fg, #F2F2F2); }

body #toolbar #alertsBtn:hover,
body #toolbar #settingsBtn:hover { color: var(--toolbar-fg, #F2F2F2); }

/* ─── Identité dans la barre d'outils ────────────────────────────── */

#toolbar .saas-user {
  display: flex; align-items: center; gap: 8px;
  padding-left: 10px;
  /* Toujours en bout de ligne : si la barre passe sur deux lignes, le bloc
     reste collé à droite au lieu de flotter seul à gauche. */
  margin-left: auto;
  border-left: 1px solid var(--border);
  flex: none;
}
#toolbar .saas-plan {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--border-strong); color: var(--text-2);
  white-space: nowrap;
}
#toolbar .saas-plan.pro   { color: var(--accent); background: rgba(78, 127, 255, .13); border-color: rgba(78, 127, 255, .26); }
#toolbar .saas-plan.elite { color: var(--soft-elite); background: rgba(139, 92, 246, .14); border-color: rgba(139, 92, 246, .3); }

#toolbar .saas-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: 10.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
#toolbar .saas-avatar:hover { filter: brightness(1.12); }

#toolbar .saas-link {
  font-size: 12px; color: var(--text-2); text-decoration: none;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
#toolbar .saas-link:hover { color: var(--text); background: rgb(var(--veil) / .05); }
#toolbar .saas-link.cta {
  color: #fff; background: var(--accent); font-weight: 600;
}
#toolbar .saas-link.cta:hover { background: var(--accent-hover); }

/* ─── Menu compte ─────────────────────────────────────────────────
   Un bouton, un panneau. Le thème et la langue vivaient dans la barre :
   deux commandes permanentes pour des réglages qu'on touche trois fois
   par an. Elles sont ici, et la barre a récupéré leur place.        */

#toolbar .saas-acct { position: relative; flex: none; }

#toolbar .saas-acct-btn {
  display: grid; place-items: center;
  padding: 2px; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
}
#toolbar .saas-acct-btn .saas-avatar { transition: box-shadow .15s; }
#toolbar .saas-acct-btn:hover .saas-avatar,
#toolbar .saas-acct.open .saas-avatar { box-shadow: 0 0 0 2px var(--border-strong); }
#toolbar .saas-avatar.is-guest {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-strong);
}
#toolbar .saas-avatar.is-guest svg { width: 15px; height: 15px; }

.saas-acct-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  z-index: 95; display: none;
  width: 272px; max-height: min(78vh, 620px); overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-lg, 0 18px 44px rgb(var(--shade) / calc(.5 * var(--shade-k))));
}
.saas-acct.open .saas-acct-pop { display: block; }

.sa-sep { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

/* En-tête : qui, quel courriel, quel pack. */
.sa-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none;
}
a.sa-head:hover { background: rgb(var(--veil) / .05); }
.sa-head-av { width: 32px; height: 32px; font-size: 12px; }
.sa-head-txt { display: grid; min-width: 0; }
.sa-head-txt strong { font-size: 13px; font-weight: 600; }
.sa-head-sub {
  font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sa-head-plan {
  margin-inline-start: auto; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 2px 6px;
}
.sa-head > svg { flex: none; width: 14px; height: 14px; color: var(--text-3); }
[dir="rtl"] .sa-head > svg { transform: scaleX(-1); }

/* Une ligne : icône, libellé, puis la commande ou la valeur. */
.sa-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; padding: 0 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--text-2); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: start;
}
a.sa-row:hover, button.sa-row:hover { background: rgb(var(--veil) / .05); color: var(--text); }
.sa-ico { flex: none; display: grid; place-items: center; color: var(--text-3); }
.sa-ico svg { width: 15px; height: 15px; }
.sa-label { flex: 1 1 auto; min-width: 0; }
.sa-value { flex: none; font-size: 11.5px; color: var(--text-3); }
.sa-row > svg { flex: none; width: 13px; height: 13px; color: var(--text-3); transition: transform .18s; }
.sa-row.open > svg { transform: rotate(180deg); }
.sa-row-danger { color: var(--down); }
.sa-row-danger .sa-ico { color: var(--down); }
.sa-row-danger:hover { background: rgba(239, 83, 80, .1); color: var(--down); }

/* Thème : trois états nommés, donc un segmenté. */
.sa-seg {
  display: inline-flex; gap: 2px; flex: none; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
}
.sa-seg button {
  padding: 3px 7px; border: 0; border-radius: 5px; background: none;
  font-size: 10.5px; font-weight: 600; color: var(--text-3); cursor: pointer;
}
.sa-seg button:hover { color: var(--text-2); }
.sa-seg button.on { color: var(--text); background: var(--raised); }

/* Barre de dessin : un interrupteur. */
.sa-switch {
  flex: none; width: 34px; height: 20px; padding: 0;
  border: 0; border-radius: 99px; cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong);
  position: relative; transition: background .15s;
}
.sa-switch::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-3); transition: transform .15s, background .15s;
}
.sa-switch.on { background: var(--accent); box-shadow: none; }
.sa-switch.on::after { background: #fff; transform: translateX(14px); }
[dir="rtl"] .sa-switch.on::after { transform: translateX(-14px); }

/* Langues : la liste se déplie sous sa ligne. */
.sa-sub { display: none; padding: 2px 0 4px; }
.sa-sub.open { display: block; }
.sa-sub-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 32px; padding: 0 10px 0 35px; border-radius: 7px;
  font-size: 12.5px; color: var(--text-2); text-decoration: none;
  /* Chaque langue s'écrit dans SA graphie, quelle que soit la page. */
  unicode-bidi: plaintext;
}
[dir="rtl"] .sa-sub-item { padding: 0 35px 0 10px; }
.sa-sub-item:hover { background: rgb(var(--veil) / .05); color: var(--text); }
.sa-sub-item.on { color: var(--text); }
.sa-sub-item svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

/* Visiteur : les deux portes d'entrée, en bas du panneau. */
.sa-cta { display: grid; gap: 6px; padding: 4px 4px 2px; }
.sa-btn {
  display: flex; align-items: center; justify-content: center;
  height: 36px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--accent);
}
.sa-btn:hover { background: var(--accent-hover); }
.sa-btn.quiet {
  background: none; color: var(--text-2); border: 1px solid var(--border-strong);
}
.sa-btn.quiet:hover { color: var(--text); background: rgb(var(--veil) / .05); }

/* ─── Verrous ─────────────────────────────────────────────────────── */

.saas-locked {
  position: relative;
  opacity: .42;
  cursor: not-allowed !important;
}
.saas-locked::after {
  content: '';
  position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 2px var(--surface);
}
.iv-btn.saas-locked::after { top: 1px; right: 1px; }
label.saas-locked { pointer-events: none; }
label.saas-locked input { pointer-events: none; }

.saas-lockrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--text-3);
  padding: 6px 2px 0;
}
.saas-lockrow svg { width: 11px; height: 11px; }

/* Panneau entièrement verrouillé (backtest, calcul de position) */
.saas-lockpanel {
  position: relative;
  display: grid; gap: 8px; place-items: center;
  padding: 16px 14px; text-align: center;
}
.saas-lockpanel .t { font-size: 12px; font-weight: 600; color: var(--text); }
.saas-lockpanel .d { font-size: 11px; color: var(--text-3); max-width: 30ch; line-height: 1.45; }
.saas-lockpanel a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600;
  color: #fff; background: var(--accent); text-decoration: none;
}
.saas-lockpanel a:hover { background: var(--accent-hover); }
.saas-lockpanel .ic { color: var(--text-3); }
.saas-lockpanel .ic svg { width: 18px; height: 18px; }

/* Le panneau verrouillé reste visible même quand app.js le masque
   (il n'a plus de données à afficher) : seul le contenu d'origine part.
   On respecte les seuils du terminal, qui escamote #btPanel sur petit écran. */
@media (min-width: 901px) and (min-height: 821px) {
  #btPanel.saas-lock-mode.hidden { display: block !important; }
}
#btPanel.saas-lock-mode > *:not(.saas-lockpanel) { display: none !important; }
.tp-pos.saas-lock-mode > *:not(.saas-lockpanel) { display: none !important; }
.tp-pos.saas-lock-mode .saas-lockpanel { padding: 10px 4px 4px; }

/* ═══════════════════════════════════════════════════════════════════
   Arabe : interface du terminal en RTL
   ───────────────────────────────────────────────────────────────────
   Toute la chrome bascule (barre d'outils, bandeau instrument, panneaux,
   réglages). Seul #chartContainer reste en LTR : le graphique garde son
   axe des temps de gauche à droite et son échelle de prix à droite, et
   app.js y positionne ses éléments en pixels (style.right) — c'est aussi
   ce que font TradingView et MetaTrader en arabe.
═══════════════════════════════════════════════════════════════════ */

[dir="rtl"] { --font: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
[dir="rtl"] body { font-family: var(--font); }

/* La barre d'outils accueille en plus le bloc utilisateur, et les libellés
   arabes sont plus larges : on l'autorise à passer sur deux lignes plutôt
   qu'à déborder hors de l'écran (elle garde sa hauteur quand tout tient). */
body #toolbar { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 6px; }

[dir="rtl"] #chartContainer { direction: ltr; }

/* Panneaux flottants : on inverse leur ancrage. */
[dir="rtl"] #tradePanel { left: auto; right: 14px; }
[dir="rtl"] #btPanel    { left: auto; right: 14px; }
[dir="rtl"] #tvLiquidity { right: auto; left: 12px; }
[dir="rtl"] #toastStack  { right: auto; left: 16px; }

@media (max-width: 900px) {
  [dir="rtl"] #tradePanel { left: auto; right: 12px; }
}

/* Barre d'outils : le séparateur du bloc utilisateur change de côté. */
[dir="rtl"] #toolbar .saas-user {
  border-left: 0;
  border-right: 1px solid var(--border);
  padding-left: 0;
  padding-right: 10px;
}

/* Chiffres, sigles et codes restent lisibles dans un contexte arabe. */
[dir="rtl"] #priceBar,
[dir="rtl"] #instOhlc,
[dir="rtl"] #instTf,
[dir="rtl"] #instExchange,
[dir="rtl"] .tp-row-val,
[dir="rtl"] .tp-pos-rows b,
[dir="rtl"] .bt-stat b,
[dir="rtl"] .saas-clock,
[dir="rtl"] #symbolInput { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] #symbolInput { text-align: right; }

/* Le tableau de bord central garde son centrage calculé par app.js. */
[dir="rtl"] #tradePanel .tp-row,
[dir="rtl"] #tradePanel .tp-foot,
[dir="rtl"] #tradePanel .tp-status,
[dir="rtl"] .tp-pos-row,
[dir="rtl"] .tp-pos-gains,
[dir="rtl"] .bt-stat,
[dir="rtl"] .bt-grades,
[dir="rtl"] #tvLiquidity td { unicode-bidi: plaintext; }

[dir="rtl"] #tvDashboard { direction: rtl; }
/* Les colonnes suivent le sens de lecture, mais le contenu des cellules
   reste de l'anglais technique : chaque cellule garde donc sa direction. */
[dir="rtl"] #tvDashboard td,
[dir="rtl"] #tvDashboard th { direction: ltr; text-align: center; }

/* Surcouche SaaS : police arabe. */
[dir="rtl"] .saas-band,
[dir="rtl"] .saas-gate,
[dir="rtl"] .saas-modal { font-family: 'IBM Plex Sans Arabic', var(--font); }
[dir="rtl"] .saas-band .saas-band-actions { margin-left: 0; margin-right: auto; }

/* ─── Essai libre : bandeau ──────────────────────────────────────── */

.saas-band.is-trial {
  background: linear-gradient(90deg, rgba(38, 166, 154, .15), rgba(78, 127, 255, .08));
}
.saas-band .saas-clock {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 5px;
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--text); background: rgb(var(--veil) / .08);
  border: 1px solid var(--border-strong);
}
.saas-band .saas-clock.is-low { color: var(--soft-down); border-color: rgba(239, 83, 80, .4); background: rgba(239, 83, 80, .12); }

/* ─── Essai libre : écran de fin (rendu serveur) ─────────────────── */

body.saas-gated > *:not(.saas-gate) {
  filter: blur(7px) saturate(.7);
  pointer-events: none;
  user-select: none;
}

.saas-gate {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--scrim);
  overflow: auto;
}
.saas-gate-card {
  width: 100%; max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgb(var(--shade) / calc(.65 * var(--shade-k)));
  padding: 28px;
  text-align: center;
}
.saas-gate-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px; margin-bottom: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(78, 127, 255, .25);
}
.saas-gate-card h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25;
  margin-bottom: 10px;
}
.saas-gate-card > p { font-size: 13px; color: var(--text-2); line-height: 1.6; max-width: 52ch; margin: 0 auto; }

/* La grille tenait DEUX colonnes : creer un compte, ou continuer en
   visiteur. L'apercu limite a ete retire le 2026-08-03 ; il n'en reste
   qu'une, et une colonne de moitie de largeur au centre d'une carte se
   lirait comme un bloc oublie. */
.saas-gate-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 22px 0 16px; text-align: left;
}
.saas-gate-cols:has(> .is-only) { grid-template-columns: minmax(0, 340px); justify-content: center; }

/* La garantie, sous le pied : c'est le dernier argument avant de partir. */
.saas-gate-refund {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; font-size: 11.5px; color: var(--text-3);
}
.saas-gate-refund svg { flex: none; color: var(--up); }
.saas-gate-col {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column;
}
.saas-gate-col.is-primary {
  border-color: rgba(78, 127, 255, .4);
  background: linear-gradient(180deg, rgba(78, 127, 255, .07), transparent 120px);
}
.saas-gate-col h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.saas-gate-col ul { list-style: none; display: grid; gap: 7px; margin-bottom: 16px; }
.saas-gate-col li { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.saas-gate-col li svg { flex: none; margin-top: 2px; }
.saas-gate-col.is-primary li svg { color: var(--up); }
.saas-gate-col:not(.is-primary) li svg { color: var(--text-3); }
.saas-gate-col form { margin-top: auto; }

.saas-gate-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  height: 36px; padding: 0 14px; margin-top: auto;
  border-radius: 8px; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.saas-gate-btn.primary { background: var(--accent); color: #fff; }
.saas-gate-btn.primary:hover { background: var(--accent-hover); }
.saas-gate-btn.quiet { background: none; color: var(--text-2); border-color: var(--border-strong); }
.saas-gate-btn.quiet:hover { color: var(--text); background: rgb(var(--veil) / .05); }

.saas-gate-foot { font-size: 11.5px; color: var(--text-3); }
.saas-gate-foot a { color: var(--text-2); text-decoration: none; }
.saas-gate-foot a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 620px) {
  .saas-gate-cols { grid-template-columns: 1fr; }
  .saas-gate-card { padding: 20px; }
}

/* ─── Fenêtre d'upsell ───────────────────────────────────────────── */

.saas-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none; place-items: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
}
.saas-modal.open { display: grid; }
.saas-modal-card {
  width: 100%; max-width: 430px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(var(--shade) / calc(.6 * var(--shade-k)));
  padding: 24px;
}
.saas-modal-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.saas-modal-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.saas-modal-card ul { list-style: none; display: grid; gap: 7px; margin: 16px 0 4px; }
.saas-modal-card li { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-2); align-items: flex-start; }
.saas-modal-card li svg { width: 13px; height: 13px; color: var(--up); flex: none; margin-top: 3px; }
.saas-modal-actions { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.saas-modal-actions a, .saas-modal-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 15px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.saas-modal-actions .primary { background: var(--accent); color: #fff; flex: 1 1 auto; }
.saas-modal-actions .primary:hover { background: var(--accent-hover); }
.saas-modal-actions .quiet { background: none; color: var(--text-2); border-color: var(--border-strong); }
.saas-modal-actions .quiet:hover { color: var(--text); background: rgb(var(--veil) / .05); }
.saas-modal-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

/* La fenêtre d'impayé emprunte la fenêtre d'offre — même carte, mêmes boutons,
   rien à redessiner. Une seule chose change, et c'est la seule qui compte :
   son sur-titre n'annonce pas une occasion, il annonce un compte à rebours.
   Le bouton principal garde l'accent : c'est une action à faire, pas un
   danger à contempler. */
.saas-modal-due .saas-modal-eyebrow { color: var(--warn); }

@media (max-width: 720px) {
  .saas-band { font-size: 11.5px; padding: 6px 12px; }
  #toolbar .saas-user { padding-left: 8px; }
  #toolbar .saas-plan { display: none; }
}

/* Les boutons des fenêtres d'upsell et du portillon d'essai passent eux
   aussi à la cible tactile : ce sont les seuls boutons du terminal dont
   dépend une conversion. */
@media (max-width: 860px) {
  .saas-modal-actions a, .saas-modal-actions button { height: 44px; font-size: 13.5px; }
  .saas-gate-btn { min-height: 44px; }
}

/* ─── Le bandeau d'état sur une seule ligne ────────────────────────
   Titre + phrase d'explication + boutons : sur 390 px, cela faisait
   trois rangées et 109 px — davantage que la barre d'outils elle-même,
   et avant la première bougie. On garde le titre, qui dit de quel état
   il s'agit, et le bouton, qui est la raison d'être du bandeau ; le
   détail attend un écran plus large. Le lien « Se connecter » part le
   premier : il double la page d'inscription, qui y renvoie. */
@media (max-width: 640px) {
  .saas-band { flex-wrap: nowrap; gap: 8px; padding: 6px 12px; }
  .saas-band-more { display: none; }
  .saas-band-txt {
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .saas-band .saas-band-actions { flex: none; }
  .saas-band a.ghost { display: none; }
  /* Le bouton reste une cible pour le pouce, pas une pastille de 24 px. */
  .saas-band a { height: 32px; font-size: 12px; padding: 0 12px; }
  .saas-band button.saas-band-close { padding: 6px; }
}

/* ─── Événements économiques sur l'axe des temps ──────────────────
   Pastille drapeau à l'heure de la publication + fiche au survol,
   dans l'esprit des marqueurs d'actualité de TradingView. */

.saas-news-layer {
  position: absolute; left: 0; right: 0; bottom: 30px; height: 0;
  pointer-events: none; z-index: 12;
  direction: ltr;                    /* l'axe des temps reste de gauche à droite */
}

.saas-news-mark {
  position: absolute; bottom: 0; transform: translateX(-50%);
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; overflow: hidden;
  background: var(--surface-2, #12161F);
  border: 2px solid rgb(var(--veil) / .22);
  box-shadow: 0 2px 8px rgb(var(--shade) / calc(.55 * var(--shade-k)));
  cursor: pointer; pointer-events: auto;
  transition: transform .12s, border-color .12s;
}
.saas-news-mark svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.saas-news-mark:hover,
.saas-news-mark.is-open {
  transform: translateX(-50%) scale(1.22);
  border-color: var(--accent, #4E7FFF);
  z-index: 2;
}
.saas-news-mark.is-medium { width: 19px; height: 19px; border-width: 1.5px; opacity: .8; }
.saas-news-mark.is-upcoming { border-color: rgba(224, 168, 60, .75); }

.saas-news-tip {
  position: absolute; z-index: 40;
  width: 260px; padding: 14px 16px;
  border-left: 4px solid var(--text-3, #5E6678);
  background: var(--surface, #0D1016);
  border: 1px solid var(--border-strong, rgb(var(--veil) / .13));
  border-radius: 10px;
  box-shadow: 0 18px 44px rgb(var(--shade) / calc(.6 * var(--shade-k)));
  pointer-events: none;
  direction: ltr; text-align: left;
}
[dir="rtl"] .saas-news-tip { direction: rtl; text-align: right; }

.saas-news-tip .nt-title {
  font-size: 13.5px; font-weight: 600; color: var(--text, #EEF1F6);
  line-height: 1.35; margin-bottom: 8px;
}
.saas-news-tip .nt-date {
  font-size: 11.5px; color: var(--text-3, #5E6678); margin-bottom: 12px;
}
.saas-news-tip .nt-rows { display: grid; gap: 6px; }
.saas-news-tip .nt-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: var(--text-2, #9AA3B5);
}
.saas-news-tip .nt-row b {
  color: var(--text, #EEF1F6); font-weight: 600;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed;
}

.saas-news-tip.is-high { border-left-color: var(--warn, #F0A94B); }
.saas-news-tip.is-medium { border-left-color: var(--warn-bright); }
[dir="rtl"] .saas-news-tip { border-left: 0; border-right: 4px solid var(--text-3, #5E6678); }
[dir="rtl"] .saas-news-tip.is-high { border-right-color: var(--warn, #F0A94B); }
[dir="rtl"] .saas-news-tip.is-medium { border-right-color: var(--warn-bright); }

/* ─── Bouton « masquer l'indicateur » ─────────────────────────────── */

/* Bougies nues : il ne reste que les chandeliers et l'axe.
   Choisi par l'entrée « Bougies nues » du sélecteur d'affichage — le bouton
   « Indicateur » qui portait ce réglage a été replié dedans. */
/* « Bougies nues » éteint l'indicateur : la boussole de tendance en découle
   directement, elle s'éteint avec lui. */
/* ── CETTE LISTE EST À TENIR À JOUR : TOUT CALQUE POSÉ SUR LE GRAPHIQUE Y VA.
   Elle date d'avant la Matrice de décision, dont le tableau de confluence est
   un élément DOM et non un tracé de canevas — il restait donc affiché sur un
   graphique censé être VIERGE. Ce qui est peint sur les deux canevas est
   masqué en JavaScript (voir plus bas) et n'a rien à faire ici ; ce qui est un
   ÉLÉMENT se masque ici, et rien ne le signalera à la place. */
body.saas-indicator-off #trendAlert,
body.saas-indicator-off #trendBadge,
body.saas-indicator-off #tvDashboard,
body.saas-indicator-off #chartDock,
body.saas-indicator-off #tradePanel,
body.saas-indicator-off #btPanel,
body.saas-indicator-off .gc-dash,
body.saas-indicator-off #tvLiquidity { display: none !important; }
/* Les deux calques du graphique (zones, fanions) sont masqués en JavaScript :
   app.js écrit `z-index:5` sans espace mais le navigateur re-sérialise
   l'attribut `style` avec un espace, donc un sélecteur [style*=…] ne matchait
   jamais — les zones et les signaux restaient à l'écran. */

[dir="rtl"] #toolbar .saas-user { margin-left: 0; margin-right: auto; }

/* Bouton « Actualiser » retiré de la barre : les données se rafraîchissent
   toutes les 5 secondes et le prix en direct toutes les 2 secondes.
   On le masque plutôt que de le supprimer — app.js lui attache un
   gestionnaire au démarrage et planterait s'il disparaissait du DOM. */
body #loadBtn { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Barre d'outils adaptative
   ───────────────────────────────────────────────────────────────────
   Retrait progressif du moins utile vers le plus utile, pour tenir sur
   une seule ligne le plus longtemps possible. Ordre d'abandon :
   texte « Heikin Ashi » → mot-marque → badge de pack → sélecteur
   d'affichage → prix (déjà lisible sur le graphique) → défilement
   horizontal des unités de temps.
   Le sélecteur d'affichage tient plus longtemps qu'avant : il a absorbé
   le bouton « Indicateur », donc le masquer coûterait deux réglages.
   Sélecteurs préfixés par `body` : cette feuille est chargée avant
   style.css, il faut donc gagner en spécificité.
═══════════════════════════════════════════════════════════════════ */

body #toolbar { align-items: center; padding-block: 6px; }
body #ivBtns { flex: 0 1 auto; }
body #symbolWrap { flex: 0 1 auto; min-width: 0; }

@media (max-width: 1180px) {
  body .tb-word, body .tb-pro { display: none; }
  body #toolbar .saas-plan { display: none; }
}

@media (max-width: 1080px) {
  body .select-wrap { display: none; }
}

@media (max-width: 1040px) {
  body #priceBar { display: none; }          /* le prix reste sur le graphique */
  body #symbolWrap { max-width: 170px; }
}

@media (max-width: 900px) {
  body #ivBtns {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 44vw;
    scrollbar-width: none;
  }
  body #ivBtns::-webkit-scrollbar { display: none; }
  body #toolbar { gap: 8px; }
}

@media (max-width: 640px) {
  body #symbolWrap { max-width: 128px; }
  body #toolbar .saas-link { padding: 5px 7px; }

  /* Le panneau se cale sur l'écran plutôt que sur son bouton : à 320 px,
     272 px ancrés au bord droit dépassaient d'un côté ou de l'autre. */
  .saas-acct-pop {
    position: fixed;
    top: calc(var(--tb-bottom, 58px) + 6px);
    inset-inline: 8px;
    width: auto; max-height: min(70vh, 460px);
  }
  /* Le rail de dessin n'existe pas sous 640 px : sa bascule non plus. */
  .sa-row-rail { display: none; }
}

/* ── Logo téléversé depuis l'administration ─────────────────────────────── */
img.tb-logo {
  height: var(--brand-logo-h, 27px); width: auto; max-width: 150px;
  border-radius: 7px; object-fit: contain; display: block;
}

/* ── Sélecteur d'unité de temps en lecture droite-à-gauche ─────────────── */
[dir="rtl"] .tf-menu { left: auto; right: 0; }
[dir="rtl"] .iv-btn.tf-item { text-align: right; justify-content: flex-end; }
[dir="rtl"] .tf-more { border-left: 0; border-right: 1px solid var(--border); margin-left: 0; margin-right: 3px; }
[dir="rtl"] .tf-star { margin-right: 0; margin-left: 3px; }

/* ── Dock d'analyse en lecture droite-à-gauche ─────────────────────────── */
/* Le dock reste à gauche en arabe, comme en anglais et en français.
   Le miroir habituel du RTL ne s'applique pas ici : le graphique, lui, garde
   sa lecture gauche-à-droite (`#chartContainer` plus haut), donc son échelle
   de prix ne bouge pas du bord droit. Un dock renvoyé à droite venait se
   poser dessus et masquait la colonne des prix sur toute la hauteur. À
   gauche, il n'a rien à recouvrir.

   Position, sens d'ouverture du panneau replié et flèche de repli suivent
   donc les règles de base ; seul le contenu des lignes reste aligné à
   droite, pour que les libellés arabes se lisent normalement. */
[dir="rtl"] .dock-link { text-align: right; }
[dir="rtl"] .dock-badges { margin-left: 0; margin-right: auto; }


/* ─── LOT 2 §13 — Événements économiques éloignés, mode Épuré ──────────────
   Aucune donnée retirée du calendrier : la pastille reste présente, cliquable,
   et son infobulle est entière. Elle cesse simplement de peser autant qu'un
   événement qui commente le prix en cours. Hors mode Épuré, rien ne change. */
body[data-density="clean"] .saas-news-mark.is-far {
  opacity: .35;
  transform: scale(.85);
}
body[data-density="clean"] .saas-news-mark.is-far:hover,
body[data-density="clean"] .saas-news-mark.is-far:focus-visible,
body[data-density="clean"] .saas-news-mark.is-far.is-open {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body[data-density="clean"] .saas-news-mark.is-far { transform: none; }
}