/* ═══════════════════════════════════════════════════════════════════════════
   refonte.css — application du système de conception Prometheus v2.0.
   Chargée APRÈS prometheus-tokens.css, style.css, theme3d.css, shell.css.

   CE QUE CETTE VERSION CHANGE PAR RAPPORT À LA PRÉCÉDENTE, ET POURQUOI

   J'avais composé une direction plausible : noir neutre #09090B, ambre #F5A524,
   panneaux remplis, rayons de 16 px, titres en graisse 600, ombre de contact.
   Le système de conception livré dit autre chose sur chacun de ces points, et
   il le dit avec des raisons :

     · le fond est #101010 et les surfaces sont CHAUDES (#1d1a18), pas neutres ;
     · un panneau n'a pas de fond — il est défini par son filet (`--pr-s1` vaut
       `transparent`). Le remplir crée une hiérarchie de boîtes là où le système
       veut une hiérarchie de contenus ;
     · l'élévation est NULLE. `--pr-e1` et `--pr-e2` valent `none`, exprès : la
       profondeur naît du contraste et du rythme, pas d'une ombre qui simule un
       relief que l'écran n'a pas ;
     · une seule graisse, 400. La hiérarchie vient de la TAILLE et du crénage
       négatif. Mettre du 700 sur un titre est la manière la plus rapide de
       faire ressembler un terminal financier à un site vitrine ;
     · l'accent #ee6018 est un SIGNAL — état vivant, sélection. Jamais un fond
       de bouton, jamais un aplat décoratif.

   Ma version précédente n'était pas fausse en soi ; elle était simplement à
   moi, et il existait un système. Entre les deux, c'est le système qui gagne :
   une direction artistique cohérente et suivie vaut mieux qu'une direction
   personnelle et jolie, parce qu'elle survit à celui qui l'a écrite.

   MÉTHODE : on remappe les variables historiques (--bg, --panel, --accent…)
   sur les jetons `--pr-*`. Les 1 137 lignes de `style.css` et les quinze vues
   basculent alors d'un seul coup, sans être réécrites — et une vue oubliée
   reste cohérente au lieu de garder l'ancienne palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PONT : l'ancien vocabulaire pointe vers les jetons ─────────────────*/
:root {
  --bg:        var(--pr-bg);
  --bg2:       var(--pr-bg-2);
  --panel:     var(--pr-s1);        /* transparent : le filet fait le panneau */
  --panel2:    var(--pr-s2);
  --border:    var(--pr-line);
  --border-net: var(--pr-line-2);
  --text:      var(--pr-tx);
  --dim:       var(--pr-tx-3);
  --dim2:      var(--pr-tx-4);
  --accent:    var(--pr-am);
  --accent2:   var(--pr-am);
  --green:     var(--pr-pos);
  --red:       var(--pr-neg);
  --blue:      var(--pr-d2);        /* la rampe est NEUTRE : plus de bleu ni  */
  --purple:    var(--pr-d3);        /* de violet, une série se lit par valeur */
  --green-fond: var(--pr-pos-w);
  --red-fond:   var(--pr-neg-w);
  --acc-fond:   var(--pr-am-w);
  --shadow:    transparent;
  --r-s: var(--pr-r1);
  --r-m: var(--pr-r2);
  --r-l: var(--pr-r2);
  --r-xl: var(--pr-r3);
}
:root[data-theme="light"] {
  --shadow: transparent;
}

body {
  background: var(--pr-bg);
  color: var(--pr-tx);
  font-family: var(--pr-ui);
  font-weight: var(--pr-w);
  letter-spacing: var(--pr-ls-body);
}

