/* ═══════════════════════════════════════════════════════════════════════════
   action.css — la fiche action, refondue d'après la maquette « Prometheus
   Action NVDA ». Chargée APRÈS prometheus-tokens.css et refonte.css.

   CE QUE CETTE FEUILLE FAIT, ET CE QU'ELLE NE FAIT PAS
   ─────────────────────────────────────────────────────
   Elle ne touche qu'à la vue `#company-view`. Le reste du terminal a déjà basculé
   sur les jetons par le pont de `refonte.css` ; refaire la fiche action demandait
   en revanche une VRAIE mise en page, pas un remappage de couleurs — la maquette
   déplace des blocs, pas seulement des teintes.

   Les identifiants existants sont TOUS conservés (#c-name, #c-price, #sb-val,
   #c-ptvalue…). C'est délibéré : la présentation change, le contrat de données
   ne bouge pas, et le JavaScript qui remplit la page n'a pas à être réécrit pour
   qu'elle change d'allure. Ce qui s'ajoute — les cinq blocs, la barre 52
   semaines, la ligne de provenance — le fait sous de nouveaux identifiants.

   LES TROIS RÈGLES DU SYSTÈME, APPLIQUÉES ICI SANS EXCEPTION
   ────────────────────────────────────────────────────────────
   1. Le fond reste #101010. Une carte se définit par son FILET, pas par un
      aplat : `--pr-s1` vaut `transparent`, et le remplir recréerait la
      hiérarchie de boîtes que le système refuse.
   2. Une seule graisse, 400. La hiérarchie vient de la TAILLE et du crénage
      négatif. Le 500 est réservé à un libellé qui doit dominer — ici, le nom
      de la société et rien d'autre.
   3. L'accent #ee6018 est un signal, jamais un ornement. Il marque le ticker,
      le curseur des 52 semaines et la barre de section. Aucun fond de bouton.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LA GRILLE D'EN-TÊTE ──────────────────────────────────────────────────
   Quatre colonnes : identité élastique, puis cours, PT Score et PT Value à
   largeur fixe. Les trois cartes de droite portent des CHIFFRES qu'on lit en
   colonne d'une visite à l'autre ; leur largeur ne doit donc pas dépendre de la
   longueur du nom de la société. */
#company-header {
  display: grid;
  grid-template-columns: 1fr 330px 250px 360px;
  gap: 14px;
  padding: 10px 0 0;
  align-items: stretch;
  background: none;
  border: 0;
}

.ch-card {
  border: 1px solid var(--pr-line-2);
  border-radius: 8px;
  padding: 9px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

/* ── 2. IDENTITÉ ─────────────────────────────────────────────────────────── */
.ch-ident { display: flex; align-items: center; gap: 12px; }
#c-logo {
  width: 52px; height: 52px; flex: none;
  border-radius: 6px; border: 1px solid var(--pr-line-2);
  background: none; object-fit: contain; padding: 6px;
}
.ch-logo-vide {
  width: 52px; height: 52px; flex: none;
  border-radius: 6px; border: 1px solid var(--pr-line-2);
  display: flex; align-items: center; justify-content: center;
  font: var(--pr-w) 15px var(--pr-mono);
  letter-spacing: .5px; color: var(--pr-tx-2);
}
#c-name {
  font: var(--pr-w-em) 18px var(--pr-ui);
  letter-spacing: -.35px; line-height: 1.15;
  margin: 0; color: var(--pr-tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#company-header .chips { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
#company-header .chip {
  padding: 2px 8px;
  border: 1px solid var(--pr-line-2); border-radius: 3px;
  color: var(--pr-tx-2);
  font: var(--pr-w) 10px var(--pr-mono);
  letter-spacing: .5px; background: none;
}
/* le ticker porte l'accent : c'est l'identifiant qu'on cherche des yeux */
#company-header #c-ticker { border-color: var(--pr-am); color: var(--pr-am); }
#c-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font: var(--pr-w) 11px var(--pr-mono); color: var(--pr-tx-3);
}
#c-meta a { color: var(--pr-am); }
#c-meta b { font-weight: var(--pr-w); color: var(--pr-tx-2); }

/* ── 3. COURS ET FOURCHETTE 52 SEMAINES ──────────────────────────────────── */
.ch-quote { justify-content: center; }
#c-price {
  font: var(--pr-w) 30px var(--pr-mono);
  letter-spacing: var(--pr-ls-heading);
  color: var(--pr-tx); line-height: 1;
}
#c-change { font: var(--pr-w) 12px var(--pr-mono); letter-spacing: var(--pr-ls-mono); }
#c-change.up, .pos { color: var(--pr-pos); }
#c-change.down, .neg { color: var(--pr-neg); }
#c-qdate { font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-4); }

