/* ═══════════════════════════════════════════════════════════════════════
   PIPSTER PRO · RISK PULSE — barre et panneau
   ─────────────────────────────────────────────────────────────────────
   Préfixe `.rp-` sur TOUTES les classes. Cette feuille est injectée par
   page_terminal() AVANT le style.css que le document déclare lui-même :
   à spécificité égale, style.css gagne. Des classes que personne d'autre
   ne nomme sont donc la seule façon sûre d'habiller sans se battre.

   AUCUNE COULEUR EN DUR. Tout passe par les jetons de la peau, avec un
   repli sur la valeur du thème sombre quand le jeton pourrait manquer.

   ─── LE VERT ET LE ROUGE SONT RÉSERVÉS AU SENS DU MARCHÉ ───────────────
   Une échelle de risque en dégradé vert→rouge se lirait « acheter /
   vendre » alors qu'elle ne dit rien de la direction. La gravité monte
   donc du NEUTRE vers l'AMBRE puis vers le rouge d'alerte — et jamais
   vers `--down`, qui est une couleur de BOUGIE : du blanc dessus mesure
   3,49:1, sous le seuil AA. Le jeton sûr est `--rail-alert-bg`.
   ═══════════════════════════════════════════════════════════════════════ */

.rp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  background: var(--surface-2, #1c2128);
  border: 1px solid var(--border, rgba(255,255,255,.10));
  border-radius: var(--og-radius-md, 12px);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2, #c3c9d1);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* PIÈGE MAISON, payé cinq fois sur cette peau : le `display: flex`
   ci-dessus BAT l'attribut `hidden`, qui n'est qu'un `display: none` à
   spécificité nulle. Sans cette ligne, la barre resterait affichée VIDE
   en permanence — une pastille de risque annonçant un risque inexistant. */
.rp-bar[hidden] { display: none !important; }

/* Le liseré de gauche porte la gravité : c'est la seule surface colorée
   permanente, et elle est fine. CRITICAL doit attirer l'œil, pas
   transformer le terminal en tableau d'alarme. */
.rp-bar::before {
  content: '';
  align-self: stretch;
  width: 3px;
  margin: 6px 2px 6px -6px;
  border-radius: 3px;
  background: var(--rp-ink, var(--text-3, #929aa6));
  flex: none;
}

.rp-bar[data-level="LOW"]      { --rp-ink: var(--text-3, #929aa6); }
.rp-bar[data-level="MEDIUM"]   { --rp-ink: var(--warn, #F5A623); }
.rp-bar[data-level="HIGH"]     { --rp-ink: var(--warn, #F5A623); }
.rp-bar[data-level="CRITICAL"] { --rp-ink: var(--rail-alert-bg, #D32F2F); }

/* ── Pastille + barres de gravité ───────────────────────────────────────
   La COULEUR EST DOUBLÉE PAR UNE FORME : une à quatre barres montantes,
   comme l'échelle d'impact du calendrier. C'est ce qui rend le niveau
   lisible sans distinguer les teintes. */
.rp-sev {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex: none;
}
.rp-sev i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: var(--border-strong, rgba(255,255,255,.18));
}
.rp-sev i:nth-child(1) { height: 4px; }
.rp-sev i:nth-child(2) { height: 7px; }
.rp-sev i:nth-child(3) { height: 10px; }
.rp-sev i:nth-child(4) { height: 12px; }
.rp-bar[data-level="LOW"]      .rp-sev i:nth-child(-n+1),
.rp-bar[data-level="MEDIUM"]   .rp-sev i:nth-child(-n+2),
.rp-bar[data-level="HIGH"]     .rp-sev i:nth-child(-n+3),
.rp-bar[data-level="CRITICAL"] .rp-sev i:nth-child(-n+4) { background: var(--rp-ink); }

.rp-level {
  flex: none;
  font-weight: 650;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--rp-ink);
}

.rp-time {
  flex: none;
  color: var(--text-3, #929aa6);
  font-size: 11px;
}

.rp-title {
  flex: 1 1 auto;
  min-width: 0;                 /* sans quoi le texte refuse de se tronquer */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text, #e8eaed);
}

/* Un événement encore non confirmé le DIT. Le plafonnement muet serait
   indiscernable d'un score bas. */
.rp-pending {
  flex: none;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--og-radius-pill, 99px);
  color: var(--text-3, #929aa6);
  box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.10));
}

.rp-assets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.rp-asset {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-2, #c3c9d1);
  white-space: nowrap;
}
/* Le SENS de l'actif garde le vocabulaire du marché — là, le vert et le
   rouge sont à leur place, puisqu'ils décrivent bien une direction. */
.rp-asset b { font-weight: 600; }
.rp-asset .rp-up   { color: var(--up, #26A69A); }
.rp-asset .rp-down { color: var(--down, #EF5350); }
.rp-asset .rp-flat { color: var(--text-3, #929aa6); }

.rp-score {
  flex: none;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-2, #c3c9d1);
}

.rp-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.rp-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3, #929aa6);
  font: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--og-radius-sm, 8px);
  cursor: pointer;
}
.rp-btn:hover  { background: var(--og-hover, rgba(255,255,255,.06)); color: var(--text, #e8eaed); }
.rp-btn:focus-visible { outline: 2px solid var(--rp-ink); outline-offset: 1px; }

/* ── CRITICAL : une seule pulsation, puis le calme ──────────────────────
   Une animation permanente épuise l'attention en dix minutes et rend le
   terminal désagréable à tenir toute une séance. */
@keyframes rp-arrive {
  from { box-shadow: inset 0 0 0 1px var(--rp-ink), 0 0 0 4px color-mix(in srgb, var(--rp-ink) 22%, transparent); }
  to   { box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent; }
}
.rp-bar.rp-arrive { animation: rp-arrive 1.1s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .rp-bar.rp-arrive { animation: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────
   Sous 900 px on garde ce qui répond à « que s'est-il passé, et à quel
   point c'est grave » : la gravité, l'heure, le titre. Les actifs et le
   score passent dans le panneau. */
@media (max-width: 900px) {
  .rp-bar { gap: 8px; font-size: 11px; }
  .rp-assets, .rp-score, .rp-pending { display: none; }
}

/* UN TÉLÉPHONE COUCHÉ MESURE 896 px DE LARGE : aucune règle `max-width:
   859px` ne l'atteint. Le bloc paysage est autonome et doit tout réécrire
   en toutes lettres. Ici la barre disparaît : l'espace vertical y est le
   bien le plus rare, et une règle balai de la peau force de toute façon
   tout enfant injecté dans la cellule de l'espace de travail. */
@media (max-height: 620px) and (max-width: 1023px) and (orientation: landscape) {
  .rp-bar { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PANNEAU DE DÉTAIL
   ═══════════════════════════════════════════════════════════════════════ */

.rp-panel { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }

.rp-panel-head { display: flex; align-items: flex-start; gap: 8px; }
.rp-panel-title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text, #e8eaed); }

.rp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--text-3, #929aa6);
  font-size: 11px;
}
.rp-meta b { color: var(--text-2, #c3c9d1); font-weight: 600; }

/* ── FAIT / ANALYSE / SCÉNARIO ──────────────────────────────────────────
   TROIS BLOCS VISUELLEMENT DISTINCTS, jamais un seul pavé de prose. La
   séparation n'est pas décorative : elle est la garantie qu'un lecteur ne
   prendra jamais une hypothèse du modèle pour un fait rapporté. Les trois
   valeurs sont d'ailleurs trois colonnes distinctes en base. */
.rp-block {
  border-left: 2px solid var(--border, rgba(255,255,255,.10));
  padding: 2px 0 2px 10px;
}
.rp-block h4 {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3, #929aa6);
}
.rp-block p { margin: 0; color: var(--text-2, #c3c9d1); }

.rp-block.is-fact     { border-left-color: var(--text-3, #929aa6); }
.rp-block.is-analysis { border-left-color: var(--warn, #F5A623); }
.rp-block.is-scenario { border-left-color: var(--border-strong, rgba(255,255,255,.18)); }
.rp-block.is-scenario p { font-style: italic; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rp-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-3, #929aa6);
  padding: 4px 6px 4px 0;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rp-table td { padding: 4px 6px 4px 0; color: var(--text-2, #c3c9d1); border-top: 1px solid var(--border, rgba(255,255,255,.10)); }
.rp-table td:first-child { color: var(--text, #e8eaed); font-weight: 600; }

/* Jauge d'impact par actif : la barre dit ce que le nombre dit, en plus vite. */
/* `display: inline-block` n'est PAS cosmétique : un <span> reste `inline`,
   et sur une boîte inline la hauteur et la largeur ne s'appliquent pas du
   tout. La jauge était rendue, présente dans le document, et strictement
   invisible — relevé au banc, colonne « impact » vide sur toute la table. */
.rp-gauge { display: inline-block; position: relative; height: 4px; width: 54px; border-radius: 3px; background: var(--border, rgba(255,255,255,.10)); vertical-align: middle; }
.rp-gauge span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--rp-ink, var(--text-3)); }

.rp-sources { display: flex; flex-direction: column; gap: 4px; }
.rp-source {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3, #929aa6);
}
.rp-source a { color: var(--text-2, #c3c9d1); text-decoration: none; }
.rp-source a:hover { text-decoration: underline; }
/* Le palier de la source est une information de PREUVE, pas un ornement :
   c'est lui qui explique pourquoi le niveau est plafonné. */
.rp-tier {
  flex: none;
  font-size: 9px;
  padding: 0 5px;
  border-radius: var(--og-radius-pill, 99px);
  box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.10));
}
.rp-tier.is-institutional { color: var(--warn, #F5A623); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }

/* ── Confluence et divergence ───────────────────────────────────────────
   La divergence est affichée AUSSI VISIBLEMENT que l'accord : c'est le cas
   qui intéresse un trader, et le masquer reviendrait à ne montrer que ce
   qui conforte. */
.rp-conf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--og-radius-sm, 8px);
  background: var(--og-hover, rgba(255,255,255,.06));
  font-size: 11px;
}
.rp-conf b { font-weight: 650; }
.rp-conf.is-confluence b { color: var(--up, #26A69A); }
.rp-conf.is-divergence b { color: var(--warn, #F5A623); }

.rp-empty { color: var(--text-3, #929aa6); font-size: 11px; padding: 10px 0; }

/* ── RTL ────────────────────────────────────────────────────────────────
   Le terminal est mirroré en arabe ; seule la zone du graphique reste en
   LTR. La barre appartient à la chrome, elle suit donc le sens du texte. */
[dir="rtl"] .rp-bar::before { margin: 6px -6px 6px 2px; }
[dir="rtl"] .rp-block { border-left: 0; border-right: 2px solid var(--border, rgba(255,255,255,.10)); padding: 2px 10px 2px 0; }
[dir="rtl"] .rp-block.is-fact     { border-right-color: var(--text-3, #929aa6); }
[dir="rtl"] .rp-block.is-analysis { border-right-color: var(--warn, #F5A623); }
[dir="rtl"] .rp-block.is-scenario { border-right-color: var(--border-strong, rgba(255,255,255,.18)); }
[dir="rtl"] .rp-table th, [dir="rtl"] .rp-table td { text-align: right; padding: 4px 0 4px 6px; }
/* Les tickers et les nombres restent lus de gauche à droite, comme partout
   ailleurs dans ce terminal : « XAUUSD 8.5 » ne se renverse pas. */
[dir="rtl"] .rp-asset, [dir="rtl"] .rp-score, [dir="rtl"] .rp-time { direction: ltr; unicode-bidi: isolate; }

/* ═══════════════════════════════════════════════════════════════════════
   LA PLACE DANS LA GRILLE — sans quoi la barre écrase le graphique
   ─────────────────────────────────────────────────────────────────────
   `#ogWs` est une grille à DEUX COLONNES et UN SEUL RANG. Un enfant sans
   place déclarée prend la première cellule : le graphique glisse dans la
   colonne du panneau et le panneau tombe dans un rang implicite. Mesuré
   sur la bannière partenaire — graphique 340×309 au lieu de 1000×584 — et
   revu ici au banc, où la barre s'étirait à 320 px de haut au lieu de 42.

   `:has()` PLUTÔT QU'UN RANG PERMANENT : un `grid-template-rows: auto 1fr`
   toujours présent laisserait, barre absente, un rang vide de 0 px — mais
   le `gap` de 12 px s'appliquerait quand même. Douze pixels de vide en
   permanence pour une barre éteinte par défaut.

   Le cas où la bannière partenaire est DÉJÀ là est traité à part : deux
   rangs automatiques, dans l'ordre où on les lit.
   ═══════════════════════════════════════════════════════════════════════ */
body #ogWs:has(> .rp-bar) { grid-template-rows: auto minmax(0, 1fr); }
body #ogWs > .rp-bar { grid-row: 1; grid-column: 1 / -1; align-self: start; }
body #ogWs:has(> .rp-bar) > #chartStage { grid-row: 2; grid-column: 1; }
body #ogWs:has(> .rp-bar) > #ogPanel    { grid-row: 2; grid-column: 2; }

body #ogWs:has(> .sq-promo):has(> .rp-bar) { grid-template-rows: auto auto minmax(0, 1fr); }
body #ogWs:has(> .sq-promo) > .rp-bar { grid-row: 2; }
body #ogWs:has(> .sq-promo):has(> .rp-bar) > #chartStage { grid-row: 3; grid-column: 1; }
body #ogWs:has(> .sq-promo):has(> .rp-bar) > #ogPanel    { grid-row: 3; grid-column: 2; }

/* Sous 1023 px la grille retombe à une seule colonne : le panneau devient
   un tiroir du bas et n'a plus de cellule à lui. */
@media (max-width: 1023px) {
  body #ogWs:has(> .rp-bar) > #ogPanel,
  body #ogWs:has(> .sq-promo):has(> .rp-bar) > #ogPanel { grid-column: 1; }
}

/* La carte, comme les autres pièces du plateau. */
body #ogWs > .rp-bar { box-shadow: var(--og-lift-1); }


/* ═══════════════════════════════════════════════════════════════════════
   LE PANNEAU FLOTTANT
   ─────────────────────────────────────────────────────────────────────
   Il est posé dans `#chartWrapper` et non dans `#ogWs` : ce dernier est
   une grille, et un enfant de plus y réclamerait un rang. Le panneau est
   un CALQUE, il ne prend de place à personne.
   ═══════════════════════════════════════════════════════════════════════ */
.rp-sheet {
  position: absolute;
  z-index: 40;
  inset-inline-end: 16px;
  inset-block-start: 64px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: none;
  flex-direction: column;
  background: var(--surface-2, #1c2128);
  border-radius: var(--og-radius-md, 12px);
  box-shadow: var(--og-lift-2, 0 12px 32px -8px rgba(0,0,0,.85));
  overflow: hidden;
}
.rp-sheet.is-open { display: flex; }

.rp-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-block-end: 1px solid var(--border, rgba(255,255,255,.10));
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3, #929aa6);
}

.rp-sheet-body { padding: 12px; overflow-y: auto; }

/* Sur mobile il devient un tiroir du bas — la grammaire déjà retenue par
   le terminal pour tous ses panneaux sous 1023 px. */
@media (max-width: 1023px) {
  .rp-sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-height: 76vh;
    border-radius: var(--og-corner, 24px) var(--og-corner, 24px) 0 0;
  }
}

/* L'intitulé d'origine, cité sous la reformulation : présent pour la
   vérification, discret pour la lecture. Il ne prend jamais le pas sur la
   phrase que le lecteur comprend. */
.rp-original {
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3, #929aa6);
  font-style: italic;
  text-align: start;
}

/* L'ÉTIQUETTE suit la langue du lecteur, la CITATION garde la sienne.
   Le `direction: ltr` était posé sur le bloc entier : tant qu'il ne
   contenait que l'intitulé anglais, c'était juste. Depuis qu'il porte aussi
   son étiquette traduite, l'appliquer au bloc renverrait « العنوان الأصلي »
   de gauche à droite. L'isolement descend donc d'un cran. */
.rp-original-k {
  font-style: normal;
  font-weight: 600;
  opacity: .8;
}

.rp-original-q {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Dit que la phrase au-dessus est composée à partir de la donnée, et non
   rédigée. Plus discret encore que l'intitulé d'origine : c'est une note de
   provenance, pas une information de marché. */
.rp-auto {
  margin: 3px 0 0;
  font-size: 10px;
  color: var(--text-3, #929aa6);
  opacity: .75;
}

/* Le bloc verrouillé garde la forme d'un bloc d'analyse — il annonce ce qui
   existe, il ne mime pas une absence. L'encre baisse, la structure reste. */
.rp-block.rp-locked { cursor: pointer; }
.rp-block.rp-locked p { color: var(--text-3, #929aa6); font-style: normal; }
.rp-block.rp-locked:hover h4 { color: var(--warn, #F5A623); }