/* ── 2. SURFACES : un filet, pas une boîte ────────────────────────────────*/
.panel {
  background: transparent;
  background-image: none;                 /* annule le dégradé de theme3d */
  border: 1px solid var(--pr-line-2);
  border-radius: var(--pr-r2);
  box-shadow: none;                       /* élévation nulle, par doctrine */
  padding: var(--pr-sp5) var(--pr-sp5);
  transition: border-color .15s cubic-bezier(.4,0,.2,1);
}
.panel:hover { border-color: var(--pr-line-2); transform: none; }

/* SPÉCIFICITÉ. `theme3d.css` porte `.panel.slim { box-shadow: … }` — deux
   classes, donc plus fort que mon `.panel`. Écrire `box-shadow: none` sur
   `.panel` seul ne supprimait donc l'ombre que des panneaux ordinaires, et la
   laissait sur les « slim », qui sont les plus nombreux. Une déclaration qui
   perd la cascade ne casse rien : elle ne fait simplement pas ce qu'on croit,
   ce qui est plus difficile à voir qu'une erreur.
   L'élévation vaut ZÉRO par doctrine — `--pr-e1` et `--pr-e2` valent `none`. */
.panel, .panel.slim, .panel:hover, .panel.slim:hover {
  box-shadow: none;
  background-image: none;
}
.panel.slim { border-color: var(--pr-line); }

.panel-head::before { content: none; }
.panel-head {
  padding-left: 0;
  margin-bottom: var(--pr-sp4);
  padding-bottom: var(--pr-sp3);
  border-bottom: 1px solid var(--pr-line);
}
/* 17/22, graisse 500 au plus : c'est la TAILLE qui hiérarchise.
   Les trois sélecteurs sont nécessaires : `shell.css` porte
   `.panel.slim .panel-head h3 { font-weight: 620 }` (0,3,1), qui écrasait un
   simple `.panel-head h3` (0,1,1). Le titre sortait à 13 px et en graisse 620,
   soit exactement les deux choses que le système interdit — la graisse ne
   porte jamais la hiérarchie. */
.panel-head h3,
.panel .panel-head h3,
.panel.slim .panel-head h3 {
  font-size: 17px; line-height: 22px;
  font-weight: var(--pr-w-em);
  letter-spacing: var(--pr-ls-heading);
  color: var(--pr-tx); margin: 0;
}
.panel.slim .panel-head { border-bottom: none; padding-bottom: 0; }

h1 { font-size: 26px; line-height: 30px; font-weight: var(--pr-w-em);
     letter-spacing: var(--pr-ls-heading); }
h2 { font-size: 20px; line-height: 26px; font-weight: var(--pr-w-em);
     letter-spacing: var(--pr-ls-heading); }

/* ── 3. CHIFFRES ──────────────────────────────────────────────────────────
   Toute valeur comparée verticalement est à chasse fixe et à crénage négatif.
   Sans `tabular-nums`, « 1 111 » paraît plus court que « 8 888 » et l'œil
   compare des longueurs au lieu de comparer des valeurs.                    */
.data-table td, .data-table th, .mono, .kpi-val, .num, .pr-num {
  font-family: var(--pr-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--pr-ls-mono);
}