/* La fourchette de 52 semaines : une piste, un remplissage, un curseur.
   Elle remplace un chiffre par une POSITION — savoir que le titre vaut 184
   n'apprend rien ; savoir qu'il est aux quatre cinquièmes de son année, si. */
.ch-52 { margin-top: 4px; }
.ch-52-lab {
  display: flex; justify-content: space-between; align-items: baseline;
  font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-3);
  letter-spacing: var(--pr-ls-caps);
}
.ch-52-piste {
  position: relative; height: 5px; margin-top: 5px;
  border-radius: 3px; background: var(--pr-s3);
}
.ch-52-plein {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 3px; background: var(--pr-d4);
}
.ch-52-curseur {
  position: absolute; top: -3px; width: 2px; height: 11px;
  background: var(--pr-am); border-radius: 1px;
  transform: translateX(-1px);
}

/* ── 4. PT SCORE : le score ET ses cinq blocs ─────────────────────────────
   La maquette montre les cinq blocs À CÔTÉ du total, et c'est le bon choix :
   un 92 global ne dit pas si la société est solide et chère ou fragile et bon
   marché. Le détail tient en cinq lignes, il n'y a aucune raison de le cacher
   derrière un onglet. */
.ch-score { flex-direction: row; align-items: center; gap: 14px; }
.ch-blocs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-bloc {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: var(--pr-w) 10.5px var(--pr-ui); color: var(--pr-tx-3);
}
.ch-bloc b {
  font: var(--pr-w) 11px var(--pr-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--pr-ls-mono); color: var(--pr-tx-2);
}
.ch-total { text-align: right; flex: none; }
#sb-val {
  font: var(--pr-w) 38px var(--pr-mono);
  letter-spacing: var(--pr-ls-display);
  color: var(--pr-tx); line-height: 1; display: block;
}
.ch-total .sb-label,
.ch-value .vb-label {
  font: var(--pr-w) 10px var(--pr-mono);
  letter-spacing: var(--pr-ls-caps); text-transform: uppercase;
  color: var(--pr-tx-3); margin-top: 4px; display: block;
}
/* l'anneau du système précédent n'a plus lieu d'être : le système refuse
   l'ornement, et un cercle de progression est un ornement autour d'un nombre */
#sb-ring { all: unset; display: contents; }

/* ── 5. PT VALUE ─────────────────────────────────────────────────────────── */
.ch-value { justify-content: center; }
.ch-value-haut { display: flex; align-items: baseline; gap: 18px; }
#c-ptvalue {
  font: var(--pr-w) 26px var(--pr-mono);
  letter-spacing: var(--pr-ls-heading); color: var(--pr-tx); line-height: 1;
}
#c-ratio {
  font: var(--pr-w) 22px var(--pr-mono);
  letter-spacing: var(--pr-ls-heading); color: var(--pr-tx-2); line-height: 1;
}
#c-upside, #c-vrating {
  font: var(--pr-w) 11px var(--pr-mono); letter-spacing: var(--pr-ls-mono);
}
#c-vrating { color: var(--pr-tx-2); background: none; padding: 0; border: 0; }

/* ── 6. LA SIGNATURE DE SECTION — voir la section 11, qui la corrige.
   La première version, empilée sur quatre lignes, était fausse : le modèle met
   tout sur une seule ligne. Les règles vivent désormais en section 11. */

/* ── 7. ONGLETS ──────────────────────────────────────────────────────────── */
#tabs {
  display: flex; gap: 0; margin-top: 18px;
  border-bottom: 1px solid var(--pr-line); background: none; padding: 0;
}
#tabs .tab {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 9px 14px; margin: 0 0 -1px;
  font: var(--pr-w) 12px var(--pr-ui); letter-spacing: var(--pr-ls-body);
  color: var(--pr-tx-3); cursor: pointer; border-radius: 0;
  transition: color .15s cubic-bezier(.4,0,.2,1),
              border-color .15s cubic-bezier(.4,0,.2,1);
}
#tabs .tab:hover { color: var(--pr-tx-2); }
#tabs .tab.active {
  color: var(--pr-tx); border-bottom-color: var(--pr-am); background: none;
}