/* ── 4. TABLEAUX : densité 26 px ──────────────────────────────────────────*/
.data-table { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.data-table th {
  /* Famille déclarée SÉPARÉMENT du raccourci `font`. Le raccourci réinitialise
     `font-family`, et une règle plus spécifique ailleurs la repositionnait
     ensuite : l'entête sortait en Inter alors que la taille et la casse, elles,
     venaient bien d'ici. Une propriété qui perd à moitié est le plus discret
     des défauts — tout a l'air appliqué. */
  font-family: var(--pr-mono);
  font-size: 10px; font-weight: var(--pr-w);
  letter-spacing: var(--pr-ls-caps);
  text-transform: uppercase;
  color: var(--pr-tx-3);
  padding: var(--pr-sp2) var(--pr-sp3);
  border-bottom: 1px solid var(--pr-line);
  background: var(--pr-bg); position: sticky; top: 0; z-index: 2;
}
.data-table td {
  height: var(--pr-row); padding: 0 var(--pr-sp3);
  border-bottom: 1px solid var(--pr-line);
  color: var(--pr-tx);
}
.data-table tbody tr { transition: background-color .15s cubic-bezier(.4,0,.2,1); }
.data-table tbody tr:hover { background: var(--pr-s2); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── 5. HAUSSE / BAISSE : le signe précède la couleur ─────────────────────
   Une pastille colorée seule exclut huit pour cent des hommes. Le signe est
   porté par le texte lui-même ; la teinte ne fait que confirmer.            */
.pnl {
  display: inline-flex; align-items: center; gap: var(--pr-sp1);
  padding: 2px var(--pr-sp2); border-radius: var(--pr-r1);
  font-family: var(--pr-mono); font-size: 12px; font-weight: var(--pr-w);
  font-variant-numeric: tabular-nums; letter-spacing: var(--pr-ls-mono);
  line-height: 1.4;
}
.pnl.pos { background: var(--pr-pos-w); color: var(--pr-pos); }
.pnl.neg { background: var(--pr-neg-w); color: var(--pr-neg); }
.pnl.neutre { background: var(--pr-s3); color: var(--pr-tx-3); }

/* ── 6. CONTRÔLES : aucun accent en fond ──────────────────────────────────
   Le système l'interdit explicitement. Un bouton principal se distingue par
   son CONTRASTE (texte sombre sur surface claire), pas par une teinte de
   marque qui, répétée, cesse d'être un signal.                              */
.chip, .ghost-btn {
  background: transparent; border: 1px solid var(--pr-line-2);
  color: var(--pr-tx-2); border-radius: var(--pr-r1);
  font-family: var(--pr-ui); font-size: 12px; font-weight: var(--pr-w);
  letter-spacing: var(--pr-ls-body); padding: 5px var(--pr-sp3);
  transition: color .15s cubic-bezier(.4,0,.2,1),
              background-color .15s cubic-bezier(.4,0,.2,1),
              border-color .15s cubic-bezier(.4,0,.2,1);
}
.chip:hover, .ghost-btn:hover { color: var(--pr-tx); background: var(--pr-s2); }
.chip.actif, .ghost-btn.actif {
  color: var(--pr-bg); background: var(--pr-card); border-color: transparent;
}
.primary-btn {
  background: var(--pr-card-hi); color: var(--pr-bg); border: none;
  border-radius: var(--pr-r1); font-family: var(--pr-ui);
  font-size: 12px; font-weight: var(--pr-w-em);
  letter-spacing: var(--pr-ls-body); padding: 6px var(--pr-sp4); cursor: pointer;
}
.primary-btn:hover { background: #fff; }

.periodes { display: inline-flex; gap: 2px; padding: 2px;
            background: var(--pr-s3); border-radius: var(--pr-r1); }
.periodes button {
  border: none; background: transparent; color: var(--pr-tx-3);
  font-family: var(--pr-mono); font-size: 11px; font-weight: var(--pr-w);
  letter-spacing: var(--pr-ls-mono);
  padding: 4px 10px; border-radius: var(--pr-r1); cursor: pointer;
}
.periodes button:hover { color: var(--pr-tx); }
.periodes button[aria-pressed="true"], .periodes button.actif {
  background: var(--pr-card); color: var(--pr-bg);
}

/* ── 7. ESTAMPILLE : un chiffre, une source, une date ─────────────────────
   Principe 01 du système : « Aucune valeur ne s'affiche seule ». La provenance
   et l'horodatage accompagnent la valeur, dans la voix méta.                */
.pr-estampille {
  font: var(--pr-w) 10px var(--pr-mono);
  letter-spacing: var(--pr-ls-caps); text-transform: uppercase;
  color: var(--pr-tx-3); display: inline-flex; gap: var(--pr-sp2);
  align-items: center;
}
.pr-estampille b { font-weight: var(--pr-w); color: var(--pr-tx-2); }

/* ── 8. PERFORMANCE RÉELLE ET LIMITES ─────────────────────────────────────
   Section 08 du système : « le seul composant que Prometheus a et que ses
   concurrents n'ont pas ». Obligatoire sur tout moteur, et — c'est le point —
   AU MÊME ENDROIT ET DANS LE MÊME CORPS que le résultat favorable. Reléguer
   la limite en petits caractères sous le graphique, c'est la publier sans la
   dire.                                                                     */
.pr-limites {
  border: 1px solid var(--pr-line-2); border-left: 2px solid var(--pr-am);
  border-radius: var(--pr-r2);
  padding: var(--pr-sp4) var(--pr-sp5); margin: var(--pr-sp4) 0;
  background: transparent;
}
.pr-limites > .pr-eyebrow { display: block; margin-bottom: var(--pr-sp2); }
.pr-limites p { font-size: 13px; line-height: 1.65; color: var(--pr-tx-2);
                margin: 0; letter-spacing: var(--pr-ls-body); }
.pr-limites p b { font-weight: var(--pr-w); color: var(--pr-tx); }
.pr-limites .verdict { margin-top: var(--pr-sp3); font-size: 13px;
                       color: var(--pr-tx); }

/* ── 9. BANDEAU DE PANNE ──────────────────────────────────────────────────*/
#panne-globale {
  background: transparent;
  border-bottom: 1px solid var(--pr-line);
  border-left: 2px solid var(--pr-am);
  color: var(--pr-tx-2);
  font-size: 12.5px; padding: var(--pr-sp3) var(--pr-sp5);
}
#panne-globale::before { color: var(--pr-am); font-weight: var(--pr-w-em); }

/* ── 10. DÉTAILS ──────────────────────────────────────────────────────────*/
.dim { color: var(--pr-tx-3); }
.pos { color: var(--pr-pos); }
.neg { color: var(--pr-neg); }
::selection { background: var(--pr-am-w); color: var(--pr-tx); }
:focus-visible { outline: 1px solid var(--pr-am); outline-offset: 2px;
                 border-radius: var(--pr-r1); }

* { scrollbar-width: thin; scrollbar-color: var(--pr-line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pr-line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--pr-tx-4); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. RAIL LATÉRAL DE NAVIGATION  (organisation des pages)

   MESURE AVANT DÉCISION. À 1440 px de large, l'entête horizontale occupait
   175 px de haut pour ses dix-sept onglets — 16,2 % d'un écran 1080p, consommés
   avant la première donnée, sur chaque page. Un terminal est affamé de VERTICAL
   et la largeur est abondante. Le contenu commence désormais à y=25.

   Deux `flex-wrap: nowrap` sont indispensables : `#topbar` ET `#main-nav`
   portent chacun leur `wrap`, hérité de l'entête horizontale. Conservé en
   colonne avec une hauteur bornée, ce `wrap` replie vers la DROITE — huit
   onglets sur dix-sept atterrissaient hors du rail, masqués par
   `overflow: hidden`, rendus et cliquables mais inatteignables.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  #topbar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 232px;
    display: flex; flex-direction: column; align-items: stretch;
    flex-wrap: nowrap;
    gap: 0; padding: var(--pr-sp4) var(--pr-sp3) var(--pr-sp3);
    background: var(--pr-bg-2);
    border-right: 1px solid var(--pr-line); border-bottom: none;
    overflow: hidden; z-index: 60;
  }
  #topbar #pulse-bar {
    order: 4; flex: none; margin: var(--pr-sp2) 0 0;
    font: var(--pr-w) 10px var(--pr-mono); line-height: 1.55;
    letter-spacing: var(--pr-ls-mono); color: var(--pr-tx-3);
    max-height: 108px; overflow-y: auto; overscroll-behavior: contain;
  }
  #topbar .hdr-tools { order: 5; }

  body { padding-left: 232px; }

  .brand { padding: var(--pr-sp1) var(--pr-sp2) var(--pr-sp4); flex: none; }

  #topbar .search-wrap {
    flex: 0 0 auto; height: auto; align-self: stretch;
    margin: 0 0 var(--pr-sp3); max-width: none; width: 100%;
  }
  #topbar .search-wrap input { width: 100%; }
  #topbar #search-results { left: 0; right: 0; width: auto; }

  #topbar #main-nav {
    flex: 1 1 auto; display: flex; flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch; gap: 1px; overflow-y: auto; overflow-x: hidden;
    margin: 0; padding: 2px 0; min-height: 0;
    overscroll-behavior: contain;
  }
  #main-nav .nav-link {
    width: 100%; justify-content: flex-start; text-align: left;
    gap: var(--pr-sp3); padding: 6px var(--pr-sp3);
    border-radius: var(--pr-r1);
    font-family: var(--pr-ui); font-size: 13px; font-weight: var(--pr-w);
    letter-spacing: var(--pr-ls-body); white-space: nowrap;
    border: none; background: transparent; color: var(--pr-tx-3);
  }
  #main-nav .nav-link:hover { background: var(--pr-s2); color: var(--pr-tx); }
  #main-nav .nav-link.active {
    background: var(--pr-s2); color: var(--pr-tx);
  }
  /* L'accent signale l'état vivant — c'est son rôle, et le seul. */
  #main-nav .nav-link.active::after {
    content: ""; margin-left: auto;
    width: 4px; height: 4px; border-radius: 50%; background: var(--pr-am);
  }
  #main-nav .nav-link::before { content: none; }

  .hdr-tools {
    flex: none; display: flex; gap: var(--pr-sp2); justify-content: flex-start;
    padding-top: var(--pr-sp3); margin-top: var(--pr-sp1);
    border-top: 1px solid var(--pr-line);
  }
  /* `left` SANS `right` décale sans rétrécir : le bandeau gardait sa largeur
     pleine et débordait de la largeur du rail — 1 672 px sur un écran de
     1 440. Le défaut n'existe QUE quand le rail est actif, ce qui le fait
     passer pour un problème de rail alors que c'est un problème de bandeau.
     `right: 0` avec `width: auto` laisse la mise en page calculer la largeur. */
  #tr-bar { left: 232px; right: 0; width: auto; }
}