/* ── 8. BARRES DE BLOC, dans les pages d'onglet ──────────────────────────── */
.pr-jauge {
  height: 4px; border-radius: 1px; background: var(--pr-s3);
  overflow: hidden; margin-top: 6px;
}
.pr-jauge > i { display: block; height: 100%; background: var(--pr-d2); }
.pr-jauge > i.fort { background: var(--pr-tx); }
.pr-jauge > i.faible { background: var(--pr-d4); }


/* ── 9. REPLIS RESPONSIFS ─────────────────────────────────────────────────
   PLACÉS EN DERNIER, ET C'EST LE POINT.
   Ils étaient écrits en tête de fichier, avant les règles de base. À
   spécificité égale, c'est la DERNIÈRE déclaration qui l'emporte : la règle
   `.ch-score { flex-direction: row }` de la section 4 annulait donc
   silencieusement le `column` de la requête média, et la carte du score
   restait en ligne sur mobile sans qu'aucune erreur ne se produise.
   Une feuille de style ne prévient jamais qu'elle se contredit ; l'ordre est
   la seule protection. */
/* Le seuil : quatre colonnes demandent 330 + 250 + 360 + trois gouttières de 14,
   soit 982 px, plus une colonne d'identité lisible — environ 1400 px. En dessous, la
   carte PT Value passe sur une deuxième ligne ET S'ÉTEND, faute de quoi elle se
   glisse dans une colonne implicite trop étroite pour ses deux nombres.
   Le sélecteur est une CLASSE : la première version visait `#ch-value` alors que
   l'élément porte `class="ch-value"`, si bien que la règle ne s'appliquait jamais et
   que la carte se repliait sans s'étendre. */