@media (min-width: 1700px) {
  #topbar { width: 252px; }
  body { padding-left: 252px; }
  #tr-bar { left: 252px; right: 0; width: auto; }
}

/* ── 12. BANDEAU DE COTATIONS : il défile, il n'élargit pas la page ────────
   `#tr-items` poussait le document à 1603 px de large sur un écran de 1440 —
   barre de défilement horizontale sur toute la page. Invisible tant que la
   base était morte et le bandeau vide : une mise en page ne se juge qu'avec
   ses données réelles.                                                      */
/* `min-width: 0` EST LA LIGNE QUI COMPTE, et son absence est invisible.
   Un élément flex a `min-width: auto` par défaut : il refuse de descendre
   sous la largeur de son contenu, quoi qu'on lui demande. `overflow-x: auto`
   ne s'applique donc jamais — la piste s'élargit au lieu de défiler, et le
   document entier gagne une barre horizontale. On croit avoir posé un
   défilement ; on a posé une déclaration sans effet. */
#tr-bar { overflow: hidden; max-width: 100%; min-width: 0;
          border-bottom: 1px solid var(--pr-line); }
#tr-items {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  min-width: 0; max-width: 100%;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
#tr-items::-webkit-scrollbar { height: 0; display: none; }
.tr-item { font-family: var(--pr-mono); font-size: 11.5px;
           letter-spacing: var(--pr-ls-mono); }
.tr-px { color: var(--pr-tx); }