@media (max-width: 1399px) {
  #company-header { grid-template-columns: 1fr 300px 230px; }
  #company-header .ch-value { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  #company-header { grid-template-columns: 1fr; }
  #company-header .ch-value { grid-column: auto; }
  .ch-score { flex-direction: column; align-items: stretch; }
  .ch-total { text-align: left; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. LES SIX SECTIONS DE LA FICHE
   ───────────────────────────────────────────────────────────────────────────
   Relevées sur le modèle RENDU, pas déduites de sa source : la maquette a été
   chargée dans un navigateur et son DOM interrogé, ce qui donne les vraies
   largeurs de grille au pixel plutôt qu'une approximation à l'œil.

       §1 Cours et performance      1021 / 400
       §2 Qualité financière         340 / 533 / 533   puis   469 / 469 / 469
       §3 Valorisation               360 / 450 / 597
       §4 Comparables du secteur     tableau pleine largeur
       §5 Synthèse de l'actualité    pleine largeur
       §6 Actualités                 861 / 560

   Toutes se somment à 1435 px avec des gouttières de 14. On les exprime en
   fractions pour la colonne élastique et en pixels pour celles qui portent des
   colonnes de chiffres : une colonne de nombres dont la largeur change d'une
   section à l'autre casse la lecture verticale.
   ═════════════════════════════════════════════════════════════════════════ */

#company-view .tab-page { padding: 0; }

.pr-sec { margin-bottom: 34px; }
.pr-g-1021  { display: grid; grid-template-columns: 1fr 400px; gap: 14px; }
.pr-g-score { display: grid; grid-template-columns: 340px 1fr 1fr; gap: 14px; }
.pr-g-3     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pr-g-val   { display: grid; grid-template-columns: 360px 450px 1fr; gap: 14px; }
.pr-g-news  { display: grid; grid-template-columns: 1fr 560px; gap: 14px; }

/* Le panneau : un filet, un rayon, rien d'autre. Pas de fond, pas d'ombre. */
.pr-p {
  border: 1px solid var(--pr-line-2); border-radius: 10px;
  padding: 14px 16px; min-width: 0;
}
.pr-p-tt {
  font: var(--pr-w) 12.5px var(--pr-ui); color: var(--pr-tx);
  letter-spacing: var(--pr-ls-body); margin: 0 0 2px;
}
.pr-p-st { font: var(--pr-w) 10.5px var(--pr-ui); color: var(--pr-tx-3); margin-bottom: 10px; }

/* ── §2 : le score et ses cinq piliers ─────────────────────────────────── */
.pr-score-grand {
  font: var(--pr-w) 56px var(--pr-mono); letter-spacing: var(--pr-ls-display);
  color: var(--pr-tx); line-height: 1;
}
.pr-pilier { padding: 9px 0; border-bottom: 1px solid var(--pr-line); }
.pr-pilier:last-child { border-bottom: 0; }
.pr-pilier-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pr-pilier-nom { font: var(--pr-w) 12px var(--pr-ui); color: var(--pr-tx); }
.pr-pilier-val { font: var(--pr-w) 12px var(--pr-mono); color: var(--pr-tx-2); }
.pr-pilier-val i { font-style: normal; color: var(--pr-tx-4); }
.pr-pilier-exp { font: var(--pr-w) 10.5px var(--pr-ui); color: var(--pr-tx-3); margin-top: 3px; }

/* ── Points de vigilance et points d'appui ──────────────────────────────
   Chaque règle affiche SA SOURCE. C'est le geste le plus important de toute la
   maquette : une alerte sans provenance est une opinion, une alerte qui cite
   `ptvalue.ps_ratio · 10 ans d'historique` est vérifiable par qui la lit. */
/* DEUX COLONNES, comme le modèle : le constat à gauche, sa mesure à droite dans
   une colonne fixe. Empilés, on lit une phrase puis un chiffre, une règle après
   l'autre ; alignés, l'œil descend la colonne de droite et repère l'écart sans
   lire les phrases. Les 128 px sont relevés sur le modèle. */
.pr-regle {
  display: grid; grid-template-columns: 1fr 128px; gap: 12px; align-items: start;
  padding: 9px 0; border-bottom: 1px solid var(--pr-line);
}
.pr-regle:last-child { border-bottom: 0; }
.pr-regle-txt { font: var(--pr-w) 11.5px var(--pr-ui); color: var(--pr-tx-2); line-height: 1.4; }
.pr-regle-src {
  font: var(--pr-w) 9.5px var(--pr-mono); color: var(--pr-tx-4);
  letter-spacing: var(--pr-ls-caps); margin-top: 3px;
}
.pr-regle-chif {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-align: right;
}
.pr-regle-chif b {
  font: var(--pr-w) 13px var(--pr-mono); letter-spacing: var(--pr-ls-mono);
  color: var(--pr-tx);
}
.pr-regle-chif span { font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-3); }
.pr-puce { width: 5px; height: 5px; border-radius: 50%; flex: none; display: inline-block; }
.pr-puce.v { background: var(--pr-neg); }
.pr-puce.a { background: var(--pr-pos); }

/* ── Blocs de métriques détaillées ─────────────────────────────────────── */
.pr-bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pr-bloc-score {
  font: var(--pr-w) 22px var(--pr-mono); letter-spacing: var(--pr-ls-heading);
  color: var(--pr-tx);
}
.pr-bloc-score i { font-style: normal; font-size: 11px; color: var(--pr-tx-4); }
.pr-metrique {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--pr-line);
  font: var(--pr-w) 11px var(--pr-ui); color: var(--pr-tx-3);
}
.pr-metrique:last-child { border-bottom: 0; }
.pr-metrique b {
  font: var(--pr-w) 11.5px var(--pr-mono); font-variant-numeric: tabular-nums;
  letter-spacing: var(--pr-ls-mono); color: var(--pr-tx);
}

/* ── §3 : la jauge prix / PT Value ──────────────────────────────────────
   Une échelle de 0,4 à 1,8, la parité marquée au centre. Elle dit d'un coup
   d'œil de quel côté du juste prix se trouve le titre — ce qu'un ratio de 0,88
   ne dit qu'à qui connaît déjà l'échelle par cœur. */
.pr-jauge-val {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--pr-s3); margin: 14px 0 6px;
}
.pr-jauge-val .mid { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--pr-line-2); }
.pr-jauge-val .cur { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--pr-am); border-radius: 1px; }
.pr-jauge-lab {
  display: flex; justify-content: space-between;
  font: var(--pr-w) 9.5px var(--pr-mono); color: var(--pr-tx-4);
  letter-spacing: var(--pr-ls-caps);
}

/* ── Tableaux : comparables et méthodes ────────────────────────────────── */
.pr-t { width: 100%; border-collapse: collapse; }
.pr-t th {
  font: var(--pr-w) 9.5px var(--pr-mono); letter-spacing: var(--pr-ls-caps);
  text-transform: uppercase; color: var(--pr-tx-3); text-align: right;
  padding: 0 8px 7px; border-bottom: 1px solid var(--pr-line-2); white-space: nowrap;
}
.pr-t th:first-child, .pr-t td:first-child { text-align: left; }
.pr-t td {
  font: var(--pr-w) 11.5px var(--pr-mono); font-variant-numeric: tabular-nums;
  letter-spacing: var(--pr-ls-mono); color: var(--pr-tx-2);
  padding: 6px 8px; border-bottom: 1px solid var(--pr-line);
  text-align: right; white-space: nowrap;
}
.pr-t tbody tr:hover td { background: var(--pr-s2); }
.pr-t tr.pr-moi td { color: var(--pr-tx); }
.pr-t tr.pr-moi td:first-child { border-left: 2px solid var(--pr-am); padding-left: 6px; }
.pr-t tr.pr-med td { border-top: 1px solid var(--pr-line-2); border-bottom: 0; color: var(--pr-tx-3); }
.pr-t .pr-nom { font-family: var(--pr-ui); color: var(--pr-tx); }
.pr-t .pr-sous { font: var(--pr-w) 9.5px var(--pr-ui); color: var(--pr-tx-4); display: block; }
/* « une case vide est une donnée manquante, pas un zéro » — le modèle le dit,
   et l'écrire en gris très faible est la seule façon de le tenir. */
.pr-t .pr-vide { color: var(--pr-tx-4); }

/* ── §5 et §6 : actualités ──────────────────────────────────────────────── */
.pr-tonalite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-ton-b { font: var(--pr-w) 20px var(--pr-mono); letter-spacing: var(--pr-ls-heading); }
.pr-etiq {
  padding: 2px 8px; border: 1px solid var(--pr-line-2); border-radius: 3px;
  font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-2); letter-spacing: .5px;
}
.pr-etiq.crit { border-color: var(--pr-neg); color: var(--pr-neg); }
.pr-actu { padding: 9px 0; border-bottom: 1px solid var(--pr-line); }
.pr-actu:last-child { border-bottom: 0; }
.pr-actu-t { font: var(--pr-w) 11.5px var(--pr-ui); color: var(--pr-tx); line-height: 1.4; }
.pr-actu-m {
  display: flex; gap: 10px; align-items: center; margin-top: 4px;
  font: var(--pr-w) 9.5px var(--pr-mono); color: var(--pr-tx-4);
  letter-spacing: var(--pr-ls-caps);
}
.pr-actu-m .pos { color: var(--pr-pos); }
.pr-actu-m .neg { color: var(--pr-neg); }

/* ── Contrôles de graphique ─────────────────────────────────────────────── */
.pr-ctrl { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pr-ctrl button {
  background: none; border: 1px solid var(--pr-line-2); border-radius: 3px;
  padding: 3px 9px; font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-3);
  cursor: pointer; letter-spacing: .4px;
  transition: color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1);
}
.pr-ctrl button:hover { color: var(--pr-tx-2); border-color: var(--pr-tx-4); }
.pr-ctrl button.on { color: var(--pr-am); border-color: var(--pr-am); }
.pr-ctrl-sep { width: 1px; align-self: stretch; background: var(--pr-line); margin: 0 6px; }

/* Les replis de ces sections, en dernier comme tout le reste — voir §9. */
@media (max-width: 1399px) {
  .pr-g-1021, .pr-g-news { grid-template-columns: 1fr; }
  .pr-g-score { grid-template-columns: 280px 1fr; }
  .pr-g-val   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .pr-g-score, .pr-g-3, .pr-g-val { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. L'EN-TÊTE DE SECTION, CORRIGÉ D'APRÈS LE MODÈLE
   ───────────────────────────────────────────────────────────────────────────
   Ma première version empilait barre, titre, sous-titre et provenance sur
   quatre lignes. Le modèle les met SUR UNE SEULE, en `flex row` aligné sur la
   ligne de base, et pousse le quatrième élément à droite par `margin-left:auto`.

   Relevé sur son DOM, section par section, le quatrième élément change de rôle :

       §1  le sélecteur de période      1 M · 6 M · 1 A · 5 A · 10 A · MAX
       §2  la provenance du calcul      10px Geist Mono, #4d4947
       §4  un avertissement de lecture  « une case vide est une donnée manquante »
       §5  un verdict                   « Tonalité positive », 12px, en vert
       §6  la provenance de la source   « source FMP · rafraîchissement 6 h… »

   C'est une bande unique où la gauche annonce et la droite qualifie. Empilée,
   elle prenait quatre fois la hauteur et perdait ce vis-à-vis.
   ═════════════════════════════════════════════════════════════════════════ */

.sec-tete {
  display: flex; flex-direction: row; align-items: baseline;
  gap: 12px; margin: 28px 0 12px; flex-wrap: wrap;
}
.sec-barre { width: 3px; height: 13px; flex: none; background: var(--pr-am); border-radius: 1px; }
.sec-titre { font: var(--pr-w) 15px var(--pr-ui); letter-spacing: var(--pr-ls-heading); color: var(--pr-tx); margin: 0; }
.sec-sous  { font: var(--pr-w) 11px var(--pr-ui); color: var(--pr-tx-3); margin: 0; }
/* le quatrième élément, quel qu'il soit, part à droite */
.sec-fin   { margin-left: auto; }
.sec-source {
  font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-4);
  letter-spacing: var(--pr-ls-caps); margin: 0;
}
.sec-source.non-mesure { color: var(--pr-am); }
.sec-verdict { font: var(--pr-w) 12px var(--pr-ui); }
.sec-verdict.pos { color: var(--pr-pos); }
.sec-verdict.neg { color: var(--pr-neg); }
.sec-verdict.neu { color: var(--pr-tx-2); }

/* ═══ 12. §1 — COURS ET PERFORMANCE ══════════════════════════════════════
   Grille 1039 / 400 : le graphique et, à sa droite, la performance comparée. */
.pr-g-cours { display: grid; grid-template-columns: 1fr 400px; gap: 14px; }

.pr-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.pr-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.pr-leg {
  display: flex; align-items: center; gap: 5px;
  font: var(--pr-w) 10px var(--pr-mono); color: var(--pr-tx-3);
  letter-spacing: var(--pr-ls-caps);
}
.pr-leg i { width: 10px; height: 2px; display: inline-block; border-radius: 1px; }
.pr-date-champ {
  background: none; border: 1px solid var(--pr-line-2); border-radius: 3px;
  padding: 3px 7px; color: var(--pr-tx-2);
  font: var(--pr-w) 10px var(--pr-mono); letter-spacing: .4px;
  color-scheme: dark;
}

/* ═══ 13. §4 — COMPARABLES ═══════════════════════════════════════════════
   Un tableau pleine largeur, treize colonnes. La ligne du titre courant porte
   un filet d'accent à gauche ; la médiane est séparée par un filet plus clair
   et vit en gris — c'est un repère, pas un concurrent. */
.pr-t-large { width: 100%; }
.pr-t-large td:first-child { min-width: 190px; }

/* ═══ 14. §5 — SYNTHÈSE DE L'ACTUALITÉ ═══════════════════════════════════
   Une ligne de comptage, puis la dépêche la plus critique mise en vis-à-vis
   d'une étiquette de 76 px. Le modèle réserve cette étiquette au seul article
   qui mérite une remontée immédiate : la garder rare est ce qui lui donne son
   sens. */
.pr-crit { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; }
.pr-compte { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.pr-compte b { font: var(--pr-w) 11px var(--pr-mono); color: var(--pr-tx-2); }
.pr-compte span { font: var(--pr-w) 11px var(--pr-mono); color: var(--pr-tx-4); }

/* ═══ 15. §6 — ACTUALITÉS ════════════════════════════════════════════════
   Grille 879 / 560. À gauche le flux filtré sur le titre : chaque ligne est
   une sous-grille de 6 px — un filet de sentiment — et du contenu. À droite le
   flux marché non filtré, avec une vignette de 132 px.
   Le filet de 6 px plutôt qu'une pastille : il court sur toute la hauteur de la
   dépêche, donc il reste lisible quand le titre passe sur deux lignes. */
.pr-fil { display: grid; grid-template-columns: 6px 1fr; gap: 12px; align-items: stretch; padding: 10px 0; border-bottom: 1px solid var(--pr-line); }
.pr-fil:last-child { border-bottom: 0; }
.pr-fil-barre { border-radius: 2px; background: var(--pr-d5); }
.pr-fil-barre.pos { background: var(--pr-pos); }
.pr-fil-barre.neg { background: var(--pr-neg); }
.pr-marche { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--pr-line); }
.pr-marche:last-child { border-bottom: 0; }
.pr-vignette {
  width: 132px; height: 76px; border-radius: 6px; border: 1px solid var(--pr-line-2);
  background: var(--pr-s3); object-fit: cover; display: block;
}
.pr-vignette-vide {
  width: 132px; height: 76px; border-radius: 6px; border: 1px solid var(--pr-line-2);
  display: flex; align-items: center; justify-content: center;
  font: var(--pr-w) 9.5px var(--pr-mono); color: var(--pr-tx-4);
  letter-spacing: var(--pr-ls-caps); text-align: center; padding: 4px;
}

@media (max-width: 1399px) {
  .pr-g-cours { grid-template-columns: 1fr; }
}